resolved merge conflicts

Opening notebook (which contains code cell), then "Items"-> document editor is broken. Our JsonEditor component will hang at `monaco.editor.create()`.

Matching the `monaco-editor` version with `@nteract/monaco-editor` fixes it.

I looked into using one, but we cannot rely nteract, because it does not get loaded if notebook isn't enabled. Forcing nteract to use ours (if at all possible) isn't a good idea, since their code is tuned to their version.

For now, we'll have to keep the versions in sync.

.env.example

@@ -3,7 +3,11 @@ PORTAL_RUNNER_PASSWORD=
 PORTAL_RUNNER_SUBSCRIPTION=
 PORTAL_RUNNER_RESOURCE_GROUP=
 PORTAL_RUNNER_DATABASE_ACCOUNT=
+PORTAL_RUNNER_DATABASE_ACCOUNT_KEY=
 PORTAL_RUNNER_CONNECTION_STRING=
+NOTEBOOKS_TEST_RUNNER_TENANT_ID=
+NOTEBOOKS_TEST_RUNNER_CLIENT_ID=
+NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET=
 CASSANDRA_CONNECTION_STRING=
 MONGO_CONNECTION_STRING=
 TABLES_CONNECTION_STRING=

.eslintignore

@@ -202,8 +202,6 @@ src/Explorer/Tabs/QueryTab.test.ts
 src/Explorer/Tabs/QueryTab.ts
 src/Explorer/Tabs/QueryTablesTab.ts
 src/Explorer/Tabs/ScriptTabBase.ts
-src/Explorer/Tabs/SettingsTab.test.ts
-src/Explorer/Tabs/SettingsTab.ts
 src/Explorer/Tabs/SparkMasterTab.ts
 src/Explorer/Tabs/StoredProcedureTab.ts
 src/Explorer/Tabs/TabComponents.ts

.github/workflows/ci.yml

@@ -146,6 +146,13 @@ jobs:
         shell: bash
         env:
           NODE_TLS_REJECT_UNAUTHORIZED: 0
+          PORTAL_RUNNER_SUBSCRIPTION: ${{ secrets.PORTAL_RUNNER_SUBSCRIPTION }}
+          PORTAL_RUNNER_RESOURCE_GROUP: ${{ secrets.PORTAL_RUNNER_RESOURCE_GROUP }}
+          PORTAL_RUNNER_DATABASE_ACCOUNT: ${{ secrets.PORTAL_RUNNER_DATABASE_ACCOUNT }}
+          PORTAL_RUNNER_DATABASE_ACCOUNT_KEY: ${{ secrets.PORTAL_RUNNER_DATABASE_ACCOUNT_KEY }}
+          NOTEBOOKS_TEST_RUNNER_TENANT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_TENANT_ID }}
+          NOTEBOOKS_TEST_RUNNER_CLIENT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_ID }}
+          NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
           PORTAL_RUNNER_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_SQL }}
           MONGO_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_MONGO }}
           CASSANDRA_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_CASSANDRA }}

package.json

@@ -4,8 +4,10 @@
   "description": "Cosmos Explorer",
   "main": "index.js",
   "dependencies": {
+    "@azure/arm-cosmosdb": "9.1.0",
     "@azure/cosmos": "3.9.0",
-    "@azure/cosmos-language-service": "0.0.4",
+    "@azure/identity": "1.1.0",
+    "@azure/cosmos-language-service": "0.0.5",
     "@jupyterlab/services": "6.0.0-rc.2",
     "@jupyterlab/terminal": "3.0.0-rc.2",
     "@microsoft/applicationinsights-web": "2.5.9",
@@ -66,7 +68,7 @@
     "jquery-ui-dist": "1.12.1",
     "knockout": "3.5.1",
     "mkdirp": "1.0.4",
-    "monaco-editor": "0.15.6",
+    "monaco-editor": "0.18.1",
     "object.entries": "1.1.0",
     "office-ui-fabric-react": "7.134.1",
     "p-retry": "4.2.0",
@@ -115,7 +117,7 @@
     "@types/prop-types": "15.5.8",
     "@types/puppeteer": "3.0.1",
     "@types/q": "1.5.1",
-    "@types/react": "16.9.49",
+    "@types/react": "16.9.56",
     "@types/react-dom": "16.0.7",
     "@types/react-notification-system": "0.2.39",
     "@types/react-redux": "7.1.7",

src/Common/PortalNotifications.ts

@@ -16,7 +16,7 @@ const notificationsPath = () => {
 };
 
 export const fetchPortalNotifications = async (): Promise<DataModels.Notification[]> => {
-  if (configContext.platform === Platform.Emulator) {
+  if (configContext.platform === Platform.Emulator || configContext.platform === Platform.Hosted) {
     return [];
   }
 

src/Contracts/ExplorerContracts.ts

@@ -32,7 +32,8 @@ export enum MessageTypes {
   GetArcadiaToken,
   CreateWorkspace,
   CreateSparkPool,
-  RefreshDatabaseAccount
+  RefreshDatabaseAccount,
+  InitTestExplorer
 }
 
 export { Versions, ActionContracts, Diagnostics };

src/Explorer/ComponentRegisterer.test.ts

@@ -44,10 +44,6 @@ describe("Component Registerer", () => {
     expect(ko.components.isRegistered("user-defined-function-tab")).toBe(true);
   });
 
-  it("should register settings-tab component", () => {
-    expect(ko.components.isRegistered("settings-tab")).toBe(true);
-  });
-
   it("should register settings-tab-v2 component", () => {
     expect(ko.components.isRegistered("settings-tab-v2")).toBe(true);
   });

src/Explorer/ComponentRegisterer.ts

@@ -26,12 +26,11 @@ ko.components.register("throughput-input-autopilot-v3", ThroughputInputComponent
 ko.components.register("tabs-manager", TabsManagerKOComponent());
 
 // Collection Tabs
-ko.components.register("documents-tab", new TabComponents.MongoDocumentsTabV2());
+ko.components.register("documents-tab", new TabComponents.DocumentsTab());
 ko.components.register("mongo-documents-tab", new TabComponents.MongoDocumentsTab());
 ko.components.register("stored-procedure-tab", new TabComponents.StoredProcedureTab());
 ko.components.register("trigger-tab", new TabComponents.TriggerTab());
 ko.components.register("user-defined-function-tab", new TabComponents.UserDefinedFunctionTab());
-ko.components.register("settings-tab", new TabComponents.SettingsTab());
 ko.components.register("settings-tab-v2", new TabComponents.SettingsTabV2());
 ko.components.register("query-tab", new TabComponents.QueryTab());
 ko.components.register("tables-query-tab", new TabComponents.QueryTablesTab());

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -16,7 +16,7 @@ import { CommandButtonComponentProps } from "../../Controls/CommandButton/Comman
 import { userContext } from "../../../UserContext";
 import { updateOfferThroughputBeyondLimit } from "../../../Common/dataAccess/updateOfferThroughputBeyondLimit";
 import SettingsTab from "../../Tabs/SettingsTabV2";
-import { throughputUnit } from "./SettingsRenderUtils";
+import { mongoIndexingPolicyAADError, throughputUnit } from "./SettingsRenderUtils";
 import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
 import {
   MongoIndexingPolicyComponent,
@@ -49,6 +49,7 @@ import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/genera
 import { readMongoDBCollectionThroughRP } from "../../../Common/dataAccess/readMongoDBCollection";
 import { getIndexTransformationProgress } from "../../../Common/dataAccess/getIndexTransformationProgress";
 import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
+import { isEmpty } from "underscore";
 
 interface SettingsV2TabInfo {
   tab: SettingsV2TabTypes;
@@ -227,7 +228,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
 
   public loadMongoIndexes = async (): Promise<void> => {
     if (
-      this.container.isMongoIndexEditorEnabled() &&
       this.container.isPreferredApiMongoDB() &&
       this.container.isEnableMongoCapabilityPresent() &&
       this.container.databaseAccount()
@@ -1000,15 +1000,18 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         tab: SettingsV2TabTypes.IndexingPolicyTab,
         content: <IndexingPolicyComponent {...indexingPolicyComponentProps} />
       });
-    } else if (
-      this.container.isMongoIndexEditorEnabled() &&
-      this.container.isPreferredApiMongoDB() &&
-      this.container.isEnableMongoCapabilityPresent()
-    ) {
-      tabs.push({
-        tab: SettingsV2TabTypes.IndexingPolicyTab,
-        content: <MongoIndexingPolicyComponent {...mongoIndexingPolicyComponentProps} />
-      });
+    } else if (this.container.isPreferredApiMongoDB()) {
+      if (isEmpty(this.container.features())) {
+        tabs.push({
+          tab: SettingsV2TabTypes.IndexingPolicyTab,
+          content: mongoIndexingPolicyAADError
+        });
+      } else if (this.container.isEnableMongoCapabilityPresent()) {
+        tabs.push({
+          tab: SettingsV2TabTypes.IndexingPolicyTab,
+          content: <MongoIndexingPolicyComponent {...mongoIndexingPolicyComponentProps} />
+        });
+      }
     }
 
     if (this.hasConflictResolution()) {

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx

@@ -24,7 +24,6 @@ import {
   transparentDetailsRowStyles,
   createAndAddMongoIndexStackProps,
   separatorStyles,
-  mongoIndexingPolicyAADError,
   indexingPolicynUnsavedWarningMessage,
   infoAndToolTipTextStyle
 } from "../../SettingsRenderUtils";
@@ -40,7 +39,6 @@ import {
 } from "../../SettingsUtils";
 import { AddMongoIndexComponent } from "./AddMongoIndexComponent";
 import { CollapsibleSectionComponent } from "../../../CollapsiblePanel/CollapsibleSectionComponent";
-import { AuthType } from "../../../../../AuthType";
 import { IndexingPolicyRefreshComponent } from "../IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
 
 export interface MongoIndexingPolicyComponentProps {
@@ -321,7 +319,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
         </Stack>
       );
     } else {
-      return window.authType !== AuthType.AAD ? mongoIndexingPolicyAADError : <Spinner size={SpinnerSize.large} />;
+      return <Spinner size={SpinnerSize.large} />;
     }
   }
 }

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

@@ -956,7 +956,6 @@ exports[`SettingsComponent renders 1`] = `
                 "isHostedDataExplorerEnabled": [Function],
                 "isLeftPaneExpanded": [Function],
                 "isLinkInjectionEnabled": [Function],
-                "isMongoIndexEditorEnabled": [Function],
                 "isNotebookEnabled": [Function],
                 "isNotebooksEnabledForAccount": [Function],
                 "isNotificationConsoleExpanded": [Function],
@@ -973,7 +972,6 @@ exports[`SettingsComponent renders 1`] = `
                 "isRightPanelV2Enabled": [Function],
                 "isSchemaEnabled": [Function],
                 "isServerlessEnabled": [Function],
-                "isSettingsV2Enabled": [Function],
                 "isSparkEnabled": [Function],
                 "isSparkEnabledForAccount": [Function],
                 "isSynapseLinkUpdating": [Function],
@@ -2237,7 +2235,6 @@ exports[`SettingsComponent renders 1`] = `
               "isHostedDataExplorerEnabled": [Function],
               "isLeftPaneExpanded": [Function],
               "isLinkInjectionEnabled": [Function],
-              "isMongoIndexEditorEnabled": [Function],
               "isNotebookEnabled": [Function],
               "isNotebooksEnabledForAccount": [Function],
               "isNotificationConsoleExpanded": [Function],
@@ -2254,7 +2251,6 @@ exports[`SettingsComponent renders 1`] = `
               "isRightPanelV2Enabled": [Function],
               "isSchemaEnabled": [Function],
               "isServerlessEnabled": [Function],
-              "isSettingsV2Enabled": [Function],
               "isSparkEnabled": [Function],
               "isSparkEnabledForAccount": [Function],
               "isSynapseLinkUpdating": [Function],
@@ -3531,7 +3527,6 @@ exports[`SettingsComponent renders 1`] = `
                 "isHostedDataExplorerEnabled": [Function],
                 "isLeftPaneExpanded": [Function],
                 "isLinkInjectionEnabled": [Function],
-                "isMongoIndexEditorEnabled": [Function],
                 "isNotebookEnabled": [Function],
                 "isNotebooksEnabledForAccount": [Function],
                 "isNotificationConsoleExpanded": [Function],
@@ -3548,7 +3543,6 @@ exports[`SettingsComponent renders 1`] = `
                 "isRightPanelV2Enabled": [Function],
                 "isSchemaEnabled": [Function],
                 "isServerlessEnabled": [Function],
-                "isSettingsV2Enabled": [Function],
                 "isSparkEnabled": [Function],
                 "isSparkEnabledForAccount": [Function],
                 "isSynapseLinkUpdating": [Function],
@@ -4812,7 +4806,6 @@ exports[`SettingsComponent renders 1`] = `
               "isHostedDataExplorerEnabled": [Function],
               "isLeftPaneExpanded": [Function],
               "isLinkInjectionEnabled": [Function],
-              "isMongoIndexEditorEnabled": [Function],
               "isNotebookEnabled": [Function],
               "isNotebooksEnabledForAccount": [Function],
               "isNotificationConsoleExpanded": [Function],
@@ -4829,7 +4822,6 @@ exports[`SettingsComponent renders 1`] = `
               "isRightPanelV2Enabled": [Function],
               "isSchemaEnabled": [Function],
               "isServerlessEnabled": [Function],
-              "isSettingsV2Enabled": [Function],
               "isSparkEnabled": [Function],
               "isSparkEnabledForAccount": [Function],
               "isSynapseLinkUpdating": [Function],

src/Explorer/Explorer.ts

@@ -206,8 +206,6 @@ export default class Explorer {
   public isGalleryPublishEnabled: ko.Computed<boolean>;
   public isCodeOfConductEnabled: ko.Computed<boolean>;
   public isLinkInjectionEnabled: ko.Computed<boolean>;
-  public isSettingsV2Enabled: ko.Observable<boolean>;
-  public isMongoIndexEditorEnabled: ko.Observable<boolean>;
   public isGitHubPaneEnabled: ko.Observable<boolean>;
   public isPublishNotebookPaneEnabled: ko.Observable<boolean>;
   public isCopyNotebookPaneEnabled: ko.Observable<boolean>;
@@ -412,8 +410,6 @@ export default class Explorer {
     this.isLinkInjectionEnabled = ko.computed<boolean>(() =>
       this.isFeatureEnabled(Constants.Features.enableLinkInjection)
     );
-    this.isSettingsV2Enabled = ko.observable(false);
-    this.isMongoIndexEditorEnabled = ko.observable(false);
     this.isGitHubPaneEnabled = ko.observable<boolean>(false);
     this.isPublishNotebookPaneEnabled = ko.observable<boolean>(false);
     this.isCopyNotebookPaneEnabled = ko.observable<boolean>(false);
@@ -1734,6 +1730,7 @@ export default class Explorer {
         case MessageTypes.SendNotification:
         case MessageTypes.ClearNotification:
         case MessageTypes.LoadingStatus:
+        case MessageTypes.InitTestExplorer:
           return true;
       }
     }
@@ -1913,14 +1910,6 @@ export default class Explorer {
     if (!flights) {
       return;
     }
-
-    if (flights.indexOf(Constants.Flights.SettingsV2) !== -1) {
-      this.isSettingsV2Enabled(true);
-    }
-
-    if (flights.indexOf(Constants.Flights.MongoIndexEditor) !== -1) {
-      this.isMongoIndexEditorEnabled(true);
-    }
   }
 
   public findSelectedCollection(): ViewModels.Collection {
@@ -2379,11 +2368,13 @@ export default class Explorer {
       this.tabsManager.activateTab(notebookTab);
     } else {
       const options: NotebookTabOptions = {
+        account: userContext.databaseAccount,
         tabKind: ViewModels.CollectionTabKind.NotebookV2,
         node: null,
         title: notebookContentItem.name,
         tabPath: notebookContentItem.path,
         collection: null,
+        masterKey: userContext.masterKey || "",
         hashLocation: "notebooks",
         isActive: ko.observable(false),
         isTabsContentExpanded: ko.observable(true),

src/Explorer/Notebook/MongoQueryComponent/MongoQueryComponent.less

@@ -1,23 +0,0 @@
-.mongoQueryComponent {
-  margin-left: 10px;
-
-  input {
-    margin-top: 0;
-  }
-  label {
-    padding: 0;
-    margin-bottom: 0;
-  }
-
-  label:before {
-    top: 2px;
-    left: 2px;
-    height: 16px;
-    width: 16px;
-  }
-
-  .queryInput {
-    border: 1px solid black;
-    margin: 5px;
-  }
-}

src/Explorer/Notebook/MongoQueryComponent/MongoQueryComponent.tsx

@@ -1,224 +0,0 @@
-import * as React from "react";
-import { Dispatch } from "redux";
-import MonacoEditor from "@nteract/monaco-editor";
-import { PrimaryButton } from "office-ui-fabric-react";
-import { ChoiceGroup, IChoiceGroupOption } from "office-ui-fabric-react/lib/ChoiceGroup";
-import Outputs from "@nteract/stateful-components/lib/outputs";
-import { KernelOutputError, StreamText } from "@nteract/outputs";
-import TransformMedia from "@nteract/stateful-components/lib/outputs/transform-media";
-import { actions, selectors, AppState, ContentRef, KernelRef } from "@nteract/core";
-import loadTransform from "../NotebookComponent/loadTransform";
-import { connect } from "react-redux";
-import Immutable from "immutable";
-
-import "./MongoQueryComponent.less";
-interface MongoQueryComponentPureProps {
-  contentRef: ContentRef;
-  kernelRef: KernelRef;
-  databaseId: string;
-  collectionId: string;
-}
-
-interface MongoQueryComponentDispatchProps {
-  runCell: (contentRef: ContentRef, cellId: string) => void;
-  addTransform: (transform: React.ComponentType & { MIMETYPE: string }) => void;
-  onChange: (text: string, id: string, contentRef: ContentRef) => void;
-  save: (contentRef: ContentRef) => void;
-}
-
-type OutputType = "rich" | "json";
-
-interface MongoQueryComponentState {
-  outputType: OutputType;
-  selectedId: string;
-}
-
-const options: IChoiceGroupOption[] = [
-  { key: "rich", text: "Rich Output" },
-  { key: "json", text: "Json Output" }
-];
-
-interface MongoKernelJsonOutput {
-  results: any;
-}
-
-interface MongoDocument {
-  id: string;
-}
-
-type MongoQueryComponentProps = MongoQueryComponentPureProps & StateProps & MongoQueryComponentDispatchProps;
-export class MongoQueryComponent extends React.Component<MongoQueryComponentProps, MongoQueryComponentState> {
-  constructor(props: MongoQueryComponentProps) {
-    super(props);
-    this.state = {
-      outputType: "json",
-      selectedId: undefined
-    };
-  }
-
-  componentDidMount(): void {
-    loadTransform(this.props);
-  }
-
-  private onExecute = () => {
-    this.props.runCell(this.props.contentRef, this.props.firstCellId);
-    this.props.save(this.props.contentRef);
-  };
-
-  /**
-   *
-   * @param databaseId
-   * @param collectionId
-   * @param query e.g. { "lastName": { $in: ["Andersen"] } }
-   */
-  private createFilterQuery(databaseId: string, collectionId: string, query: string): string {
-    const newCommand = `{ "command": "filter", "database": "${databaseId}", "collection": "${collectionId}", "filter": ${JSON.stringify(query)}, "outputType": "${this.state.outputType}" }`;
-    return newCommand;
-  }
-
-  private onOutputTypeChange = (e: React.FormEvent<HTMLElement | HTMLInputElement>, option: IChoiceGroupOption): void => {
-    const outputType = option.key as OutputType;
-    this.setState({ outputType }, () => this.onInputChange(this.props.inputValue));
-  };
-
-  private onInputChange = (text: string) => {
-    this.props.onChange(this.createFilterQuery(this.props.databaseId, this.props.collectionId, text),
-      this.props.firstCellId, this.props.contentRef);
-  };
-
-  render(): JSX.Element {
-    const { firstCellId: id, contentRef, outputDocuments } = this.props;
-
-    if (!id) {
-      return <></>;
-    }
-
-    return (
-      <div className="mongoQueryComponent">
-        <div className="queryInput">
-          <MonacoEditor id={this.props.firstCellId} contentRef={this.props.contentRef} theme={""}
-            language="json" onChange={this.onInputChange}
-            value={this.props.inputValue} />
-        </div>
-        <PrimaryButton text="Apply" onClick={this.onExecute} disabled={!this.props.firstCellId} />
-        <ChoiceGroup
-          selectedKey={this.state.outputType}
-          options={options}
-          onChange={this.onOutputTypeChange}
-          label="Output Type"
-          styles={{ input: { marginTop: 0 }, root: { marginTop: 0 } }}
-        />
-        <hr />
-        <div style={ { display: "flex" } }>
-          <ul>
-            {outputDocuments && outputDocuments.map(d => (
-              <li key={d.id}>
-                <a onClick={() => this.setState({ selectedId: id })}>{d.id}</a>
-              </li>
-              ))}
-          </ul>
-          <div style={{ width: "100%" }} >
-          <MonacoEditor id={""} contentRef={""} theme={""} language="json" onChange={() => {}}
-            value={JSON.stringify(outputDocuments.find(doc => doc.id ===this.state.selectedId)) ?? ""} />
-          </div>
-        </div>
-        <hr />
-        <Outputs id={id} contentRef={contentRef}>
-          <TransformMedia output_type={"display_data"} id={id} contentRef={contentRef} />
-          <TransformMedia output_type={"execute_result"} id={id} contentRef={contentRef} />
-          <KernelOutputError />
-          <StreamText />
-        </Outputs>
-      </div>
-    );
-  }
-}
-
-interface StateProps {
-  firstCellId: string;
-  inputValue: string;
-  outputDocuments: MongoDocument[];
-}
-interface InitialProps {
-  contentRef: string;
-}
-
-// Redux
-const makeMapStateToProps = (state: AppState, initialProps: InitialProps) => {
-  const { contentRef } = initialProps;
-  const mapStateToProps = (state: AppState) => {
-    let firstCellId;
-    let inputValue = "";
-    let outputDocuments = [];
-    const content = selectors.content(state, { contentRef });
-    if (content?.type === "notebook") {
-      const cellOrder = selectors.notebook.cellOrder(content.model);
-      if (cellOrder.size > 0) {
-        firstCellId = cellOrder.first() as string;
-        const cell = selectors.notebook.cellById(content.model, { id: firstCellId });
-
-        // Parse to extract filter and output type
-        const cellValue = cell.get("source", "");
-        if (cellValue) {
-          try {
-            const filterValue = JSON.parse(cellValue).filter;
-            if (filterValue) {
-              inputValue = filterValue;
-            }
-          } catch(e) {
-            console.error("Could not parse", e);
-          }
-        }
-        const outputs = cell.get("outputs", Immutable.List());
-        // Extract "application/json" mime-type
-        let jsonOutput: MongoKernelJsonOutput;
-        for (const output of outputs) {
-          if (Object.prototype.hasOwnProperty.call(output.data, "application/json")) {
-            jsonOutput = output.data["application/json"];
-            break;
-          }
-        }
-        outputDocuments = jsonOutput?.results ?? [];
-      }
-    }
-
-    return {
-      firstCellId,
-      inputValue,
-      outputDocuments
-    };
-  };
-  return mapStateToProps;
-};
-
-const makeMapDispatchToProps = (initialDispatch: Dispatch, initialProps: MongoQueryComponentProps) => {
-  const mapDispatchToProps = (dispatch: Dispatch) => {
-    return {
-      addTransform: (transform: React.ComponentType & { MIMETYPE: string }) => {
-        return dispatch(
-          actions.addTransform({
-            mediaType: transform.MIMETYPE,
-            component: transform
-          })
-        );
-      },
-      runCell: (contentRef: ContentRef, cellId: string) => {
-        return dispatch(
-          actions.executeCell({
-            contentRef,
-            id: cellId
-          })
-        );
-      },
-      onChange: (text: string, id: string, contentRef: ContentRef) => {
-        dispatch(actions.updateCellSource({ id, contentRef, value: text }));
-      },
-      save: (contentRef: ContentRef) => {
-        dispatch(actions.save({ contentRef }));
-      }
-    };
-  };
-  return mapDispatchToProps;
-};
-
-export default connect(makeMapStateToProps, makeMapDispatchToProps)(MongoQueryComponent);

src/Explorer/Notebook/MongoQueryComponent/MongoQueryComponentAdapter.tsx

@@ -1,49 +0,0 @@
-import * as React from "react";
-
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-import {
-  NotebookComponentBootstrapper,
-  NotebookComponentBootstrapperOptions
-} from "../NotebookComponent/NotebookComponentBootstrapper";
-import MongoQueryComponent from "../MongoQueryComponent/MongoQueryComponent";
-import { actions, createContentRef, createKernelRef, KernelRef } from "@nteract/core";
-import { Provider } from "react-redux";
-
-export class MongoQueryComponentAdapter extends NotebookComponentBootstrapper implements ReactAdapter {
-  public parameters: unknown;
-  private kernelRef: KernelRef;
-
-  constructor(options: NotebookComponentBootstrapperOptions, private databaseId: string, private collectionId: string) {
-    super(options);
-
-    if (!this.contentRef) {
-      this.contentRef = createContentRef();
-      this.kernelRef = createKernelRef();
-
-      // Request fetching notebook content
-      this.getStore().dispatch(
-        actions.fetchContent({
-          filepath: "mongo.ipynb",
-          params: {},
-          kernelRef: this.kernelRef,
-          contentRef: this.contentRef
-        })
-      );
-    }
-  }
-
-  public renderComponent(): JSX.Element {
-    const props = {
-      contentRef: this.contentRef,
-      kernelRef: this.kernelRef,
-      databaseId: this.databaseId,
-      collectionId: this.collectionId
-    };
-
-    return (
-      <Provider store={this.getStore()}>
-        <MongoQueryComponent {...props} />;
-      </Provider>
-    );
-  }
-}

src/Explorer/Panes/UploadFilePane.html

@@ -50,13 +50,24 @@
               id="fileImportLinkNotebook"
               data-bind="event: { click: onImportLinkClick, keypress: onImportLinkKeyPress }"
             >
-              <img class="fileImportImg" src="/folder_16x16.svg" alt="upload files" title="Upload files" />
+              <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 type="submit" data-bind="attr: { value: submitButtonLabel }" class="btncreatecoll1" />
+            <input
+              id="uploadFileButton"
+              type="submit"
+              data-bind="attr: { value: submitButtonLabel }"
+              class="btncreatecoll1"
+            />
           </div>
         </div>
         <!-- Upload File inputs - End -->

src/Explorer/Tabs/MongoDocumentsTabV2.html

@@ -1 +0,0 @@
-<div data-bind="react:mongoQueryComponentAdapter" style="height: 100%"></div>

src/Explorer/Tabs/MongoDocumentsTabV2.ts

@@ -1,45 +0,0 @@
-import * as Q from "q";
-import NotebookTabBase, { NotebookTabBaseOptions } from "./NotebookTabBase";
-import { MongoQueryComponentAdapter } from "../Notebook/MongoQueryComponent/MongoQueryComponentAdapter";
-
-export default class MongoDocumentsTabV2 extends NotebookTabBase {
-  private mongoQueryComponentAdapter: MongoQueryComponentAdapter;
-
-  constructor(options: NotebookTabBaseOptions) {
-    super(options);
-    this.mongoQueryComponentAdapter = new MongoQueryComponentAdapter({
-      contentRef: undefined,
-      notebookClient: NotebookTabBase.clientManager
-    }, options.collection?.databaseId, options.collection?.id());
-  }
-
-  public onCloseTabButtonClick(): Q.Promise<void> {
-    super.onCloseTabButtonClick();
-
-    // const cleanup = () => {
-    //   this.notebookComponentAdapter.notebookShutdown();
-    //   this.isActive(false);
-    //   super.onCloseTabButtonClick();
-    // };
-
-    // if (this.notebookComponentAdapter.isContentDirty()) {
-    //   this.container.showOkCancelModalDialog(
-    //     "Close without saving?",
-    //     `File has unsaved changes, close without saving?`,
-    //     "Close",
-    //     cleanup,
-    //     "Cancel",
-    //     undefined
-    //   );
-    //   return Q.resolve(null);
-    // } else {
-    //   cleanup();
-    //   return Q.resolve(null);
-    // }
-    return undefined;
-  }
-
-  protected buildCommandBarOptions(): void {
-    this.updateNavbarWithTabsButtons();
-  }
-}

src/Explorer/Tabs/NotebookTabBase.ts

@@ -1,50 +0,0 @@
-import * as ViewModels from "../../Contracts/ViewModels";
-import TabsBase from "./TabsBase";
-
-import { NotebookClientV2 } from "../Notebook/NotebookClientV2";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import Explorer from "../Explorer";
-import { ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import { Areas } from "../../Common/Constants";
-
-export interface NotebookTabBaseOptions extends ViewModels.TabOptions {
-  container: Explorer;
-}
-
-/**
- * Every notebook-based tab inherits from this class. It holds the static reference to a notebook client (singleton)
- */
-export default class NotebookTabBase extends TabsBase {
-  protected static clientManager: NotebookClientV2;
-  protected container: Explorer;
-
-  constructor(options: NotebookTabBaseOptions) {
-    super(options);
-
-    this.container = options.container;
-
-    if (!NotebookTabBase.clientManager) {
-      NotebookTabBase.clientManager = new NotebookClientV2({
-        connectionInfo: this.container.notebookServerInfo(),
-        databaseAccountName: this.container.databaseAccount().name,
-        defaultExperience: this.container.defaultExperience(),
-        contentProvider: this.container.notebookManager?.notebookContentProvider
-      });
-    }
-  }
-
-  /**
-   * Override base behavior
-   */
-  protected getContainer(): Explorer {
-    return this.container;
-  }
-
-  protected traceTelemetry(actionType: number): void {
-    TelemetryProcessor.trace(actionType, ActionModifiers.Mark, {
-      databaseAccountName: this.container.databaseAccount() && this.container.databaseAccount().name,
-      defaultExperience: this.container.defaultExperience && this.container.defaultExperience(),
-      dataExplorerArea: Areas.Notebook
-    });
-  }
-}

src/Explorer/Tabs/NotebookV2Tab.ts

@@ -2,7 +2,9 @@ import * as _ from "underscore";
 import * as Q from "q";
 import * as ko from "knockout";
 
+import * as ViewModels from "../../Contracts/ViewModels";
 import * as DataModels from "../../Contracts/DataModels";
+import TabsBase from "./TabsBase";
 
 import NewCellIcon from "../../../images/notebook/Notebook-insert-cell.svg";
 import CutIcon from "../../../images/notebook/Notebook-cut.svg";
@@ -15,25 +17,31 @@ import SaveIcon from "../../../images/save-cosmos.svg";
 import ClearAllOutputsIcon from "../../../images/notebook/Notebook-clear-all-outputs.svg";
 import InterruptKernelIcon from "../../../images/notebook/Notebook-stop.svg";
 import KillKernelIcon from "../../../images/notebook/Notebook-stop.svg";
-import { Action } from "../../Shared/Telemetry/TelemetryConstants";
-import { ArmApiVersions } from "../../Common/Constants";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
+import { Areas, ArmApiVersions } from "../../Common/Constants";
 import { CommandBarComponentButtonFactory } from "../Menus/CommandBar/CommandBarComponentButtonFactory";
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
 import { NotebookComponentAdapter } from "../Notebook/NotebookComponent/NotebookComponentAdapter";
 import { NotebookConfigurationUtils } from "../../Utils/NotebookConfigurationUtils";
-import { KernelSpecsDisplay } from "../Notebook/NotebookClientV2";
+import { KernelSpecsDisplay, NotebookClientV2 } from "../Notebook/NotebookClientV2";
 import { configContext } from "../../ConfigContext";
+import Explorer from "../Explorer";
 import { NotebookContentItem } from "../Notebook/NotebookContentItem";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
 import { toJS, stringifyNotebook } from "@nteract/commutable";
-import NotebookTabBase, { NotebookTabBaseOptions } from "./NotebookTabBase";
 
-export interface NotebookTabOptions extends NotebookTabBaseOptions {
+export interface NotebookTabOptions extends ViewModels.TabOptions {
+  account: DataModels.DatabaseAccount;
+  masterKey: string;
+  container: Explorer;
   notebookContentItem: NotebookContentItem;
 }
 
-export default class NotebookTabV2 extends NotebookTabBase {
+export default class NotebookTabV2 extends TabsBase {
+  private static clientManager: NotebookClientV2;
+  private container: Explorer;
   public notebookPath: ko.Observable<string>;
   private selectedSparkPool: ko.Observable<string>;
   private notebookComponentAdapter: NotebookComponentAdapter;
@@ -42,6 +50,16 @@ export default class NotebookTabV2 extends NotebookTabBase {
     super(options);
 
     this.container = options.container;
+
+    if (!NotebookTabV2.clientManager) {
+      NotebookTabV2.clientManager = new NotebookClientV2({
+        connectionInfo: this.container.notebookServerInfo(),
+        databaseAccountName: this.container.databaseAccount().name,
+        defaultExperience: this.container.defaultExperience(),
+        contentProvider: this.container.notebookManager?.notebookContentProvider
+      });
+    }
+
     this.notebookPath = ko.observable(options.notebookContentItem.path);
 
     this.container.notebookServerInfo.subscribe((newValue: DataModels.NotebookWorkspaceConnectionInfo) => {
@@ -51,7 +69,7 @@ export default class NotebookTabV2 extends NotebookTabBase {
     this.notebookComponentAdapter = new NotebookComponentAdapter({
       contentItem: options.notebookContentItem,
       notebooksBasePath: this.container.getNotebookBasePath(),
-      notebookClient: NotebookTabBase.clientManager,
+      notebookClient: NotebookTabV2.clientManager,
       onUpdateKernelInfo: this.onKernelUpdate
     });
 
@@ -97,6 +115,10 @@ export default class NotebookTabV2 extends NotebookTabBase {
     return await this.configureServiceEndpoints(this.notebookComponentAdapter.getCurrentKernelName());
   }
 
+  protected getContainer(): Explorer {
+    return this.container;
+  }
+
   protected getTabsButtons(): CommandButtonComponentProps[] {
     const availableKernels = NotebookTabV2.clientManager.getAvailableKernelSpecs();
 
@@ -471,4 +493,12 @@ export default class NotebookTabV2 extends NotebookTabBase {
 
     this.container.copyNotebook(notebookContent.name, content);
   };
+
+  private traceTelemetry(actionType: number) {
+    TelemetryProcessor.trace(actionType, ActionModifiers.Mark, {
+      databaseAccountName: this.container.databaseAccount() && this.container.databaseAccount().name,
+      defaultExperience: this.container.defaultExperience && this.container.defaultExperience(),
+      dataExplorerArea: Areas.Notebook
+    });
+  }
 }

src/Explorer/Tabs/SettingsTab.html

@@ -1,723 +0,0 @@
-<div
-  class="tab-pane flexContainer"
-  data-bind="
-    attr:{
-        id: tabId
-    },
-    visible: isActive"
-  role="tabpanel"
->
-  <div class="warningErrorContainer scaleWarningContainer" data-bind="visible: shouldShowStatusBar">
-    <div>
-      <div class="warningErrorContent" data-bind="visible: shouldShowNotificationStatusPrompt">
-        <span><img src="/info_color.svg" alt="Info"/></span>
-        <span class="warningErrorDetailsLinkContainer" data-bind="html: notificationStatusInfo"></span>
-      </div>
-      <div class="warningErrorContent" data-bind="visible: !shouldShowNotificationStatusPrompt()">
-        <span><img src="/warning.svg" alt="Warning"/></span>
-        <span class="warningErrorDetailsLinkContainer" data-bind="html: warningMessage"></span>
-      </div>
-    </div>
-  </div>
-  <div class="tabForm scaleSettingScrollable">
-    <!-- ko if: shouldShowKeyspaceSharedThroughputMessage -->
-    <div>This table shared throughput is configured at the keyspace</div>
-    <!-- /ko -->
-
-    <!-- ko ifnot: hasDatabaseSharedThroughput -->
-    <div>
-      <div
-        class="scaleDivison"
-        data-bind="click:toggleScale, event: { keypress: onScaleKeyPress }, attr:{ 'aria-expanded': scaleExpanded() ? 'true' : 'false' }"
-        role="button"
-        tabindex="0"
-        aria-label="Scale"
-        aria-controls="scaleRegion"
-      >
-        <span class="themed-images" type="text/html" id="ExpandChevronRightScale" data-bind="visible: !scaleExpanded()">
-          <img
-            class="imgiconwidth ssExpandCollapseIcon ssCollapseIcon "
-            src="/Triangle-right.svg"
-            alt="Show scale properties"
-          />
-        </span>
-
-        <span class="themed-images" type="text/html" id="ExpandChevronDownScale" data-bind="visible: scaleExpanded">
-          <img class="imgiconwidth ssExpandCollapseIcon " src="/Triangle-down.svg" alt="Hide scale properties" />
-        </span>
-
-        <span class="scaleSettingTitle">Scale</span>
-      </div>
-
-      <div class="ssTextAllignment" data-bind="visible: scaleExpanded" id="scaleRegion">
-        <!-- ko ifnot: isAutoScaleEnabled -->
-        <throughput-input-autopilot-v3
-          params="{
-                        testId: testId,
-                        class: 'scaleForm dirty',
-                        value: throughput,
-                        minimum: minRUs,
-                        maximum: maxRUThroughputInputLimit,
-                        isEnabled: !hasDatabaseSharedThroughput(),
-                        canExceedMaximumValue: canThroughputExceedMaximumValue,
-                        label: throughputTitle,
-                        ariaLabel: throughputAriaLabel,
-                        costsVisible: costsVisible,
-                        requestUnitsUsageCost: requestUnitsUsageCost,
-                        throughputAutoPilotRadioId: throughputAutoPilotRadioId,
-                        throughputProvisionedRadioId: throughputProvisionedRadioId,
-                        throughputModeRadioName: throughputModeRadioName,
-                        showAutoPilot: userCanChangeProvisioningTypes,
-                        isAutoPilotSelected: isAutoPilotSelected,
-                        maxAutoPilotThroughputSet: autoPilotThroughput,
-                        autoPilotUsageCost: autoPilotUsageCost,
-                        overrideWithAutoPilotSettings: overrideWithAutoPilotSettings,
-                        overrideWithProvisionedThroughputSettings: overrideWithProvisionedThroughputSettings
-                    }"
-        >
-        </throughput-input-autopilot-v3>
-
-        <div class="storageCapacityTitle throughputStorageValue" data-bind="html: storageCapacityTitle"></div>
-        <!-- /ko -->
-
-        <div data-bind="visible: rupmVisible">
-          <div class="formTitle">RU/m</div>
-          <div class="tabs" aria-label="RU/m">
-            <div class="tab">
-              <label
-                data-bind="
-                                attr:{
-                                    for: rupmOnId
-                                },
-                                css: {
-                                    dirty: rupm.editableIsDirty,
-                                    selectedRadio: rupm() === 'on',
-                                    unselectedRadio: rupm() !== 'on'
-                                }"
-                >On</label
-              >
-              <input
-                type="radio"
-                name="rupm"
-                value="on"
-                class="radio"
-                data-bind="
-                                attr:{
-                                    id: rupmOnId
-                                },
-                                checked: rupm"
-              />
-            </div>
-            <div class="tab">
-              <label
-                data-bind="
-                                attr:{
-                                    for: rupmOffId
-                                },
-                                css:  {
-                                    dirty: rupm.editableIsDirty,
-                                    selectedRadio: rupm() === 'off',
-                                    unselectedRadio: rupm() !== 'off'
-                                }"
-                >Off</label
-              >
-              <input
-                type="radio"
-                name="rupm"
-                value="off"
-                class="radio"
-                data-bind="
-                                    attr:{
-                                        id: rupmOffId
-                                    },
-                                    checked: rupm"
-              />
-            </div>
-          </div>
-        </div>
-
-        <!-- TODO: Replace link with call to the Azure Support blade -->
-        <div data-bind="visible: isAutoScaleEnabled">
-          <div class="autoScaleThroughputTitle">Throughput (RU/s)</div>
-          <input
-            class="formReadOnly collid-white"
-            readonly
-            aria-label="Throughput input"
-            data-bind="textInput: throughput"
-          />
-          <div class="autoScaleDescription">
-            Your account has custom settings that prevents setting throughput at the container level. Please work with
-            your Cosmos DB engineering team point of contact to make changes.
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- /ko -->
-
-    <div data-bind="visible: hasConflictResolution">
-      <div
-        class="formTitle"
-        data-bind="click:toggleConflictResolution, event: { keypress: onConflictResolutionKeyPress }, attr:{ 'aria-expanded': conflictResolutionExpanded() ? 'true' : 'false' }"
-        role="button"
-        tabindex="0"
-        aria-label="Conflict Resolution"
-        aria-controls="conflictResolutionRegion"
-      >
-        <span
-          class="themed-images"
-          type="text/html"
-          id="ExpandChevronRightConflictResolution"
-          data-bind="visible: !conflictResolutionExpanded()"
-        >
-          <img
-            class="imgiconwidth ssExpandCollapseIcon ssCollapseIcon"
-            src="/Triangle-right.svg"
-            alt="Show conflict resolution"
-          />
-        </span>
-
-        <span
-          class="themed-images"
-          type="text/html"
-          id="ExpandChevronDownConflictResolution"
-          data-bind="visible: conflictResolutionExpanded"
-        >
-          <img class="imgiconwidth ssExpandCollapseIcon" src="/Triangle-down.svg" alt="Show conflict resolution" />
-        </span>
-        <span class="scaleSettingTitle">Conflict resolution</span>
-      </div>
-      <div id="conflictResolutionRegion" class="ssTextAllignment" data-bind="visible: conflictResolutionExpanded">
-        <div class="formTitle">Mode</div>
-        <div class="tabs" aria-label="Mode" role="radiogroup">
-          <div class="tab">
-            <label
-              tabindex="0"
-              role="radio"
-              data-bind="
-                            attr:{
-                                for: conflictResolutionPolicyModeLWW,
-                                'aria-checked': conflictResolutionPolicyMode() !== 'Custom' ? 'true' : 'false'
-                            },
-                            css:  {
-                                dirty: conflictResolutionPolicyMode.editableIsDirty,
-                                selectedRadio: conflictResolutionPolicyMode() === 'LastWriterWins',
-                                unselectedRadio: conflictResolutionPolicyMode() !== 'LastWriterWins'
-                            },
-                            event: {
-                                keypress: onConflictResolutionLWWKeyPress
-                            }"
-              >Last Write Wins (default)</label
-            >
-            <input
-              type="radio"
-              name="conflictresolution"
-              value="LastWriterWins"
-              class="radio"
-              data-bind="
-                            attr:{
-                                id: conflictResolutionPolicyModeLWW
-                            },
-                            checked: conflictResolutionPolicyMode"
-            />
-          </div>
-
-          <div class="tab">
-            <label
-              tabindex="0"
-              role="radio"
-              data-bind="
-                            attr:{
-                                for: conflictResolutionPolicyModeCustom,
-                                'aria-checked': conflictResolutionPolicyMode() === 'Custom' ? 'true' : 'false'
-                            },
-                            css: {
-                                dirty: conflictResolutionPolicyMode.editableIsDirty,
-                                selectedRadio: conflictResolutionPolicyMode() === 'Custom',
-                                unselectedRadio: conflictResolutionPolicyMode() !== 'Custom'
-                            },
-                            event: {
-                                keypress: onConflictResolutionCustomKeyPress
-                            }"
-              >Merge Procedure (custom)</label
-            >
-            <input
-              type="radio"
-              name="conflictresolution"
-              value="Custom"
-              class="radio"
-              data-bind="
-                            attr:{
-                                id: conflictResolutionPolicyModeCustom
-                            },
-                            checked: conflictResolutionPolicyMode"
-            />
-          </div>
-        </div>
-        <div data-bind="visible: conflictResolutionPolicyMode() === 'LastWriterWins'">
-          <p class="formTitle">
-            Conflict Resolver Property
-            <span class="infoTooltip" role="tooltip" tabindex="0">
-              <img class="infoImg" src="/info-bubble.svg" alt="More information" />
-              <span class="tooltiptext infoTooltipWidth"
-                >Gets or sets the name of a integer property in your documents which is used for the Last Write Wins
-                (LWW) based conflict resolution scheme. By default, the system uses the system defined timestamp
-                property, _ts to decide the winner for the conflicting versions of the document. Specify your own
-                integer property if you want to override the default timestamp based conflict resolution.</span
-              >
-            </span>
-          </p>
-          <p>
-            <input
-              type="text"
-              aria-label="Document path for conflict resolution"
-              data-bind="
-                            css: {
-                                dirty: conflictResolutionPolicyPath.editableIsDirty
-                            },
-                            textInput: conflictResolutionPolicyPath,
-                            enable: conflictResolutionPolicyMode() === 'LastWriterWins'"
-            />
-          </p>
-        </div>
-        <div data-bind="visible: conflictResolutionPolicyMode() === 'Custom'">
-          <p class="formTitle">
-            Stored procedure
-            <span class="infoTooltip" role="tooltip" tabindex="0">
-              <img class="infoImg" src="/info-bubble.svg" alt="More information" />
-              <span class="tooltiptext infoTooltipWidth"
-                >Gets or sets the name of a stored procedure (aka merge procedure) for resolving the conflicts. You can
-                write application defined logic to determine the winner of the conflicting versions of a document. The
-                stored procedure will get executed transactionally, exactly once, on the server side. If you do not
-                provide a stored procedure, the conflicts will be populated in the
-                <a class="linkDarkBackground" href="https://aka.ms/dataexplorerconflics" target="_blank"
-                  >conflicts feed</a
-                >. You can update/re-register the stored procedure at any time.</span
-              >
-            </span>
-          </p>
-          <p>
-            <input
-              type="text"
-              aria-label="Stored procedure name for conflict resolution"
-              data-bind="
-                            css: {
-                                dirty: conflictResolutionPolicyProcedure.editableIsDirty
-                            },
-                            textInput: conflictResolutionPolicyProcedure,
-                            enable: conflictResolutionPolicyMode() === 'Custom'"
-            />
-          </p>
-        </div>
-      </div>
-    </div>
-    <div
-      class="formTitle"
-      data-bind="click:toggleSettings, event: { keypress: onSettingsKeyPress }, attr:{ 'aria-expanded': settingsExpanded() ? 'true' : 'false' }, visible: shouldShowIndexingPolicyEditor() || ttlVisible()"
-      role="button"
-      tabindex="0"
-      aria-label="Settings"
-      aria-controls="settingsRegion"
-    >
-      <span
-        class="themed-images"
-        type="text/html"
-        id="ExpandChevronRightSettings"
-        data-bind="visible: !settingsExpanded() && !hasDatabaseSharedThroughput()"
-      >
-        <img class="imgiconwidth ssExpandCollapseIcon ssCollapseIcon" src="/Triangle-right.svg" alt="Show settings" />
-      </span>
-
-      <span
-        class="themed-images"
-        type="text/html"
-        id="ExpandChevronDownSettings"
-        data-bind="visible: settingsExpanded()  && !hasDatabaseSharedThroughput()"
-      >
-        <img class="imgiconwidth ssExpandCollapseIcon" src="/Triangle-down.svg" alt="Show settings" />
-      </span>
-      <span class="scaleSettingTitle">Settings</span>
-    </div>
-    <div class="ssTextAllignment" data-bind="visible: settingsExpanded" id="settingsRegion">
-      <div data-bind="visible: ttlVisible">
-        <div class="formTitle">Time to Live</div>
-        <div class="tabs disableFocusDefaults" aria-label="Time to Live" role="radiogroup">
-          <div class="tab">
-            <label
-              class="ttlIndexingPolicyFocusElement"
-              tabindex="0"
-              role="radio"
-              data-bind="
-                            attr:{
-                                for: ttlOffId,
-                                'aria-checked': timeToLive() === 'off' ? 'true' : 'false'
-                            },
-                            css: {
-                                dirty: timeToLive.editableIsDirty,
-                                selectedRadio: timeToLive() === 'off',
-                                unselectedRadio: timeToLive() !== 'off'
-                            },
-                            event: {
-                                keypress: onTtlOffKeyPress
-                            },
-                            hasFocus: ttlOffFocused"
-              >Off</label
-            >
-            <input
-              type="radio"
-              name="ttl"
-              value="off"
-              class="radio"
-              data-bind="
-                            attr:{
-                                id: ttlOffId
-                            },
-                            checked: timeToLive"
-            />
-          </div>
-
-          <div class="tab">
-            <label
-              class="ttlIndexingPolicyFocusElement"
-              tabindex="0"
-              role="radio"
-              data-bind="
-                            attr:{
-                                for: ttlOnNoDefaultId,
-                                'aria-checked': timeToLive() === 'on-nodefault' ? 'true' : 'false'
-                            },
-                            css:  {
-                                dirty: timeToLive.editableIsDirty,
-                                selectedRadio: timeToLive() === 'on-nodefault',
-                                unselectedRadio: timeToLive() !== 'on-nodefault'
-                            },
-                            event: {
-                                keypress: onTtlOnNoDefaultKeyPress
-                            },
-                            hasFocus: ttlOnDefaultFocused"
-              >On (no default)</label
-            >
-            <input
-              type="radio"
-              name="ttl"
-              value="on-nodefault"
-              class="radio"
-              data-bind="
-                            attr:{
-                                id: ttlOnNoDefaultId
-                            },
-                            checked: timeToLive"
-            />
-          </div>
-
-          <div class="tab">
-            <label
-              class="ttlIndexingPolicyFocusElement"
-              tabindex="0"
-              role="radio"
-              for="ttl3"
-              data-bind="
-                            attr:{
-                                for: ttlOnId,
-                                'aria-checked': timeToLive() === 'on' ? 'true' : 'false'
-                            },
-                            css:  {
-                                dirty: timeToLive.editableIsDirty,
-                                selectedRadio: timeToLive() === 'on',
-                                unselectedRadio: timeToLive() !== 'on'
-                            },
-                            event: {
-                                keypress: onTtlOnKeyPress
-                            },
-                            hasFocus: ttlOnFocused"
-              >On</label
-            >
-            <input
-              type="radio"
-              name="ttl"
-              value="on"
-              class="radio"
-              data-bind="
-                                attr:{
-                                    id: ttlOnId
-                                },
-                                checked: timeToLive"
-            />
-          </div>
-        </div>
-        <div data-bind="visible: timeToLive() === 'on'">
-          <input
-            class="dirtyTextbox"
-            type="number"
-            required
-            min="1"
-            max="2147483647"
-            aria-label="Time to live in seconds"
-            data-bind="
-                            css: {
-                                dirty: timeToLive.editableIsDirty
-                            },
-                            textInput: timeToLiveSeconds,
-                            enable: timeToLive() === 'on'"
-          />
-          second(s)
-        </div>
-      </div>
-
-      <!--  Geospatial - start -->
-      <div data-bind="visible: geospatialVisible">
-        <div class="formTitle">Geospatial Configuration</div>
-
-        <div class="tabs disableFocusDefaults" aria-label="Geospatial Configuration" role="radiogroup">
-          <div class="tab">
-            <label
-              for="geography"
-              tabindex="0"
-              role="radio"
-              data-bind="
-                attr:{
-                  'aria-checked': geospatialConfigType().toLowerCase() !== GEOMETRY.toLowerCase() ? 'true' : 'false'
-                },
-                css: {
-                  dirty: geospatialConfigType.editableIsDirty,
-                  selectedRadio: geospatialConfigType().toLowerCase() !== GEOMETRY.toLowerCase(),
-                  unselectedRadio: geospatialConfigType().toLowerCase() === GEOMETRY.toLowerCase()
-                },
-                event: {
-                  keypress: onGeographyKeyPress
-                }"
-              >Geography</label
-            >
-            <input
-              type="radio"
-              name="geospatial"
-              id="geography"
-              class="radio"
-              data-bind="
-                attr: {
-                  value: GEOGRAPHY
-                },
-                checked: geospatialConfigType"
-            />
-          </div>
-
-          <div class="tab">
-            <label
-              for="geometry"
-              tabindex="0"
-              role="radio"
-              data-bind="
-                attr:{
-                  'aria-checked': geospatialConfigType().toLowerCase() === GEOMETRY.toLowerCase() ? 'true' : 'false'
-                },
-                css: {
-                  dirty: geospatialConfigType.editableIsDirty,
-                  selectedRadio: geospatialConfigType().toLowerCase() === GEOMETRY.toLowerCase(),
-                  unselectedRadio: geospatialConfigType().toLowerCase() !== GEOMETRY.toLowerCase()
-                },
-                event: {
-                  keypress: onGeometryKeyPress
-                }"
-              >Geometry</label
-            >
-            <input
-              type="radio"
-              name="geospatial"
-              id="geometry"
-              class="radio"
-              data-bind="
-              attr: {
-                value: GEOMETRY
-              },
-              checked: geospatialConfigType"
-            />
-          </div>
-        </div>
-      </div>
-      <!-- Geospatial - end -->
-
-      <div data-bind="visible: isAnalyticalStorageEnabled">
-        <div class="formTitle">Analytical Storage Time to Live</div>
-        <div class="tabs disableFocusDefaults" aria-label="Analytical Storage Time to Live" role="radiogroup">
-          <div class="tab">
-            <label tabindex="0" role="radio" class="disabledRadio">Off </label>
-          </div>
-          <div class="tab">
-            <label
-              tabindex="0"
-              role="radio"
-              data-bind="
-                    attr:{
-                        for: 'analyticalStorageTtlOnNoDefaultId',
-                        'aria-checked': analyticalStorageTtlSelection() === 'on-nodefault' ? 'true' : 'false'
-                    },
-                    css:  {
-                        dirty: analyticalStorageTtlSelection.editableIsDirty,
-                        selectedRadio: analyticalStorageTtlSelection() === 'on-nodefault',
-                        unselectedRadio: analyticalStorageTtlSelection() !== 'on-nodefault'
-                    },
-                    event: {
-                        keypress: onAnalyticalStorageTtlOnNoDefaultKeyPress
-                    }"
-              >On (no default)
-            </label>
-            <input
-              type="radio"
-              name="analyticalStorageTtl"
-              value="on-nodefault"
-              class="radio"
-              data-bind="
-                    attr:{
-                        id: 'analyticalStorageTtlOnNoDefaultId'
-                    },
-                    checked: analyticalStorageTtlSelection"
-            />
-          </div>
-
-          <div class="tab">
-            <label
-              tabindex="0"
-              role="radio"
-              for="ttl3"
-              data-bind="
-                    attr:{
-                        for: 'analyticalStorageTtlOnId',
-                        'aria-checked': analyticalStorageTtlSelection() === 'on' ? 'true' : 'false'
-                    },
-                    css:  {
-                        dirty: analyticalStorageTtlSelection.editableIsDirty,
-                        selectedRadio: analyticalStorageTtlSelection() === 'on',
-                        unselectedRadio: analyticalStorageTtlSelection() !== 'on'
-                    },
-                    event: {
-                        keypress: onAnalyticalStorageTtlOnKeyPress
-                    }"
-              >On</label
-            >
-            <input
-              type="radio"
-              name="analyticalStorageTtl"
-              value="on"
-              class="radio"
-              data-bind="
-                        attr:{
-                            id: 'analyticalStorageTtlOnId'
-                        },
-                        checked: analyticalStorageTtlSelection"
-            />
-          </div>
-        </div>
-        <div data-bind="visible: analyticalStorageTtlSelection() === 'on'">
-          <input
-            class="dirtyTextbox"
-            type="number"
-            required
-            min="1"
-            max="2147483647"
-            aria-label="Time to live in seconds"
-            data-bind="
-                    css: {
-                        dirty: analyticalStorageTtlSelection.editableIsDirty
-                    },
-                    textInput: analyticalStorageTtlSeconds,
-                    enable: analyticalStorageTtlSelection() === 'on'"
-          />
-          second(s)
-        </div>
-      </div>
-      <div data-bind="visible: changeFeedPolicyVisible">
-        <div class="formTitle">
-          <span>Change feed log retention policy</span>
-          <span class="infoTooltip" role="tooltip" tabindex="0">
-            <img class="infoImg" src="/info-bubble.svg" alt="More information" />
-            <span class="tooltiptext infoTooltipWidth"
-              >Enable change feed log retention policy to retain last 10 minutes of history for items in the container
-              by default. To support this, the request unit (RU) charge for this container will be multiplied by a
-              factor of two for writes. Reads are unaffected.</span
-            >
-          </span>
-        </div>
-        <div class="tabs disableFocusDefaults" aria-label="Change feed selection tabs">
-          <div class="tab">
-            <label
-              tabindex="0"
-              data-bind="
-                            attr:{
-                                for: changeFeedPolicyOffId
-                            },
-                            css: {
-                                dirty: changeFeedPolicyToggled.editableIsDirty,
-                                selectedRadio: changeFeedPolicyToggled() === 'Off',
-                                unselectedRadio: changeFeedPolicyToggled() === 'On'
-                            },
-                            event: {
-                                keypress: onChangeFeedPolicyOffKeyPress
-                            }"
-              >Off</label
-            >
-            <input
-              type="radio"
-              name="changeFeedPolicy"
-              value="Off"
-              class="radio"
-              data-bind="
-                            attr:{
-                                id: changeFeedPolicyOffId
-                            },
-                            checked: changeFeedPolicyToggled"
-            />
-          </div>
-          <div class="tab">
-            <label
-              tabindex="0"
-              data-bind="
-                            attr:{
-                                for: changeFeedPolicyOnId
-                            },
-                            css:  {
-                                dirty: changeFeedPolicyToggled.editableIsDirty,
-                                selectedRadio: changeFeedPolicyToggled() === 'On',
-                                unselectedRadio: changeFeedPolicyToggled() === 'Off'
-                            },
-                            event: {
-                                keypress: onChangeFeedPolicyOnKeyPress
-                            }"
-              >On</label
-            >
-            <input
-              type="radio"
-              name="changeFeedPolicy"
-              value="On"
-              class="radio"
-              data-bind="
-                            attr:{
-                                id: changeFeedPolicyOnId
-                            },
-                            checked: changeFeedPolicyToggled"
-            />
-          </div>
-        </div>
-      </div>
-      <div data-bind="visible: partitionKeyVisible">
-        <div class="formTitle" data-bind="text: partitionKeyName">Partition Key</div>
-        <input
-          class="formReadOnly collid-white"
-          data-bind="textInput: partitionKeyValue, attr: { 'aria-label':partitionKeyName }"
-          readonly
-        />
-      </div>
-      <div class="largePartitionKeyEnabled" data-bind="visible: isLargePartitionKeyEnabled">
-        <p data-bind="visible: isLargePartitionKeyEnabled">
-          Large <span data-bind="text:lowerCasePartitionKeyName"></span> has been enabled
-        </p>
-      </div>
-      <div data-bind="visible: shouldShowIndexingPolicyEditor">
-        <div class="formTitle">Indexing Policy</div>
-        <div
-          class="indexingPolicyEditor ttlIndexingPolicyFocusElement"
-          tabindex="0"
-          data-bind="setTemplateReady: true, attr:{ id: indexingPolicyEditorId }"
-        ></div>
-      </div>
-    </div>
-  </div>
-</div>

src/Explorer/Tabs/SettingsTab.test.ts

@@ -1,449 +0,0 @@
-import * as Constants from "../../Common/Constants";
-import * as DataModels from "../../Contracts/DataModels";
-import * as ko from "knockout";
-import * as ViewModels from "../../Contracts/ViewModels";
-import Collection from "../Tree/Collection";
-import Database from "../Tree/Database";
-import Explorer from "../Explorer";
-import SettingsTab from "./SettingsTab";
-import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
-import { IndexingPolicies } from "../../Shared/Constants";
-
-describe("Settings tab", () => {
-  const baseCollection: DataModels.Collection = {
-    defaultTtl: 200,
-    partitionKey: null,
-    conflictResolutionPolicy: {
-      mode: DataModels.ConflictResolutionMode.LastWriterWins,
-      conflictResolutionPath: "/_ts"
-    },
-    indexingPolicy: IndexingPolicies.SharedDatabaseDefault,
-    _rid: "",
-    _self: "",
-    _etag: "",
-    _ts: 0,
-    id: "mycoll"
-  };
-
-  const baseDatabase: DataModels.Database = {
-    _rid: "",
-    _self: "",
-    _etag: "",
-    _ts: 0,
-    id: "mydb",
-    collections: [baseCollection]
-  };
-
-  const quotaInfo: DataModels.CollectionQuotaInfo = {
-    storedProcedures: 0,
-    triggers: 0,
-    functions: 0,
-    documentsSize: 0,
-    documentsCount: 0,
-    collectionSize: 0,
-    usageSizeInKB: 0,
-    numPartitions: 0
-  };
-
-  describe("Conflict Resolution", () => {
-    describe("should show conflict resolution", () => {
-      let explorer: Explorer;
-      const baseCollectionWithoutConflict: DataModels.Collection = {
-        defaultTtl: 200,
-        partitionKey: null,
-        conflictResolutionPolicy: null,
-        indexingPolicy: IndexingPolicies.SharedDatabaseDefault,
-        _rid: "",
-        _self: "",
-        _etag: "",
-        _ts: 0,
-        id: "mycoll"
-      };
-      const getSettingsTab = (conflictResolution: boolean = true) => {
-        return new SettingsTab({
-          tabKind: ViewModels.CollectionTabKind.Settings,
-          title: "Scale & Settings",
-          tabPath: "",
-          hashLocation: "",
-          isActive: ko.observable(false),
-          collection: new Collection(
-            explorer,
-            "mydb",
-            conflictResolution ? baseCollection : baseCollectionWithoutConflict,
-            quotaInfo,
-            null
-          ),
-          onUpdateTabsButtons: undefined
-        });
-      };
-
-      beforeEach(() => {
-        explorer = new Explorer();
-      });
-
-      it("single master, should not show conflict resolution", () => {
-        const settingsTab = getSettingsTab();
-        expect(settingsTab.hasConflictResolution()).toBe(false);
-      });
-
-      it("multi master with resolution conflict, show conflict resolution", () => {
-        explorer.databaseAccount({
-          id: "test",
-          kind: "",
-          location: "",
-          name: "",
-          tags: "",
-          type: "",
-          properties: {
-            enableMultipleWriteLocations: true,
-            documentEndpoint: "",
-            cassandraEndpoint: "",
-            gremlinEndpoint: "",
-            tableEndpoint: ""
-          }
-        });
-
-        const settingsTab = getSettingsTab();
-        expect(settingsTab.hasConflictResolution()).toBe(true);
-      });
-
-      it("multi master without resolution conflict, show conflict resolution", () => {
-        explorer.databaseAccount({
-          id: "test",
-          kind: "",
-          location: "",
-          name: "",
-          tags: "",
-          type: "",
-          properties: {
-            enableMultipleWriteLocations: true,
-            documentEndpoint: "",
-            cassandraEndpoint: "",
-            gremlinEndpoint: "",
-            tableEndpoint: ""
-          }
-        });
-
-        const settingsTab = getSettingsTab(false /* no resolution conflict*/);
-        expect(settingsTab.hasConflictResolution()).toBe(false);
-      });
-    });
-
-    describe("Parse Conflict Resolution Mode from backend", () => {
-      it("should parse any casing", () => {
-        expect(SettingsTab.parseConflictResolutionMode("custom")).toBe(DataModels.ConflictResolutionMode.Custom);
-        expect(SettingsTab.parseConflictResolutionMode("Custom")).toBe(DataModels.ConflictResolutionMode.Custom);
-        expect(SettingsTab.parseConflictResolutionMode("lastWriterWins")).toBe(
-          DataModels.ConflictResolutionMode.LastWriterWins
-        );
-        expect(SettingsTab.parseConflictResolutionMode("LastWriterWins")).toBe(
-          DataModels.ConflictResolutionMode.LastWriterWins
-        );
-      });
-
-      it("should parse empty as null", () => {
-        expect(SettingsTab.parseConflictResolutionMode("")).toBe(null);
-      });
-
-      it("should parse null as null", () => {
-        expect(SettingsTab.parseConflictResolutionMode(null)).toBe(null);
-      });
-    });
-
-    describe("Parse Conflict Resolution procedure from backend", () => {
-      it("should parse path as name", () => {
-        expect(SettingsTab.parseConflictResolutionProcedure("/dbs/xxxx/colls/xxxx/sprocs/validsproc")).toBe(
-          "validsproc"
-        );
-      });
-
-      it("should parse name as name", () => {
-        expect(SettingsTab.parseConflictResolutionProcedure("validsproc")).toBe("validsproc");
-      });
-
-      it("should parse invalid path as null", () => {
-        expect(SettingsTab.parseConflictResolutionProcedure("/not/a/valid/path")).toBe(null);
-      });
-
-      it("should parse empty or null as null", () => {
-        expect(SettingsTab.parseConflictResolutionProcedure("")).toBe(null);
-        expect(SettingsTab.parseConflictResolutionProcedure(null)).toBe(null);
-      });
-    });
-  });
-
-  describe("Should update collection", () => {
-    let explorer: Explorer;
-
-    beforeEach(() => {
-      explorer = new Explorer();
-    });
-
-    it("On TTL changed", () => {
-      const settingsTab = new SettingsTab({
-        tabKind: ViewModels.CollectionTabKind.Settings,
-        title: "Scale & Settings",
-        tabPath: "",
-        hashLocation: "",
-        isActive: ko.observable(false),
-        collection: new Collection(explorer, "mydb", baseCollection, quotaInfo, null),
-        onUpdateTabsButtons: (buttons: CommandButtonComponentProps[]): void => {}
-      });
-
-      expect(settingsTab.shouldUpdateCollection()).toBe(false);
-      settingsTab.timeToLive("off");
-      expect(settingsTab.shouldUpdateCollection()).toBe(true);
-
-      settingsTab.onRevertClick();
-      expect(settingsTab.shouldUpdateCollection()).toBe(false);
-      settingsTab.timeToLiveSeconds(100);
-      expect(settingsTab.shouldUpdateCollection()).toBe(true);
-    });
-
-    it("On Index Policy changed", () => {
-      const settingsTab = new SettingsTab({
-        tabKind: ViewModels.CollectionTabKind.Settings,
-        title: "Scale & Settings",
-        tabPath: "",
-        hashLocation: "",
-        isActive: ko.observable(false),
-        collection: new Collection(explorer, "mydb", baseCollection, quotaInfo, null),
-        onUpdateTabsButtons: (buttons: CommandButtonComponentProps[]): void => {}
-      });
-
-      expect(settingsTab.shouldUpdateCollection()).toBe(false);
-      settingsTab.indexingPolicyContent({ somethingDifferent: "" });
-      expect(settingsTab.shouldUpdateCollection()).toBe(true);
-    });
-
-    it("On Conflict Resolution Mode changed", () => {
-      const settingsTab = new SettingsTab({
-        tabKind: ViewModels.CollectionTabKind.Settings,
-        title: "Scale & Settings",
-        tabPath: "",
-        hashLocation: "",
-        isActive: ko.observable(false),
-        collection: new Collection(explorer, "mydb", baseCollection, quotaInfo, null),
-        onUpdateTabsButtons: (buttons: CommandButtonComponentProps[]): void => {}
-      });
-
-      expect(settingsTab.shouldUpdateCollection()).toBe(false);
-      settingsTab.conflictResolutionPolicyMode(DataModels.ConflictResolutionMode.Custom);
-      expect(settingsTab.shouldUpdateCollection()).toBe(true);
-
-      settingsTab.onRevertClick();
-      expect(settingsTab.shouldUpdateCollection()).toBe(false);
-      settingsTab.conflictResolutionPolicyPath("/somethingElse");
-      expect(settingsTab.shouldUpdateCollection()).toBe(true);
-
-      settingsTab.onRevertClick();
-      expect(settingsTab.shouldUpdateCollection()).toBe(false);
-      settingsTab.conflictResolutionPolicyMode(DataModels.ConflictResolutionMode.Custom);
-      settingsTab.conflictResolutionPolicyProcedure("resolver");
-      expect(settingsTab.shouldUpdateCollection()).toBe(true);
-    });
-  });
-
-  describe("Get Conflict Resolution configuration from user", () => {
-    let explorer: Explorer;
-
-    beforeEach(() => {
-      explorer = new Explorer();
-    });
-
-    it("null if it didnt change", () => {
-      const settingsTab = new SettingsTab({
-        tabKind: ViewModels.CollectionTabKind.Settings,
-        title: "Scale & Settings",
-        tabPath: "",
-        hashLocation: "",
-        isActive: ko.observable(false),
-        collection: new Collection(explorer, "mydb", baseCollection, quotaInfo, null),
-        onUpdateTabsButtons: (buttons: CommandButtonComponentProps[]): void => {}
-      });
-
-      expect(settingsTab.getUpdatedConflictResolutionPolicy()).toBe(null);
-    });
-
-    it("Custom contains valid backend path", () => {
-      const settingsTab = new SettingsTab({
-        tabKind: ViewModels.CollectionTabKind.Settings,
-        title: "Scale & Settings",
-        tabPath: "",
-        hashLocation: "",
-        isActive: ko.observable(false),
-        collection: new Collection(explorer, "mydb", baseCollection, quotaInfo, null),
-        onUpdateTabsButtons: (buttons: CommandButtonComponentProps[]): void => {}
-      });
-
-      expect(settingsTab.getUpdatedConflictResolutionPolicy()).toBe(null);
-      settingsTab.conflictResolutionPolicyMode(DataModels.ConflictResolutionMode.Custom);
-      settingsTab.conflictResolutionPolicyProcedure("resolver");
-      let updatedPolicy = settingsTab.getUpdatedConflictResolutionPolicy();
-      expect(updatedPolicy.mode).toBe(DataModels.ConflictResolutionMode.Custom);
-      expect(updatedPolicy.conflictResolutionProcedure).toBe("/dbs/mydb/colls/mycoll/sprocs/resolver");
-
-      settingsTab.conflictResolutionPolicyProcedure("");
-      updatedPolicy = settingsTab.getUpdatedConflictResolutionPolicy();
-      expect(updatedPolicy.conflictResolutionProcedure).toBe(undefined);
-    });
-
-    it("LWW contains valid property path", () => {
-      const settingsTab = new SettingsTab({
-        tabKind: ViewModels.CollectionTabKind.Settings,
-        title: "Scale & Settings",
-        tabPath: "",
-        hashLocation: "",
-        isActive: ko.observable(false),
-        collection: new Collection(explorer, "mydb", baseCollection, quotaInfo, null),
-        onUpdateTabsButtons: (buttons: CommandButtonComponentProps[]): void => {}
-      });
-
-      expect(settingsTab.getUpdatedConflictResolutionPolicy()).toBe(null);
-      settingsTab.conflictResolutionPolicyPath("someAttr");
-      let updatedPolicy = settingsTab.getUpdatedConflictResolutionPolicy();
-      expect(updatedPolicy.conflictResolutionPath).toBe("/someAttr");
-
-      settingsTab.conflictResolutionPolicyPath("/someAttr");
-      updatedPolicy = settingsTab.getUpdatedConflictResolutionPolicy();
-      expect(updatedPolicy.conflictResolutionPath).toBe("/someAttr");
-
-      settingsTab.conflictResolutionPolicyPath("");
-      updatedPolicy = settingsTab.getUpdatedConflictResolutionPolicy();
-      expect(updatedPolicy.conflictResolutionPath).toBe("");
-    });
-  });
-
-  describe("partitionKeyVisible", () => {
-    enum PartitionKeyOption {
-      None,
-      System,
-      NonSystem
-    }
-
-    function getCollection(defaultApi: string, partitionKeyOption: PartitionKeyOption) {
-      const explorer = new Explorer();
-      explorer.defaultExperience(defaultApi);
-
-      const offer: DataModels.Offer = null;
-      const defaultTtl = 200;
-      const conflictResolutionPolicy = {
-        mode: DataModels.ConflictResolutionMode.LastWriterWins,
-        conflictResolutionPath: "/_ts"
-      };
-
-      return new Collection(
-        explorer,
-        "mydb",
-        {
-          defaultTtl: defaultTtl,
-          partitionKey:
-            partitionKeyOption != PartitionKeyOption.None
-              ? {
-                  paths: ["/foo"],
-                  kind: "Hash",
-                  version: 2,
-                  systemKey: partitionKeyOption === PartitionKeyOption.System
-                }
-              : null,
-          conflictResolutionPolicy: conflictResolutionPolicy,
-          indexingPolicy: IndexingPolicies.SharedDatabaseDefault,
-          _rid: "",
-          _self: "",
-          _etag: "",
-          _ts: 0,
-          id: "mycoll"
-        },
-        quotaInfo,
-        offer
-      );
-    }
-
-    function getSettingsTab(defaultApi: string, partitionKeyOption: PartitionKeyOption): SettingsTab {
-      return new SettingsTab({
-        tabKind: ViewModels.CollectionTabKind.Settings,
-        title: "Scale & Settings",
-        tabPath: "",
-        hashLocation: "",
-        isActive: ko.observable(false),
-        collection: getCollection(defaultApi, partitionKeyOption),
-        onUpdateTabsButtons: (buttons: CommandButtonComponentProps[]): void => {}
-      });
-    }
-
-    it("on SQL container with no partition key should be false", () => {
-      const settingsTab = getSettingsTab(Constants.DefaultAccountExperience.DocumentDB, PartitionKeyOption.None);
-      expect(settingsTab.partitionKeyVisible()).toBe(false);
-    });
-
-    it("on Mongo container with no partition key should be false", () => {
-      const settingsTab = getSettingsTab(Constants.DefaultAccountExperience.MongoDB, PartitionKeyOption.None);
-      expect(settingsTab.partitionKeyVisible()).toBe(false);
-    });
-
-    it("on Gremlin container with no partition key should be false", () => {
-      const settingsTab = getSettingsTab(Constants.DefaultAccountExperience.Graph, PartitionKeyOption.None);
-      expect(settingsTab.partitionKeyVisible()).toBe(false);
-    });
-
-    it("on Cassandra container with no partition key should be false", () => {
-      const settingsTab = getSettingsTab(Constants.DefaultAccountExperience.Cassandra, PartitionKeyOption.None);
-      expect(settingsTab.partitionKeyVisible()).toBe(false);
-    });
-
-    it("on Table container with no partition key should be false", () => {
-      const settingsTab = getSettingsTab(Constants.DefaultAccountExperience.Table, PartitionKeyOption.None);
-      expect(settingsTab.partitionKeyVisible()).toBe(false);
-    });
-
-    it("on SQL container with system partition key should be true", () => {
-      const settingsTab = getSettingsTab(Constants.DefaultAccountExperience.DocumentDB, PartitionKeyOption.System);
-      expect(settingsTab.partitionKeyVisible()).toBe(true);
-    });
-
-    it("on Mongo container with system partition key should be false", () => {
-      const settingsTab = getSettingsTab(Constants.DefaultAccountExperience.MongoDB, PartitionKeyOption.System);
-      expect(settingsTab.partitionKeyVisible()).toBe(false);
-    });
-
-    it("on Gremlin container with system partition key should be true", () => {
-      const settingsTab = getSettingsTab(Constants.DefaultAccountExperience.Graph, PartitionKeyOption.System);
-      expect(settingsTab.partitionKeyVisible()).toBe(true);
-    });
-
-    it("on Cassandra container with system partition key should be false", () => {
-      const settingsTab = getSettingsTab(Constants.DefaultAccountExperience.Cassandra, PartitionKeyOption.System);
-      expect(settingsTab.partitionKeyVisible()).toBe(false);
-    });
-
-    it("on Table container with system partition key should be false", () => {
-      const settingsTab = getSettingsTab(Constants.DefaultAccountExperience.Table, PartitionKeyOption.System);
-      expect(settingsTab.partitionKeyVisible()).toBe(false);
-    });
-
-    it("on SQL container with non-system partition key should be true", () => {
-      const settingsTab = getSettingsTab(Constants.DefaultAccountExperience.DocumentDB, PartitionKeyOption.NonSystem);
-      expect(settingsTab.partitionKeyVisible()).toBe(true);
-    });
-
-    it("on Mongo container with non-system partition key should be true", () => {
-      const settingsTab = getSettingsTab(Constants.DefaultAccountExperience.MongoDB, PartitionKeyOption.NonSystem);
-      expect(settingsTab.partitionKeyVisible()).toBe(true);
-    });
-
-    it("on Gremlin container with non-system partition key should be true", () => {
-      const settingsTab = getSettingsTab(Constants.DefaultAccountExperience.Graph, PartitionKeyOption.NonSystem);
-      expect(settingsTab.partitionKeyVisible()).toBe(true);
-    });
-
-    it("on Cassandra container with non-system partition key should be false", () => {
-      const settingsTab = getSettingsTab(Constants.DefaultAccountExperience.Cassandra, PartitionKeyOption.NonSystem);
-      expect(settingsTab.partitionKeyVisible()).toBe(false);
-    });
-
-    it("on Table container with non-system partition key should be false", () => {
-      const settingsTab = getSettingsTab(Constants.DefaultAccountExperience.Table, PartitionKeyOption.NonSystem);
-      expect(settingsTab.partitionKeyVisible()).toBe(false);
-    });
-  });
-});

src/Explorer/Tabs/SettingsTabV2.tsx

@@ -47,7 +47,7 @@ export default class SettingsTabV2 extends TabsBase {
     this.currentCollection.loadOffer().then(
       () => {
         // passed in options and set by parent as "Settings" by default
-        this.tabTitle("Scale & Settings");
+        this.tabTitle(this.currentCollection.offer() ? "Settings" : "Scale & Settings");
         this.offerRead(true);
         this.options.getPendingNotification.then(
           (data: DataModels.Notification) => {

src/Explorer/Tabs/TabComponents.ts

@@ -5,12 +5,10 @@ import SparkMasterTabTemplate from "./SparkMasterTab.html";
 import NotebookV2TabTemplate from "./NotebookV2Tab.html";
 import TerminalTabTemplate from "./TerminalTab.html";
 import MongoDocumentsTabTemplate from "./MongoDocumentsTab.html";
-import MongoDocumentsTabV2Template from "./MongoDocumentsTabV2.html";
 import MongoQueryTabTemplate from "./MongoQueryTab.html";
 import MongoShellTabTemplate from "./MongoShellTab.html";
 import QueryTabTemplate from "./QueryTab.html";
 import QueryTablesTabTemplate from "./QueryTablesTab.html";
-import SettingsTabTemplate from "./SettingsTab.html";
 import SettingsTabV2Template from "./SettingsTabV2.html";
 import DatabaseSettingsTabTemplate from "./DatabaseSettingsTab.html";
 import StoredProcedureTabTemplate from "./StoredProcedureTab.html";
@@ -107,15 +105,6 @@ export class MongoQueryTab {
   }
 }
 
-export class MongoDocumentsTabV2 {
-  constructor() {
-    return {
-      viewModel: TabComponent,
-      template: MongoDocumentsTabV2Template
-    };
-  }
-}
-
 export class MongoShellTab {
   constructor() {
     return {
@@ -143,15 +132,6 @@ export class QueryTablesTab {
   }
 }
 
-export class SettingsTab {
-  constructor() {
-    return {
-      viewModel: TabComponent,
-      template: SettingsTabTemplate
-    };
-  }
-}
-
 export class SettingsTabV2 {
   constructor() {
     return {

src/Explorer/Tree/Collection.ts

@@ -24,13 +24,11 @@ import ConflictsTab from "../Tabs/ConflictsTab";
 import DocumentsTab from "../Tabs/DocumentsTab";
 import GraphTab from "../Tabs/GraphTab";
 import MongoDocumentsTab from "../Tabs/MongoDocumentsTab";
-import MongoDocumentsTabV2 from "../Tabs/MongoDocumentsTabV2";
 import MongoQueryTab from "../Tabs/MongoQueryTab";
 import MongoShellTab from "../Tabs/MongoShellTab";
 import QueryTab from "../Tabs/QueryTab";
 import QueryTablesTab from "../Tabs/QueryTablesTab";
 import SettingsTabV2 from "../Tabs/SettingsTabV2";
-import SettingsTab from "../Tabs/SettingsTab";
 import ConflictId from "./ConflictId";
 import DocumentId from "./DocumentId";
 import StoredProcedure from "./StoredProcedure";
@@ -507,11 +505,11 @@ export default class Collection implements ViewModels.Collection {
       dataExplorerArea: Constants.Areas.ResourceTree
     });
 
-    const mongoDocumentsTabs: MongoDocumentsTabV2[] = this.container.tabsManager.getTabs(
+    const mongoDocumentsTabs: MongoDocumentsTab[] = this.container.tabsManager.getTabs(
       ViewModels.CollectionTabKind.Documents,
       tab => tab.collection && tab.collection.databaseId === this.databaseId && tab.collection.id() === this.id()
-    ) as MongoDocumentsTabV2[];
-    let mongoDocumentsTab: MongoDocumentsTabV2 = mongoDocumentsTabs && mongoDocumentsTabs[0];
+    ) as MongoDocumentsTab[];
+    let mongoDocumentsTab: MongoDocumentsTab = mongoDocumentsTabs && mongoDocumentsTabs[0];
 
     if (mongoDocumentsTab) {
       this.container.tabsManager.activateTab(mongoDocumentsTab);
@@ -526,8 +524,9 @@ export default class Collection implements ViewModels.Collection {
       });
       this.documentIds([]);
 
-      mongoDocumentsTab = new MongoDocumentsTabV2({
-        container: this.container,
+      mongoDocumentsTab = new MongoDocumentsTab({
+        partitionKey: this.partitionKey,
+        documentIds: this.documentIds,
         tabKind: ViewModels.CollectionTabKind.Documents,
         title: "Documents",
         tabPath: "",
@@ -556,11 +555,6 @@ export default class Collection implements ViewModels.Collection {
       dataExplorerArea: Constants.Areas.ResourceTree
     });
 
-    const isSettingsV2Enabled = this.container.isSettingsV2Enabled();
-    if (!isSettingsV2Enabled) {
-      await this.loadOffer();
-    }
-
     const tabTitle = !this.offer() ? "Settings" : "Scale & Settings";
     const pendingNotificationsPromise: Q.Promise<DataModels.Notification> = this._getPendingThroughputSplitNotification();
     const matchingTabs = this.container.tabsManager.getTabs(ViewModels.CollectionTabKind.Settings, tab => {
@@ -587,68 +581,8 @@ export default class Collection implements ViewModels.Collection {
       onUpdateTabsButtons: this.container.onUpdateTabsButtons
     };
 
-    if (isSettingsV2Enabled) {
-      let settingsTabV2 = matchingTabs && (matchingTabs[0] as SettingsTabV2);
-      this.launchSettingsTabV2(settingsTabV2, traceStartData, settingsTabOptions, pendingNotificationsPromise);
-    } else {
-      let settingsTab = matchingTabs && (matchingTabs[0] as SettingsTab);
-      this.launchSettingsTabV1(settingsTab, traceStartData, settingsTabOptions, pendingNotificationsPromise);
-    }
-  };
-
-  private launchSettingsTabV1 = (
-    settingsTab: SettingsTab,
-    traceStartData: any,
-    settingsTabOptions: ViewModels.TabOptions,
-    getPendingNotification: Q.Promise<DataModels.Notification>
-  ): void => {
-    if (!settingsTab) {
-      const startKey: number = TelemetryProcessor.traceStart(Action.Tab, traceStartData);
-      settingsTabOptions.onLoadStartKey = startKey;
-
-      getPendingNotification.then(
-        (data: any) => {
-          const pendingNotification: DataModels.Notification = data && data[0];
-          settingsTabOptions.tabKind = ViewModels.CollectionTabKind.Settings;
-          settingsTab = new SettingsTab(settingsTabOptions);
-          this.container.tabsManager.activateNewTab(settingsTab);
-          settingsTab.pendingNotification(pendingNotification);
-        },
-        (error: any) => {
-          const errorMessage = getErrorMessage(error);
-          TelemetryProcessor.traceFailure(
-            Action.Tab,
-            {
-              databaseAccountName: this.container.databaseAccount().name,
-              databaseName: this.databaseId,
-              collectionName: this.id(),
-              defaultExperience: this.container.defaultExperience(),
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: settingsTabOptions.title,
-              error: errorMessage,
-              errorStack: getErrorStack(error)
-            },
-            startKey
-          );
-          NotificationConsoleUtils.logConsoleMessage(
-            ConsoleDataType.Error,
-            `Error while fetching container settings for container ${this.id()}: ${errorMessage}`
-          );
-          throw error;
-        }
-      );
-    } else {
-      getPendingNotification.then(
-        (pendingNotification: DataModels.Notification) => {
-          settingsTab.pendingNotification(pendingNotification);
-          this.container.tabsManager.activateTab(settingsTab);
-        },
-        (error: any) => {
-          settingsTab.pendingNotification(undefined);
-          this.container.tabsManager.activateTab(settingsTab);
-        }
-      );
-    }
+    let settingsTabV2 = matchingTabs && (matchingTabs[0] as SettingsTabV2);
+    this.launchSettingsTabV2(settingsTabV2, traceStartData, settingsTabOptions, pendingNotificationsPromise);
   };
 
   private launchSettingsTabV2 = (

test/mongo/container.spec.ts

@@ -82,10 +82,6 @@ describe("Collection Add and Delete Mongo spec", () => {
       );
 
       if (collections.length) {
-        await frame.waitFor(`div[class="collectionHeader main2 nodeItem "] > div[class="treeNodeHeader "]`, {
-          visible: true
-        });
-
         const textId = await frame.evaluate(element => {
           return element.attributes["data-test"].textContent;
         }, collections[0]);

test/notebooks/notebookTestUtils.ts

@@ -0,0 +1,101 @@
+import { ElementHandle, Frame } from "puppeteer";
+import { TestExplorerParams } from "./testExplorer/TestExplorerParams";
+import * as path from "path";
+
+export const NOTEBOOK_OPERATION_DELAY = 5000;
+export const RENDER_DELAY = 2500;
+
+let testExplorerFrame: Frame;
+export const getTestExplorerFrame = async (): Promise<Frame> => {
+  if (testExplorerFrame) {
+    return testExplorerFrame;
+  }
+
+  const notebooksTestRunnerTenantId = process.env.NOTEBOOKS_TEST_RUNNER_TENANT_ID;
+  const notebooksTestRunnerClientId = process.env.NOTEBOOKS_TEST_RUNNER_CLIENT_ID;
+  const notebooksTestRunnerClientSecret = process.env.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET;
+  const portalRunnerDatabaseAccount = process.env.PORTAL_RUNNER_DATABASE_ACCOUNT;
+  const portalRunnerDatabaseAccountKey = process.env.PORTAL_RUNNER_DATABASE_ACCOUNT_KEY;
+  const portalRunnerSubscripton = process.env.PORTAL_RUNNER_SUBSCRIPTION;
+  const portalRunnerResourceGroup = process.env.PORTAL_RUNNER_RESOURCE_GROUP;
+
+  const testExplorerUrl = new URL("testExplorer.html", "https://localhost:1234");
+  testExplorerUrl.searchParams.append(
+    TestExplorerParams.notebooksTestRunnerTenantId,
+    encodeURI(notebooksTestRunnerTenantId)
+  );
+  testExplorerUrl.searchParams.append(
+    TestExplorerParams.notebooksTestRunnerClientId,
+    encodeURI(notebooksTestRunnerClientId)
+  );
+  testExplorerUrl.searchParams.append(
+    TestExplorerParams.notebooksTestRunnerClientSecret,
+    encodeURI(notebooksTestRunnerClientSecret)
+  );
+  testExplorerUrl.searchParams.append(
+    TestExplorerParams.portalRunnerDatabaseAccount,
+    encodeURI(portalRunnerDatabaseAccount)
+  );
+  testExplorerUrl.searchParams.append(
+    TestExplorerParams.portalRunnerDatabaseAccountKey,
+    encodeURI(portalRunnerDatabaseAccountKey)
+  );
+  testExplorerUrl.searchParams.append(TestExplorerParams.portalRunnerSubscripton, encodeURI(portalRunnerSubscripton));
+  testExplorerUrl.searchParams.append(
+    TestExplorerParams.portalRunnerResourceGroup,
+    encodeURI(portalRunnerResourceGroup)
+  );
+
+  await page.goto(testExplorerUrl.toString());
+
+  const handle = await page.waitForSelector("iframe");
+  testExplorerFrame = await handle.contentFrame();
+  await testExplorerFrame.waitForSelector(".galleryHeader");
+  return testExplorerFrame;
+};
+
+export const uploadNotebookIfNotExist = async (frame: Frame, notebookName: string): Promise<ElementHandle<Element>> => {
+  const notebookNode = await getNotebookNode(frame, notebookName);
+  if (notebookNode) {
+    return notebookNode;
+  }
+
+  const uploadNotebookPath = path.join(__dirname, "testNotebooks", notebookName);
+  const notebookResourceTree = await frame.waitForSelector(".notebookResourceTree");
+  const treeNodeHeadersBeforeUpload = await notebookResourceTree.$$(".treeNodeHeader");
+
+  const ellipses = await treeNodeHeadersBeforeUpload[2].$("button");
+  await ellipses.click();
+
+  await frame.waitFor(RENDER_DELAY);
+
+  const menuItems = await frame.$$(".ms-ContextualMenu-item");
+  await menuItems[4].click();
+
+  const uploadFileButton = await frame.waitForSelector("#importFileButton");
+  uploadFileButton.click();
+
+  const fileChooser = await page.waitForFileChooser();
+  fileChooser.accept([uploadNotebookPath]);
+
+  const submitButton = await frame.waitForSelector("#uploadFileButton");
+  await submitButton.click();
+
+  await frame.waitFor(NOTEBOOK_OPERATION_DELAY);
+  return await getNotebookNode(frame, notebookName);
+};
+
+export const getNotebookNode = async (frame: Frame, uploadNotebookName: string): Promise<ElementHandle<Element>> => {
+  const notebookResourceTree = await frame.waitForSelector(".notebookResourceTree");
+  let currentNotebookNode: ElementHandle<Element>;
+
+  const treeNodeHeaders = await notebookResourceTree.$$(".treeNodeHeader");
+  for (let i = 1; i < treeNodeHeaders.length; i++) {
+    currentNotebookNode = treeNodeHeaders[i];
+    const nodeLabel = await currentNotebookNode.$eval(".nodeLabel", element => element.textContent);
+    if (nodeLabel === uploadNotebookName) {
+      return currentNotebookNode;
+    }
+  }
+  return undefined;
+};

test/notebooks/testExplorer/TestExplorer.ts

@@ -0,0 +1,138 @@
+import { MessageTypes } from "../../../src/Contracts/ExplorerContracts";
+import "../../../less/hostedexplorer.less";
+import { TestExplorerParams } from "./TestExplorerParams";
+import { ClientSecretCredential } from "@azure/identity";
+import { DatabaseAccountsGetResponse } from "@azure/arm-cosmosdb/esm/models";
+import { CosmosDBManagementClient } from "@azure/arm-cosmosdb";
+import * as msRest from "@azure/ms-rest-js";
+import * as ViewModels from "../../../src/Contracts/ViewModels";
+
+class CustomSigner implements msRest.ServiceClientCredentials {
+  private token: string;
+  constructor(token: string) {
+    this.token = token;
+  }
+
+  async signRequest(webResource: msRest.WebResourceLike): Promise<msRest.WebResourceLike> {
+    webResource.headers.set("authorization", `bearer ${this.token}`);
+    return webResource;
+  }
+}
+
+const handleMessage = (event: MessageEvent): void => {
+  if (event.data.type === MessageTypes.InitTestExplorer) {
+    sendMessageToExplorerFrame(event.data);
+  }
+};
+
+const AADLogin = async (
+  notebooksTestRunnerApplicationId: string,
+  notebooksTestRunnerClientId: string,
+  notebooksTestRunnerClientSecret: string
+): Promise<string> => {
+  const credentials = new ClientSecretCredential(
+    notebooksTestRunnerApplicationId,
+    notebooksTestRunnerClientId,
+    notebooksTestRunnerClientSecret
+  );
+  const token = await credentials.getToken("https://management.core.windows.net/.default");
+  return token.token;
+};
+
+const getDatabaseAccount = async (
+  token: string,
+  notebooksAccountSubscriptonId: string,
+  notebooksAccountResourceGroup: string,
+  notebooksAccountName: string
+): Promise<DatabaseAccountsGetResponse> => {
+  const client = new CosmosDBManagementClient(new CustomSigner(token), notebooksAccountSubscriptonId);
+  return client.databaseAccounts.get(notebooksAccountResourceGroup, notebooksAccountName);
+};
+
+const sendMessageToExplorerFrame = (data: unknown): void => {
+  const explorerFrame = document.getElementById("explorerMenu") as HTMLIFrameElement;
+
+  explorerFrame &&
+    explorerFrame.contentDocument &&
+    explorerFrame.contentDocument.referrer &&
+    explorerFrame.contentWindow.postMessage(
+      {
+        signature: "pcIframe",
+        data: data
+      },
+      explorerFrame.contentDocument.referrer || window.location.href
+    );
+};
+
+const initTestExplorer = async (): Promise<void> => {
+  window.addEventListener("message", handleMessage, false);
+
+  const urlSearchParams = new URLSearchParams(window.location.search);
+  const notebooksTestRunnerTenantId = decodeURIComponent(
+    urlSearchParams.get(TestExplorerParams.notebooksTestRunnerTenantId)
+  );
+  const notebooksTestRunnerClientId = decodeURIComponent(
+    urlSearchParams.get(TestExplorerParams.notebooksTestRunnerClientId)
+  );
+  const notebooksTestRunnerClientSecret = decodeURIComponent(
+    urlSearchParams.get(TestExplorerParams.notebooksTestRunnerClientSecret)
+  );
+  const portalRunnerDatabaseAccount = decodeURIComponent(
+    urlSearchParams.get(TestExplorerParams.portalRunnerDatabaseAccount)
+  );
+  const portalRunnerDatabaseAccountKey = decodeURIComponent(
+    urlSearchParams.get(TestExplorerParams.portalRunnerDatabaseAccountKey)
+  );
+  const portalRunnerSubscripton = decodeURIComponent(urlSearchParams.get(TestExplorerParams.portalRunnerSubscripton));
+  const portalRunnerResourceGroup = decodeURIComponent(
+    urlSearchParams.get(TestExplorerParams.portalRunnerResourceGroup)
+  );
+
+  const token = await AADLogin(
+    notebooksTestRunnerTenantId,
+    notebooksTestRunnerClientId,
+    notebooksTestRunnerClientSecret
+  );
+  const databaseAccount = await getDatabaseAccount(
+    token,
+    portalRunnerSubscripton,
+    portalRunnerResourceGroup,
+    portalRunnerDatabaseAccount
+  );
+
+  const initTestExplorerContent = {
+    type: MessageTypes.InitTestExplorer,
+    inputs: {
+      databaseAccount: databaseAccount,
+      subscriptionId: portalRunnerSubscripton,
+      resourceGroup: portalRunnerResourceGroup,
+      authorizationToken: `Bearer ${token}`,
+      features: {},
+      hasWriteAccess: true,
+      csmEndpoint: "https://management.azure.com",
+      dnsSuffix: "documents.azure.com",
+      serverId: "prod1",
+      extensionEndpoint: "/proxy",
+      subscriptionType: 3,
+      quotaId: "Internal_2014-09-01",
+      addCollectionDefaultFlight: "2",
+      isTryCosmosDBSubscription: false,
+      masterKey: portalRunnerDatabaseAccountKey,
+      loadDatabaseAccountTimestamp: 1604663109836,
+      dataExplorerVersion: "1.0.1",
+      sharedThroughputMinimum: 400,
+      sharedThroughputMaximum: 1000000,
+      sharedThroughputDefault: 400,
+      defaultCollectionThroughput: {
+        storage: "100",
+        throughput: { fixed: 400, unlimited: 400, unlimitedmax: 100000, unlimitedmin: 400, shared: 400 }
+      },
+      // add UI test only when feature is not dependent on flights anymore
+      flights: []
+    } as ViewModels.DataExplorerInputsFrame
+  };
+
+  window.postMessage(initTestExplorerContent, window.location.href);
+};
+
+window.addEventListener("load", initTestExplorer);

test/notebooks/testExplorer/TestExplorerParams.ts

@@ -0,0 +1,9 @@
+export enum TestExplorerParams {
+  notebooksTestRunnerTenantId = "notebooksTestRunnerTenantId",
+  notebooksTestRunnerClientId = "notebooksTestRunnerClientId",
+  notebooksTestRunnerClientSecret = "notebooksTestRunnerClientSecret",
+  portalRunnerDatabaseAccount = "portalRunnerDatabaseAccount",
+  portalRunnerDatabaseAccountKey = "portalRunnerDatabaseAccountKey",
+  portalRunnerSubscripton = "portalRunnerSubscripton",
+  portalRunnerResourceGroup = "portalRunnerResourceGroup"
+}

test/notebooks/testExplorer/testExplorer.html

@@ -0,0 +1,18 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0" />
+    <title>Azure Cosmos DB</title>
+    <link rel="shortcut icon" href="images/CosmosDB_rgb_ui_lighttheme.ico" type="image/x-icon" />
+  </head>
+
+  <body>
+    <iframe
+      id="explorerMenu"
+      name="explorer"
+      class="iframe"
+      title="explorer"
+      src="explorer.html?v=1.0.1&platform=Portal"
+    ></iframe>
+  </body>
+</html>

test/notebooks/testNotebooks/GettingStarted.ipynb

@@ -0,0 +1,110 @@
+{
+  "cells": [
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": "# Getting started with Cosmos notebooks\nIn this notebook, we'll learn how to use Cosmos notebook features. We'll create a database and container, import some sample data in a container in Azure Cosmos DB and run some queries over it."
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": "### Create new database and container\n\nTo connect to the service, you can use our built-in instance of ```cosmos_client```. This is a ready to use instance of [CosmosClient](https://docs.microsoft.com/python/api/azure-cosmos/azure.cosmos.cosmos_client.cosmosclient?view=azure-python) from our Python SDK. It already has the context of this account baked in. We'll use ```cosmos_client``` to create a new database called **RetailDemo** and container called **WebsiteData**.\n\nOur dataset will contain events that occurred on the website - e.g. a user viewing an item, adding it to their cart, or purchasing it. We will partition by CartId, which represents the individual cart of each user. This will give us an even distribution of throughput and storage in our container. Learn more about how to [choose a good partition key.](https://docs.microsoft.com/azure/cosmos-db/partition-data)"
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {
+        "trusted": false
+      },
+      "outputs": [],
+      "source": "import azure.cosmos\nfrom azure.cosmos.partition_key import PartitionKey\n\ndatabase = cosmos_client.create_database_if_not_exists('RetailDemo')\nprint('Database RetailDemo created')\n\ncontainer = database.create_container_if_not_exists(id='WebsiteData', partition_key=PartitionKey(path='/CartID'))\nprint('Container WebsiteData created')\n"
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": "#### Set the default database and container context to the new resources\n\nWe can use the ```%database {database_id}``` and ```%container {container_id}``` syntax."
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {
+        "trusted": false
+      },
+      "outputs": [],
+      "source": "%database RetailDemo"
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {
+        "trusted": false
+      },
+      "outputs": [],
+      "source": "%container WebsiteData"
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": "### Load in sample JSON data and insert into the container. \nWe'll use the **%%upload** magic function to insert items into the container"
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {
+        "collapsed": false,
+        "inputHidden": false,
+        "outputHidden": false,
+        "trusted": false
+      },
+      "outputs": [],
+      "source": "%%upload --databaseName RetailDemo --containerName WebsiteData --url https://cosmosnotebooksdata.blob.core.windows.net/notebookdata/websiteData-small.json"
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": "The new database and container should show up under the **Data** section. Use the refresh icon after completing the previous cell. \n\n<img src=\"https://cosmosnotebooksdata.blob.core.windows.net/notebookdata/refreshData.png\" alt=\"Refresh Data resource tree to see newly created resources\" width=\"40%\"/>"
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": "### Run a query using the built-in Azure Cosmos notebook magic\n"
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {
+        "trusted": false
+      },
+      "outputs": [],
+      "source": "%%sql\nSELECT c.Action, c.Price as ItemRevenue, c.Country, c.Item FROM c"
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": "We can get more information about the %%sql command using ```%%sql?```"
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": "### Next steps\n\nNow that you've learned how to use basic notebook functionality, follow the **Visualization.ipynb** notebook to further analyze and visualize our data. You can find it under the **Sample Notebooks** section."
+    }
+  ],
+  "metadata": {
+    "kernelspec": {
+      "display_name": "Python 3",
+      "language": "python",
+      "name": "python3"
+    },
+    "language_info": {
+      "file_extension": ".py",
+      "mimetype": "text/x-python",
+      "name": "python",
+      "version": "3.6.8"
+    },
+    "nteract": {
+      "version": "dataExplorer 1.0"
+    }
+  },
+  "nbformat": 4,
+  "nbformat_minor": 2
+}

test/notebooks/uploadAndOpenNotebook.spec.ts

@@ -0,0 +1,29 @@
+import "expect-puppeteer";
+import { getTestExplorerFrame, uploadNotebookIfNotExist } from "./notebookTestUtils";
+import { ElementHandle, Frame } from "puppeteer";
+
+jest.setTimeout(300000);
+
+const notebookName = "GettingStarted.ipynb";
+let frame: Frame;
+let uploadedNotebookNode: ElementHandle<Element>;
+
+describe("Notebook UI tests", () => {
+  it("Upload, Open and Delete Notebook", async () => {
+    try {
+      frame = await getTestExplorerFrame();
+      uploadedNotebookNode = await uploadNotebookIfNotExist(frame, notebookName);
+      await uploadedNotebookNode.click();
+      await frame.waitForSelector(".tabNavText");
+      const tabTitle = await frame.$eval(".tabNavText", element => element.textContent);
+      expect(tabTitle).toEqual(notebookName);
+      const closeIcon = await frame.waitForSelector(".close-Icon");
+      await closeIcon.click();
+    } catch (error) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const testName = (expect as any).getState().currentTestName;
+      await page.screenshot({ path: `Test Failed ${testName}.jpg` });
+      throw error;
+    }
+  });
+});

tsconfig.json

@@ -19,6 +19,6 @@
     "noEmit": true,
     "types": ["jest"]
   },
-  "include": ["./src/**/*"],
+  "include": ["./src/**/*", "./test/notebooks/testExplorer/**/*"],
   "exclude": ["./src/**/__mocks__/**/*"]
 }

webpack.config.js

@@ -140,6 +140,11 @@ module.exports = function(env = {}, argv = {}) {
       template: "src/hostedExplorer.html",
       chunks: ["hostedExplorer"]
     }),
+    new HtmlWebpackPlugin({
+      filename: "testExplorer.html",
+      template: "test/notebooks/testExplorer/testExplorer.html",
+      chunks: ["testExplorer"]
+    }),
     new HtmlWebpackPlugin({
       filename: "Heatmap.html",
       template: "src/Controls/Heatmap/Heatmap.html",
@@ -178,6 +183,7 @@ module.exports = function(env = {}, argv = {}) {
       index: "./src/Index.ts",
       quickstart: "./src/quickstart.ts",
       hostedExplorer: "./src/HostedExplorer.ts",
+      testExplorer: "./test/notebooks/testExplorer/TestExplorer.ts",
       heatmap: "./src/Controls/Heatmap/Heatmap.ts",
       terminal: "./src/Terminal/index.ts",
       notebookViewer: "./src/NotebookViewer/NotebookViewer.tsx",