Container pool changes to plumb auth

* initial commit for notbooks pupeteer tests

* Added Auth

* added try catch block with screenshot for error

* Addressed PR comments

* renamed params

* renamed param

* fixed formatting error

* Updates mongo spec to remove waitFor on already awaited selector

* added logging statements

* format errors fixed

* added ci env variables

* increased delay for render

* removed logging

* added delay

* fix format error

* removed deletion

* reverted package.json change

Co-authored-by: zfoster <notzachfoster@gmail.com>

.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
@@ -290,8 +288,6 @@ src/Utils/DatabaseAccountUtils.ts
 src/Utils/JunoUtils.ts
 src/Utils/MessageValidation.ts
 src/Utils/NotebookConfigurationUtils.ts
-src/Utils/OfferUtils.test.ts
-src/Utils/OfferUtils.ts
 src/Utils/PricingUtils.test.ts
 src/Utils/QueryUtils.test.ts
 src/Utils/QueryUtils.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,15 +4,17 @@
   "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/cosmos-language-service": "0.0.5",
+    "@azure/identity": "1.1.0",
     "@jupyterlab/services": "6.0.0-rc.2",
     "@jupyterlab/terminal": "3.0.0-rc.2",
     "@microsoft/applicationinsights-web": "2.5.9",
     "@nteract/commutable": "7.3.2",
     "@nteract/connected-components": "6.8.2",
     "@nteract/core": "15.1.0",
-    "@nteract/data-explorer": "8.0.3",
+    "@nteract/data-explorer": "8.2.9",
     "@nteract/directory-listing": "2.0.6",
     "@nteract/dropdown-menu": "1.0.1",
     "@nteract/editor": "10.1.2",
@@ -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/DataAccessUtilityBase.ts

@@ -1,26 +1,13 @@
-import {
-  ConflictDefinition,
-  FeedOptions,
-  ItemDefinition,
-  OfferDefinition,
-  QueryIterator,
-  Resource
-} from "@azure/cosmos";
-import { RequestOptions } from "@azure/cosmos/dist-esm";
+import { ConflictDefinition, FeedOptions, ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
 import Q from "q";
-import { configContext, Platform } from "../ConfigContext";
 import * as DataModels from "../Contracts/DataModels";
-import { MessageTypes } from "../Contracts/ExplorerContracts";
 import * as ViewModels from "../Contracts/ViewModels";
 import ConflictId from "../Explorer/Tree/ConflictId";
 import DocumentId from "../Explorer/Tree/DocumentId";
 import StoredProcedure from "../Explorer/Tree/StoredProcedure";
 import { LocalStorageUtility, StorageKey } from "../Shared/StorageUtility";
-import { OfferUtils } from "../Utils/OfferUtils";
 import * as Constants from "./Constants";
 import { client } from "./CosmosClient";
-import * as HeadersUtility from "./HeadersUtility";
-import { sendCachedDataMessage } from "./MessageHandler";
 
 export function getCommonQueryOptions(options: FeedOptions): any {
   const storedItemPerPageSetting: number = LocalStorageUtility.getEntryNumber(StorageKey.ActualItemPerPage);

src/Common/OfferUtility.test.ts

@@ -0,0 +1,62 @@
+import * as OfferUtility from "./OfferUtility";
+import { SDKOfferDefinition, Offer } from "../Contracts/DataModels";
+import { OfferResponse } from "@azure/cosmos";
+
+describe("parseSDKOfferResponse", () => {
+  it("manual throughput", () => {
+    const mockOfferDefinition = {
+      content: {
+        offerThroughput: 500,
+        collectionThroughputInfo: {
+          minimumRUForCollection: 400,
+          numPhysicalPartitions: 1
+        }
+      },
+      id: "test"
+    } as SDKOfferDefinition;
+
+    const mockResponse = {
+      resource: mockOfferDefinition
+    } as OfferResponse;
+
+    const expectedResult: Offer = {
+      manualThroughput: 500,
+      autoscaleMaxThroughput: undefined,
+      minimumThroughput: 400,
+      id: "test",
+      offerDefinition: mockOfferDefinition
+    };
+
+    expect(OfferUtility.parseSDKOfferResponse(mockResponse)).toEqual(expectedResult);
+  });
+
+  it("autoscale throughput", () => {
+    const mockOfferDefinition = {
+      content: {
+        offerThroughput: 400,
+        collectionThroughputInfo: {
+          minimumRUForCollection: 400,
+          numPhysicalPartitions: 1
+        },
+        offerAutopilotSettings: {
+          maxThroughput: 5000
+        }
+      },
+      id: "test"
+    } as SDKOfferDefinition;
+
+    const mockResponse = {
+      resource: mockOfferDefinition
+    } as OfferResponse;
+
+    const expectedResult: Offer = {
+      manualThroughput: undefined,
+      autoscaleMaxThroughput: 5000,
+      minimumThroughput: 400,
+      id: "test",
+      offerDefinition: mockOfferDefinition
+    };
+
+    expect(OfferUtility.parseSDKOfferResponse(mockResponse)).toEqual(expectedResult);
+  });
+});

src/Common/OfferUtility.ts

@@ -0,0 +1,33 @@
+import { Offer, SDKOfferDefinition } from "../Contracts/DataModels";
+import { OfferResponse } from "@azure/cosmos";
+
+export const parseSDKOfferResponse = (offerResponse: OfferResponse): Offer => {
+  const offerDefinition: SDKOfferDefinition = offerResponse?.resource;
+  const offerContent = offerDefinition.content;
+  if (!offerContent) {
+    return undefined;
+  }
+
+  const minimumThroughput = offerContent.collectionThroughputInfo?.minimumRUForCollection;
+  const autopilotSettings = offerContent.offerAutopilotSettings;
+
+  if (autopilotSettings) {
+    return {
+      id: offerDefinition.id,
+      autoscaleMaxThroughput: autopilotSettings.maxThroughput,
+      manualThroughput: undefined,
+      minimumThroughput,
+      offerDefinition,
+      headers: offerResponse.headers
+    };
+  }
+
+  return {
+    id: offerDefinition.id,
+    autoscaleMaxThroughput: undefined,
+    manualThroughput: offerContent.offerThroughput,
+    minimumThroughput,
+    offerDefinition,
+    headers: offerResponse.headers
+  };
+};

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

@@ -1,9 +1,6 @@
-import * as DataModels from "../../Contracts/DataModels";
 import { AuthType } from "../../AuthType";
 import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
-import { HttpHeaders } from "../Constants";
-import { RequestOptions } from "@azure/cosmos/dist-esm";
-import { client } from "../CosmosClient";
+import { Offer, ReadCollectionOfferParams } from "../../Contracts/DataModels";
 import { handleError } from "../ErrorHandlingUtils";
 import { getSqlContainerThroughput } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
 import { getMongoDBCollectionThroughput } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
@@ -11,50 +8,22 @@ import { getCassandraTableThroughput } from "../../Utils/arm/generatedClients/20
 import { getGremlinGraphThroughput } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
 import { getTableThroughput } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { readOffers } from "./readOffers";
+import { readOfferWithSDK } from "./readOfferWithSDK";
 import { userContext } from "../../UserContext";
 
-export const readCollectionOffer = async (
-  params: DataModels.ReadCollectionOfferParams
-): Promise<DataModels.OfferWithHeaders> => {
+export const readCollectionOffer = async (params: ReadCollectionOfferParams): Promise<Offer> => {
   const clearMessage = logConsoleProgress(`Querying offer for collection ${params.collectionId}`);
-  let offerId = params.offerId;
-  if (!offerId) {
-    if (window.authType === AuthType.AAD && !userContext.useSDKOperations) {
-      try {
-        offerId = await getCollectionOfferIdWithARM(params.databaseId, params.collectionId);
-      } catch (error) {
-        clearMessage();
-        if (error.code !== "NotFound") {
-          throw error;
-        }
-        return undefined;
-      }
-    } else {
-      offerId = await getCollectionOfferIdWithSDK(params.collectionResourceId);
-      if (!offerId) {
-        clearMessage();
-        return undefined;
-      }
-    }
-  }
-
-  const options: RequestOptions = {
-    initialHeaders: {
-      [HttpHeaders.populateCollectionThroughputInfo]: true
-    }
-  };
 
   try {
-    const response = await client()
-      .offer(offerId)
-      .read(options);
-    return (
-      response && {
-        ...response.resource,
-        headers: response.headers
-      }
-    );
+    if (
+      window.authType === AuthType.AAD &&
+      !userContext.useSDKOperations &&
+      userContext.defaultExperience !== DefaultAccountExperienceType.Table
+    ) {
+      return await readCollectionOfferWithARM(params.databaseId, params.collectionId);
+    }
+
+    return await readOfferWithSDK(params.offerId, params.collectionResourceId);
   } catch (error) {
     handleError(error, "ReadCollectionOffer", `Error while querying offer for collection ${params.collectionId}`);
     throw error;
@@ -63,61 +32,90 @@ export const readCollectionOffer = async (
   }
 };
 
-const getCollectionOfferIdWithARM = async (databaseId: string, collectionId: string): Promise<string> => {
-  let rpResponse;
+const readCollectionOfferWithARM = async (databaseId: string, collectionId: string): Promise<Offer> => {
   const subscriptionId = userContext.subscriptionId;
   const resourceGroup = userContext.resourceGroup;
   const accountName = userContext.databaseAccount.name;
   const defaultExperience = userContext.defaultExperience;
-  switch (defaultExperience) {
-    case DefaultAccountExperienceType.DocumentDB:
-      rpResponse = await getSqlContainerThroughput(
-        subscriptionId,
-        resourceGroup,
-        accountName,
-        databaseId,
-        collectionId
-      );
-      break;
-    case DefaultAccountExperienceType.MongoDB:
-      rpResponse = await getMongoDBCollectionThroughput(
-        subscriptionId,
-        resourceGroup,
-        accountName,
-        databaseId,
-        collectionId
-      );
-      break;
-    case DefaultAccountExperienceType.Cassandra:
-      rpResponse = await getCassandraTableThroughput(
-        subscriptionId,
-        resourceGroup,
-        accountName,
-        databaseId,
-        collectionId
-      );
-      break;
-    case DefaultAccountExperienceType.Graph:
-      rpResponse = await getGremlinGraphThroughput(
-        subscriptionId,
-        resourceGroup,
-        accountName,
-        databaseId,
-        collectionId
-      );
-      break;
-    case DefaultAccountExperienceType.Table:
-      rpResponse = await getTableThroughput(subscriptionId, resourceGroup, accountName, collectionId);
-      break;
-    default:
-      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
+
+  let rpResponse;
+  try {
+    switch (defaultExperience) {
+      case DefaultAccountExperienceType.DocumentDB:
+        rpResponse = await getSqlContainerThroughput(
+          subscriptionId,
+          resourceGroup,
+          accountName,
+          databaseId,
+          collectionId
+        );
+        break;
+      case DefaultAccountExperienceType.MongoDB:
+        rpResponse = await getMongoDBCollectionThroughput(
+          subscriptionId,
+          resourceGroup,
+          accountName,
+          databaseId,
+          collectionId
+        );
+        break;
+      case DefaultAccountExperienceType.Cassandra:
+        rpResponse = await getCassandraTableThroughput(
+          subscriptionId,
+          resourceGroup,
+          accountName,
+          databaseId,
+          collectionId
+        );
+        break;
+      case DefaultAccountExperienceType.Graph:
+        rpResponse = await getGremlinGraphThroughput(
+          subscriptionId,
+          resourceGroup,
+          accountName,
+          databaseId,
+          collectionId
+        );
+        break;
+      case DefaultAccountExperienceType.Table:
+        rpResponse = await getTableThroughput(subscriptionId, resourceGroup, accountName, collectionId);
+        break;
+      default:
+        throw new Error(`Unsupported default experience type: ${defaultExperience}`);
+    }
+  } catch (error) {
+    if (error.code !== "NotFound") {
+      throw error;
+    }
+
+    return undefined;
   }
 
-  return rpResponse?.name;
-};
+  const resource = rpResponse?.properties?.resource;
+  if (resource) {
+    const offerId: string = rpResponse.name;
+    const minimumThroughput: number =
+      typeof resource.minimumThroughput === "string"
+        ? parseInt(resource.minimumThroughput)
+        : resource.minimumThroughput;
+    const autoscaleSettings = resource.autoscaleSettings;
 
-const getCollectionOfferIdWithSDK = async (collectionResourceId: string): Promise<string> => {
-  const offers = await readOffers();
-  const offer = offers.find(offer => offer.resource === collectionResourceId);
-  return offer?.id;
+    if (autoscaleSettings) {
+      return {
+        id: offerId,
+        autoscaleMaxThroughput: autoscaleSettings.maxThroughput,
+        manualThroughput: undefined,
+        minimumThroughput
+      };
+    }
+
+    return {
+      id: offerId,
+      autoscaleMaxThroughput: undefined,
+      manualThroughput: resource.throughput,
+      minimumThroughput
+    };
+  }
+
+  return undefined;
 };

src/Common/dataAccess/readDatabaseOffer.ts

@@ -1,51 +1,28 @@
-import * as DataModels from "../../Contracts/DataModels";
 import { AuthType } from "../../AuthType";
 import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
-import { HttpHeaders } from "../Constants";
-import { RequestOptions } from "@azure/cosmos/dist-esm";
-import { client } from "../CosmosClient";
+import { Offer, ReadDatabaseOfferParams } from "../../Contracts/DataModels";
 import { getSqlDatabaseThroughput } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
 import { getMongoDBDatabaseThroughput } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
 import { getCassandraKeyspaceThroughput } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
 import { getGremlinDatabaseThroughput } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
 import { handleError } from "../ErrorHandlingUtils";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { readOffers } from "./readOffers";
+import { readOfferWithSDK } from "./readOfferWithSDK";
 import { userContext } from "../../UserContext";
 
-export const readDatabaseOffer = async (
-  params: DataModels.ReadDatabaseOfferParams
-): Promise<DataModels.OfferWithHeaders> => {
+export const readDatabaseOffer = async (params: ReadDatabaseOfferParams): Promise<Offer> => {
   const clearMessage = logConsoleProgress(`Querying offer for database ${params.databaseId}`);
-  let offerId = params.offerId;
-  if (!offerId) {
-    offerId = await (window.authType === AuthType.AAD &&
-    !userContext.useSDKOperations &&
-    userContext.defaultExperience !== DefaultAccountExperienceType.Table
-      ? getDatabaseOfferIdWithARM(params.databaseId)
-      : getDatabaseOfferIdWithSDK(params.databaseResourceId));
-    if (!offerId) {
-      clearMessage();
-      return undefined;
-    }
-  }
-
-  const options: RequestOptions = {
-    initialHeaders: {
-      [HttpHeaders.populateCollectionThroughputInfo]: true
-    }
-  };
 
   try {
-    const response = await client()
-      .offer(offerId)
-      .read(options);
-    return (
-      response && {
-        ...response.resource,
-        headers: response.headers
-      }
-    );
+    if (
+      window.authType === AuthType.AAD &&
+      !userContext.useSDKOperations &&
+      userContext.defaultExperience !== DefaultAccountExperienceType.Table
+    ) {
+      return await readDatabaseOfferWithARM(params.databaseId);
+    }
+
+    return await readOfferWithSDK(params.offerId, params.databaseResourceId);
   } catch (error) {
     handleError(error, "ReadDatabaseOffer", `Error while querying offer for database ${params.databaseId}`);
     throw error;
@@ -54,13 +31,13 @@ export const readDatabaseOffer = async (
   }
 };
 
-const getDatabaseOfferIdWithARM = async (databaseId: string): Promise<string> => {
-  let rpResponse;
+const readDatabaseOfferWithARM = async (databaseId: string): Promise<Offer> => {
   const subscriptionId = userContext.subscriptionId;
   const resourceGroup = userContext.resourceGroup;
   const accountName = userContext.databaseAccount.name;
   const defaultExperience = userContext.defaultExperience;
 
+  let rpResponse;
   try {
     switch (defaultExperience) {
       case DefaultAccountExperienceType.DocumentDB:
@@ -78,18 +55,39 @@ const getDatabaseOfferIdWithARM = async (databaseId: string): Promise<string> =>
       default:
         throw new Error(`Unsupported default experience type: ${defaultExperience}`);
     }
-
-    return rpResponse?.name;
   } catch (error) {
     if (error.code !== "NotFound") {
       throw error;
     }
+
     return undefined;
   }
-};
 
-const getDatabaseOfferIdWithSDK = async (databaseResourceId: string): Promise<string> => {
-  const offers = await readOffers();
-  const offer = offers.find(offer => offer.resource === databaseResourceId);
-  return offer?.id;
+  const resource = rpResponse?.properties?.resource;
+  if (resource) {
+    const offerId: string = rpResponse.name;
+    const minimumThroughput: number =
+      typeof resource.minimumThroughput === "string"
+        ? parseInt(resource.minimumThroughput)
+        : resource.minimumThroughput;
+    const autoscaleSettings = resource.autoscaleSettings;
+
+    if (autoscaleSettings) {
+      return {
+        id: offerId,
+        autoscaleMaxThroughput: autoscaleSettings.maxThroughput,
+        manualThroughput: undefined,
+        minimumThroughput
+      };
+    }
+
+    return {
+      id: offerId,
+      autoscaleMaxThroughput: undefined,
+      manualThroughput: resource.throughput,
+      minimumThroughput
+    };
+  }
+
+  return undefined;
 };

src/Common/dataAccess/readOfferWithSDK.ts

@@ -0,0 +1,29 @@
+import { HttpHeaders } from "../Constants";
+import { Offer } from "../../Contracts/DataModels";
+import { RequestOptions } from "@azure/cosmos/dist-esm";
+import { client } from "../CosmosClient";
+import { parseSDKOfferResponse } from "../OfferUtility";
+import { readOffers } from "./readOffers";
+
+export const readOfferWithSDK = async (offerId: string, resourceId: string): Promise<Offer> => {
+  if (!offerId) {
+    const offers = await readOffers();
+    const offer = offers.find(offer => offer.resource === resourceId);
+
+    if (!offer) {
+      return undefined;
+    }
+    offerId = offer.id;
+  }
+
+  const options: RequestOptions = {
+    initialHeaders: {
+      [HttpHeaders.populateCollectionThroughputInfo]: true
+    }
+  };
+  const response = await client()
+    .offer(offerId)
+    .read(options);
+
+  return parseSDKOfferResponse(response);
+};

src/Common/dataAccess/readOffers.ts

@@ -1,9 +1,9 @@
-import { Offer } from "../../Contracts/DataModels";
+import { SDKOfferDefinition } from "../../Contracts/DataModels";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError, getErrorMessage } from "../ErrorHandlingUtils";
 
-export const readOffers = async (): Promise<Offer[]> => {
+export const readOffers = async (): Promise<SDKOfferDefinition[]> => {
   const clearMessage = logConsoleProgress(`Querying offers`);
 
   try {

src/Common/dataAccess/updateOffer.ts

@@ -1,13 +1,14 @@
 import { AuthType } from "../../AuthType";
 import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import { HttpHeaders } from "../Constants";
-import { Offer, UpdateOfferParams } from "../../Contracts/DataModels";
+import { Offer, SDKOfferDefinition, UpdateOfferParams } from "../../Contracts/DataModels";
 import { OfferDefinition } from "@azure/cosmos";
 import { RequestOptions } from "@azure/cosmos/dist-esm";
 import { ThroughputSettingsUpdateParameters } from "../../Utils/arm/generatedClients/2020-04-01/types";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { parseSDKOfferResponse } from "../OfferUtility";
 import { readCollectionOffer } from "./readCollectionOffer";
 import { readDatabaseOffer } from "./readDatabaseOffer";
 import {
@@ -373,21 +374,21 @@ const createUpdateOfferBody = (params: UpdateOfferParams): ThroughputSettingsUpd
 };
 
 const updateOfferWithSDK = async (params: UpdateOfferParams): Promise<Offer> => {
-  const currentOffer = params.currentOffer;
-  const newOffer: Offer = {
+  const sdkOfferDefinition = params.currentOffer.offerDefinition;
+  const newOffer: SDKOfferDefinition = {
     content: {
       offerThroughput: undefined,
       offerIsRUPerMinuteThroughputEnabled: false
     },
     _etag: undefined,
     _ts: undefined,
-    _rid: currentOffer._rid,
-    _self: currentOffer._self,
-    id: currentOffer.id,
-    offerResourceId: currentOffer.offerResourceId,
-    offerVersion: currentOffer.offerVersion,
-    offerType: currentOffer.offerType,
-    resource: currentOffer.resource
+    _rid: sdkOfferDefinition._rid,
+    _self: sdkOfferDefinition._self,
+    id: sdkOfferDefinition.id,
+    offerResourceId: sdkOfferDefinition.offerResourceId,
+    offerVersion: sdkOfferDefinition.offerVersion,
+    offerType: sdkOfferDefinition.offerType,
+    resource: sdkOfferDefinition.resource
   };
 
   if (params.autopilotThroughput) {
@@ -415,5 +416,6 @@ const updateOfferWithSDK = async (params: UpdateOfferParams): Promise<Offer> =>
     .offer(params.currentOffer.id)
     // TODO Remove casting when SDK types are fixed (https://github.com/Azure/azure-sdk-for-js/issues/10660)
     .replace((newOffer as unknown) as OfferDefinition, options);
-  return sdkResponse?.resource;
+
+  return parseSDKOfferResponse(sdkResponse);
 };

src/Common/dataAccess/updateOfferThroughputBeyondLimit.test.ts

@@ -1,25 +0,0 @@
-import { updateOfferThroughputBeyondLimit } from "./updateOfferThroughputBeyondLimit";
-
-describe("updateOfferThroughputBeyondLimit", () => {
-  it("should call fetch", async () => {
-    window.fetch = jest.fn(() => {
-      return {
-        ok: true
-      };
-    });
-    window.dataExplorer = {
-      logConsoleData: jest.fn(),
-      deleteInProgressConsoleDataWithId: jest.fn()
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } as any;
-    await updateOfferThroughputBeyondLimit({
-      subscriptionId: "foo",
-      resourceGroup: "foo",
-      databaseAccountName: "foo",
-      databaseName: "foo",
-      throughput: 1000000000,
-      offerIsRUPerMinuteThroughputEnabled: false
-    });
-    expect(window.fetch).toHaveBeenCalled();
-  });
-});

src/Common/dataAccess/updateOfferThroughputBeyondLimit.ts

@@ -1,57 +0,0 @@
-import { Platform, configContext } from "../../ConfigContext";
-import { getAuthorizationHeader } from "../../Utils/AuthorizationUtils";
-import { AutoPilotOfferSettings } from "../../Contracts/DataModels";
-import { logConsoleProgress, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
-import { HttpHeaders } from "../Constants";
-import { handleError } from "../ErrorHandlingUtils";
-
-interface UpdateOfferThroughputRequest {
-  subscriptionId: string;
-  resourceGroup: string;
-  databaseAccountName: string;
-  databaseName: string;
-  collectionName?: string;
-  throughput: number;
-  offerIsRUPerMinuteThroughputEnabled: boolean;
-  offerAutopilotSettings?: AutoPilotOfferSettings;
-}
-
-export async function updateOfferThroughputBeyondLimit(request: UpdateOfferThroughputRequest): Promise<void> {
-  if (configContext.platform !== Platform.Portal) {
-    throw new Error("Updating throughput beyond specified limit is not supported on this platform");
-  }
-
-  const resourceDescriptionInfo = request.collectionName
-    ? `database ${request.databaseName} and container ${request.collectionName}`
-    : `database ${request.databaseName}`;
-
-  const clearMessage = logConsoleProgress(
-    `Requesting increase in throughput to ${request.throughput} for ${resourceDescriptionInfo}`
-  );
-
-  const url = `${configContext.BACKEND_ENDPOINT}/api/offerthroughputrequest/updatebeyondspecifiedlimit`;
-  const authorizationHeader = getAuthorizationHeader();
-
-  const response = await fetch(url, {
-    method: "POST",
-    body: JSON.stringify(request),
-    headers: { [authorizationHeader.header]: authorizationHeader.token, [HttpHeaders.contentType]: "application/json" }
-  });
-
-  if (response.ok) {
-    logConsoleInfo(
-      `Successfully requested an increase in throughput to ${request.throughput} for ${resourceDescriptionInfo}`
-    );
-    clearMessage();
-    return undefined;
-  }
-
-  const error = await response.json();
-  handleError(
-    error,
-    "updateOfferThroughputBeyondLimit",
-    `Failed to request an increase in throughput for ${request.throughput}`
-  );
-  clearMessage();
-  throw error;
-}

src/Contracts/DataModels.ts

@@ -208,12 +208,21 @@ export interface QueryMetrics {
   vmExecutionTime: any;
 }
 
-export interface Offer extends Resource {
+export interface Offer {
+  id: string;
+  autoscaleMaxThroughput: number;
+  manualThroughput: number;
+  minimumThroughput: number;
+  offerDefinition?: SDKOfferDefinition;
+  headers?: any;
+}
+
+export interface SDKOfferDefinition extends Resource {
   offerVersion?: string;
   offerType?: string;
   content?: {
     offerThroughput: number;
-    offerIsRUPerMinuteThroughputEnabled: boolean;
+    offerIsRUPerMinuteThroughputEnabled?: boolean;
     collectionThroughputInfo?: OfferThroughputInfo;
     offerAutopilotSettings?: AutoPilotOfferSettings;
   };
@@ -221,10 +230,6 @@ export interface Offer extends Resource {
   offerResourceId?: string;
 }
 
-export interface OfferWithHeaders extends Offer {
-  headers: any;
-}
-
 export interface CollectionQuotaInfo {
   storedProcedures: number;
   triggers: number;

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/Notebook/NotebookTerminalComponent.tsx

@@ -39,6 +39,10 @@ export class NotebookTerminalComponent extends React.Component<NotebookTerminalC
       params.set(TerminalQueryParams.TerminalEndpoint, terminalEndpoint);
     }
 
+    params.set("account","contoso-retail-mongodb");
+    params.set("port","10255");
+    //tofill
+    params.set("token","");
     return params;
   }
 

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

@@ -89,12 +89,11 @@ describe("SettingsComponent", () => {
   it("auto pilot helper functions pass on correct value", () => {
     const newCollection = { ...collection };
     newCollection.offer = ko.observable<DataModels.Offer>({
-      content: {
-        offerAutopilotSettings: {
-          maxThroughput: 10000
-        }
-      }
-    } as DataModels.Offer);
+      autoscaleMaxThroughput: 10000,
+      manualThroughput: undefined,
+      minimumThroughput: 400,
+      id: "test"
+    });
 
     const props = { ...baseProps };
     props.settingsTab.collection = newCollection;
@@ -187,21 +186,6 @@ describe("SettingsComponent", () => {
     expect(settingsComponentInstance.hasConflictResolution()).toEqual(true);
   });
 
-  it("isOfferReplacePending", () => {
-    let settingsComponentInstance = new SettingsComponent(baseProps);
-    expect(settingsComponentInstance.isOfferReplacePending()).toEqual(undefined);
-
-    const newCollection = { ...collection };
-    newCollection.offer = ko.observable({
-      headers: { "x-ms-offer-replace-pending": true }
-    } as DataModels.OfferWithHeaders);
-    const props = { ...baseProps };
-    props.settingsTab.collection = newCollection;
-
-    settingsComponentInstance = new SettingsComponent(props);
-    expect(settingsComponentInstance.isOfferReplacePending()).toEqual(true);
-  });
-
   it("save calls updateCollection, updateMongoDBCollectionThroughRP and updateOffer", async () => {
     const wrapper = shallow(<SettingsComponent {...baseProps} />);
     wrapper.setState({ isSubSettingsSaveable: true, isScaleSaveable: true, isMongoIndexingPolicySaveable: true });

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -2,28 +2,23 @@ import * as React from "react";
 import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
 import * as Constants from "../../../Common/Constants";
 import * as DataModels from "../../../Contracts/DataModels";
-import * as SharedConstants from "../../../Shared/Constants";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import DiscardIcon from "../../../../images/discard.svg";
 import SaveIcon from "../../../../images/save-cosmos.svg";
 import { traceStart, traceFailure, traceSuccess, trace } from "../../../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
-import { RequestOptions } from "@azure/cosmos/dist-esm";
 import Explorer from "../../Explorer";
 import { updateOffer } from "../../../Common/dataAccess/updateOffer";
 import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
-import { userContext } from "../../../UserContext";
-import { updateOfferThroughputBeyondLimit } from "../../../Common/dataAccess/updateOfferThroughputBeyondLimit";
 import SettingsTab from "../../Tabs/SettingsTabV2";
-import { throughputUnit } from "./SettingsRenderUtils";
+import { mongoIndexingPolicyAADError } from "./SettingsRenderUtils";
 import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
 import {
   MongoIndexingPolicyComponent,
   MongoIndexingPolicyComponentProps
 } from "./SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent";
 import {
-  getMaxRUs,
   hasDatabaseSharedThroughput,
   GeospatialConfigType,
   TtlType,
@@ -49,6 +44,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 +223,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()
@@ -275,19 +270,14 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   };
 
   private setAutoPilotStates = (): void => {
-    const offer = this.collection?.offer && this.collection.offer();
-    const offerAutopilotSettings = offer?.content?.offerAutopilotSettings;
+    const autoscaleMaxThroughput = this.collection?.offer()?.autoscaleMaxThroughput;
 
-    if (
-      offerAutopilotSettings &&
-      offerAutopilotSettings.maxThroughput &&
-      AutoPilotUtils.isValidAutoPilotThroughput(offerAutopilotSettings.maxThroughput)
-    ) {
+    if (autoscaleMaxThroughput && AutoPilotUtils.isValidAutoPilotThroughput(autoscaleMaxThroughput)) {
       this.setState({
         isAutoPilotSelected: true,
         wasAutopilotOriginallySet: true,
-        autoPilotThroughput: offerAutopilotSettings.maxThroughput,
-        autoPilotThroughputBaseline: offerAutopilotSettings.maxThroughput
+        autoPilotThroughput: autoscaleMaxThroughput,
+        autoPilotThroughputBaseline: autoscaleMaxThroughput
       });
     }
   };
@@ -305,12 +295,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     !!this.collection.conflictResolutionPolicy();
 
   public isOfferReplacePending = (): boolean => {
-    const offer = this.collection?.offer && this.collection.offer();
-    return (
-      offer &&
-      Object.keys(offer).find(value => value === "headers") &&
-      !!(offer as DataModels.OfferWithHeaders).headers[Constants.HttpHeaders.offerReplacePending]
-    );
+    return !!this.collection?.offer()?.headers?.[Constants.HttpHeaders.offerReplacePending];
   };
 
   public onSaveClick = async (): Promise<void> => {
@@ -448,103 +433,34 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       }
 
       if (this.state.isScaleSaveable) {
-        const newThroughput = this.state.throughput;
-        const newOffer: DataModels.Offer = { ...this.collection.offer() };
-        const originalThroughputValue: number = this.state.throughput;
-
-        if (newOffer.content) {
-          newOffer.content.offerThroughput = newThroughput;
-        } else {
-          newOffer.content = {
-            offerThroughput: newThroughput,
-            offerIsRUPerMinuteThroughputEnabled: false
-          };
-        }
-
-        const headerOptions: RequestOptions = { initialHeaders: {} };
-
-        if (this.state.isAutoPilotSelected) {
-          newOffer.content.offerAutopilotSettings = {
-            maxThroughput: this.state.autoPilotThroughput
-          };
-
-          // user has changed from provisioned --> autoscale
-          if (this.hasProvisioningTypeChanged()) {
-            headerOptions.initialHeaders[Constants.HttpHeaders.migrateOfferToAutopilot] = "true";
-            delete newOffer.content.offerAutopilotSettings;
-          } else {
-            delete newOffer.content.offerThroughput;
-          }
-        } else {
-          this.setState({
-            isAutoPilotSelected: false
-          });
-
-          // user has changed from autoscale --> provisioned
-          if (this.hasProvisioningTypeChanged()) {
-            headerOptions.initialHeaders[Constants.HttpHeaders.migrateOfferToManualThroughput] = "true";
-          } else {
-            delete newOffer.content.offerAutopilotSettings;
-          }
-        }
-
-        if (
-          getMaxRUs(this.collection, this.container) <=
-            SharedConstants.CollectionCreation.DefaultCollectionRUs1Million &&
-          newThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs1Million &&
-          this.container
-        ) {
-          const requestPayload = {
-            subscriptionId: userContext.subscriptionId,
-            databaseAccountName: userContext.databaseAccount.name,
-            resourceGroup: userContext.resourceGroup,
-            databaseName: this.collection.databaseId,
-            collectionName: this.collection.id(),
-            throughput: newThroughput,
-            offerIsRUPerMinuteThroughputEnabled: false
-          };
-
-          await updateOfferThroughputBeyondLimit(requestPayload);
-          this.collection.offer().content.offerThroughput = originalThroughputValue;
-          this.setState({
-            isScaleSaveable: false,
-            isScaleDiscardable: false,
-            throughput: originalThroughputValue,
-            throughputBaseline: originalThroughputValue,
-            initialNotification: {
-              description: `Throughput update for ${newThroughput} ${throughputUnit}`
-            } as DataModels.Notification
-          });
-        } else {
-          const updateOfferParams: DataModels.UpdateOfferParams = {
-            databaseId: this.collection.databaseId,
-            collectionId: this.collection.id(),
-            currentOffer: this.collection.offer(),
-            autopilotThroughput: this.state.isAutoPilotSelected ? this.state.autoPilotThroughput : undefined,
-            manualThroughput: this.state.isAutoPilotSelected ? undefined : newThroughput
-          };
-          if (this.hasProvisioningTypeChanged()) {
-            if (this.state.isAutoPilotSelected) {
-              updateOfferParams.migrateToAutoPilot = true;
-            } else {
-              updateOfferParams.migrateToManual = true;
-            }
-          }
-          const updatedOffer: DataModels.Offer = await updateOffer(updateOfferParams);
-          this.collection.offer(updatedOffer);
-          this.setState({ isScaleSaveable: false, isScaleDiscardable: false });
+        const updateOfferParams: DataModels.UpdateOfferParams = {
+          databaseId: this.collection.databaseId,
+          collectionId: this.collection.id(),
+          currentOffer: this.collection.offer(),
+          autopilotThroughput: this.state.isAutoPilotSelected ? this.state.autoPilotThroughput : undefined,
+          manualThroughput: this.state.isAutoPilotSelected ? undefined : this.state.throughput
+        };
+        if (this.hasProvisioningTypeChanged()) {
           if (this.state.isAutoPilotSelected) {
-            this.setState({
-              autoPilotThroughput: updatedOffer.content.offerAutopilotSettings.maxThroughput,
-              autoPilotThroughputBaseline: updatedOffer.content.offerAutopilotSettings.maxThroughput
-            });
+            updateOfferParams.migrateToAutoPilot = true;
           } else {
-            this.setState({
-              throughput: updatedOffer.content.offerThroughput,
-              throughputBaseline: updatedOffer.content.offerThroughput
-            });
+            updateOfferParams.migrateToManual = true;
           }
         }
+        const updatedOffer: DataModels.Offer = await updateOffer(updateOfferParams);
+        this.collection.offer(updatedOffer);
+        this.setState({ isScaleSaveable: false, isScaleDiscardable: false });
+        if (this.state.isAutoPilotSelected) {
+          this.setState({
+            autoPilotThroughput: updatedOffer.autoscaleMaxThroughput,
+            autoPilotThroughputBaseline: updatedOffer.autoscaleMaxThroughput
+          });
+        } else {
+          this.setState({
+            throughput: updatedOffer.manualThroughput,
+            throughputBaseline: updatedOffer.manualThroughput
+          });
+        }
       }
       this.container.isRefreshingExplorer(false);
       this.setBaseline();
@@ -809,7 +725,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       }
     }
 
-    const offerThroughput = this.collection?.offer && this.collection.offer()?.content?.offerThroughput;
+    const offerThroughput = this.collection.offer()?.manualThroughput;
     const changeFeedPolicy = this.collection.rawDataModel?.changeFeedPolicy
       ? ChangeFeedPolicyState.On
       : ChangeFeedPolicyState.Off;
@@ -1000,15 +916,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/SettingsRenderUtils.test.tsx

@@ -42,7 +42,7 @@ class SettingsRenderUtilsTestComponent extends React.Component {
         {updateThroughputDelayedApplyWarningMessage}
 
         {getThroughputApplyDelayedMessage(false, 1000, "RU/s", "sampleDb", "sampleCollection", 2000)}
-        {getThroughputApplyShortDelayMessage(false, 1000, "RU/s", "sampleDb", "sampleCollection", 2000)}
+        {getThroughputApplyShortDelayMessage(false, 1000, "RU/s", "sampleDb", "sampleCollection")}
         {getThroughputApplyLongDelayMessage(false, 1000, "RU/s", "sampleDb", "sampleCollection", 2000)}
 
         {getToolTipContainer(<span>Sample Text</span>)}

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -319,14 +319,13 @@ export const getThroughputApplyShortDelayMessage = (
   throughput: number,
   throughputUnit: string,
   databaseName: string,
-  collectionName: string,
-  targetThroughput: number
+  collectionName: string
 ): JSX.Element => (
   <Text styles={infoAndToolTipTextStyle} id="throughputApplyShortDelayMessage">
     A request to increase the throughput is currently in progress. This operation will take some time to complete.
     <br />
     Database: {databaseName}, Container: {collectionName}{" "}
-    {getCurrentThroughput(isAutoscale, throughput, throughputUnit, targetThroughput)}
+    {getCurrentThroughput(isAutoscale, throughput, throughputUnit)}
   </Text>
 );
 

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/SettingsSubComponents/ScaleComponent.test.tsx

@@ -44,7 +44,7 @@ describe("ScaleComponent", () => {
     } as DataModels.Notification
   };
 
-  it("renders with correct intiial notification", () => {
+  it("renders with correct initial notification", () => {
     let wrapper = shallow(<ScaleComponent {...baseProps} />);
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.exists(ThroughputInputAutoPilotV3Component)).toEqual(true);
@@ -54,16 +54,13 @@ describe("ScaleComponent", () => {
 
     const newCollection = { ...collection };
     const maxThroughput = 5000;
-    const targetMaxThroughput = 50000;
     newCollection.offer = ko.observable({
-      content: {
-        offerAutopilotSettings: {
-          maxThroughput: maxThroughput,
-          targetMaxThroughput: targetMaxThroughput
-        }
-      },
+      manualThroughput: undefined,
+      autoscaleMaxThroughput: maxThroughput,
+      minimumThroughput: 400,
+      id: "offer",
       headers: { "x-ms-offer-replace-pending": true }
-    } as DataModels.OfferWithHeaders);
+    });
     const newProps = {
       ...baseProps,
       initialNotification: undefined as DataModels.Notification,
@@ -73,7 +70,6 @@ describe("ScaleComponent", () => {
     expect(wrapper.exists("#throughputApplyShortDelayMessage")).toEqual(true);
     expect(wrapper.exists("#throughputApplyLongDelayMessage")).toEqual(false);
     expect(wrapper.find("#throughputApplyShortDelayMessage").html()).toContain(maxThroughput);
-    expect(wrapper.find("#throughputApplyShortDelayMessage").html()).toContain(targetMaxThroughput);
   });
 
   it("autoScale disabled", () => {
@@ -109,11 +105,6 @@ describe("ScaleComponent", () => {
     expect(scaleComponent.isAutoScaleEnabled()).toEqual(true);
   });
 
-  it("getMaxRUThroughputInputLimit", () => {
-    const scaleComponent = new ScaleComponent(baseProps);
-    expect(scaleComponent.getMaxRUThroughputInputLimit()).toEqual(40000);
-  });
-
   it("getThroughputTitle", () => {
     let scaleComponent = new ScaleComponent(baseProps);
     expect(scaleComponent.getThroughputTitle()).toEqual("Throughput (6,000 - unlimited RU/s)");
@@ -138,14 +129,8 @@ describe("ScaleComponent", () => {
 
   it("getThroughputWarningMessage", () => {
     const throughputBeyondLimit = SharedConstants.CollectionCreation.DefaultCollectionRUs1Million + 1000;
-    const throughputBeyondMaxRus = SharedConstants.CollectionCreation.DefaultCollectionRUs1Million - 1000;
-
     const newProps = { ...baseProps, container: nonNationalCloudContainer, throughput: throughputBeyondLimit };
-    let scaleComponent = new ScaleComponent(newProps);
+    const scaleComponent = new ScaleComponent(newProps);
     expect(scaleComponent.getThroughputWarningMessage().props.id).toEqual("updateThroughputBeyondLimitWarningMessage");
-
-    newProps.throughput = throughputBeyondMaxRus;
-    scaleComponent = new ScaleComponent(newProps);
-    expect(scaleComponent.getThroughputWarningMessage().props.id).toEqual("updateThroughputDelayedApplyWarningMessage");
   });
 });

src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx

@@ -12,10 +12,9 @@ import {
   throughputUnit,
   getThroughputApplyLongDelayMessage,
   getThroughputApplyShortDelayMessage,
-  updateThroughputBeyondLimitWarningMessage,
-  updateThroughputDelayedApplyWarningMessage
+  updateThroughputBeyondLimitWarningMessage
 } from "../SettingsRenderUtils";
-import { getMaxRUs, getMinRUs, hasDatabaseSharedThroughput } from "../SettingsUtils";
+import { hasDatabaseSharedThroughput } from "../SettingsUtils";
 import * as AutoPilotUtils from "../../../../Utils/AutoPilotUtils";
 import { Text, TextField, Stack, Label, MessageBar, MessageBarType } from "office-ui-fabric-react";
 import { configContext, Platform } from "../../../../ConfigContext";
@@ -62,11 +61,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
   };
 
   private getStorageCapacityTitle = (): JSX.Element => {
-    // Mongo container with system partition key still treat as "Fixed"
-    const isFixed =
-      !this.props.collection.partitionKey ||
-      (this.props.container.isPreferredApiMongoDB() && this.props.collection.partitionKey.systemKey);
-    const capacity: string = isFixed ? "Fixed" : "Unlimited";
+    const capacity: string = this.props.isFixedContainer ? "Fixed" : "Unlimited";
     return (
       <Stack {...titleAndInputStackProps}>
         <Label>Storage capacity</Label>
@@ -75,12 +70,26 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
     );
   };
 
-  public getMaxRUThroughputInputLimit = (): number => {
-    if (configContext.platform === Platform.Hosted && this.props.collection.partitionKey) {
-      return SharedConstants.CollectionCreation.DefaultCollectionRUs1Million;
+  public getMaxRUs = (): number => {
+    if (this.props.container?.isTryCosmosDBSubscription()) {
+      return Constants.TryCosmosExperience.maxRU;
     }
 
-    return getMaxRUs(this.props.collection, this.props.container);
+    if (this.props.isFixedContainer) {
+      return SharedConstants.CollectionCreation.MaxRUPerPartition;
+    }
+
+    return SharedConstants.CollectionCreation.DefaultCollectionRUs1Million;
+  };
+
+  public getMinRUs = (): number => {
+    if (this.props.container?.isTryCosmosDBSubscription()) {
+      return SharedConstants.CollectionCreation.DefaultCollectionRUs400;
+    }
+
+    return (
+      this.props.collection.offer()?.minimumThroughput || SharedConstants.CollectionCreation.DefaultCollectionRUs400
+    );
   };
 
   public getThroughputTitle = (): string => {
@@ -88,11 +97,8 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
       return AutoPilotUtils.getAutoPilotHeaderText();
     }
 
-    const minThroughput: string = getMinRUs(this.props.collection, this.props.container).toLocaleString();
-    const maxThroughput: string =
-      this.canThroughputExceedMaximumValue() && !this.props.isFixedContainer
-        ? "unlimited"
-        : getMaxRUs(this.props.collection, this.props.container).toLocaleString();
+    const minThroughput: string = this.getMinRUs().toLocaleString();
+    const maxThroughput: string = !this.props.isFixedContainer ? "unlimited" : this.getMaxRUs().toLocaleString();
     return `Throughput (${minThroughput} - ${maxThroughput} RU/s)`;
   };
 
@@ -109,26 +115,15 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
       return this.getLongDelayMessage();
     }
 
-    const offer = this.props.collection?.offer && this.props.collection.offer();
-    if (
-      offer &&
-      Object.keys(offer).find(value => {
-        return value === "headers";
-      }) &&
-      !!(offer as DataModels.OfferWithHeaders).headers[Constants.HttpHeaders.offerReplacePending]
-    ) {
-      const throughput = offer?.content?.offerAutopilotSettings?.maxThroughput;
-
-      const targetThroughput =
-        offer.content?.offerAutopilotSettings?.targetMaxThroughput || offer?.content?.offerThroughput;
-
+    const offer = this.props.collection?.offer();
+    if (offer?.headers?.[Constants.HttpHeaders.offerReplacePending]) {
+      const throughput = offer.manualThroughput || offer.autoscaleMaxThroughput;
       return getThroughputApplyShortDelayMessage(
         this.props.isAutoPilotSelected,
         throughput,
         throughputUnit,
         this.props.collection.databaseId,
-        this.props.collection.id(),
-        targetThroughput
+        this.props.collection.id()
       );
     }
 
@@ -138,21 +133,12 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
   public getThroughputWarningMessage = (): JSX.Element => {
     const throughputExceedsBackendLimits: boolean =
       this.canThroughputExceedMaximumValue() &&
-      getMaxRUs(this.props.collection, this.props.container) <=
-        SharedConstants.CollectionCreation.DefaultCollectionRUs1Million &&
       this.props.throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs1Million;
 
     if (throughputExceedsBackendLimits && !!this.props.collection.partitionKey && !this.props.isFixedContainer) {
       return updateThroughputBeyondLimitWarningMessage;
     }
 
-    const throughputExceedsMaxValue: boolean =
-      !this.isEmulator && this.props.throughput > getMaxRUs(this.props.collection, this.props.container);
-
-    if (throughputExceedsMaxValue && !!this.props.collection.partitionKey && !this.props.isFixedContainer) {
-      return updateThroughputDelayedApplyWarningMessage;
-    }
-
     return undefined;
   };
 
@@ -183,8 +169,8 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
       throughput={this.props.throughput}
       throughputBaseline={this.props.throughputBaseline}
       onThroughputChange={this.props.onThroughputChange}
-      minimum={getMinRUs(this.props.collection, this.props.container)}
-      maximum={this.getMaxRUThroughputInputLimit()}
+      minimum={this.getMinRUs()}
+      maximum={this.getMaxRUs()}
       isEnabled={!hasDatabaseSharedThroughput(this.props.collection)}
       canExceedMaximumValue={this.canThroughputExceedMaximumValue()}
       label={this.getThroughputTitle()}

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ScaleComponent.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ScaleComponent renders with correct intiial notification 1`] = `
+exports[`ScaleComponent renders with correct initial notification 1`] = `
 <Stack
   tokens={
     Object {
@@ -48,7 +48,7 @@ exports[`ScaleComponent renders with correct intiial notification 1`] = `
       label="Throughput (6,000 - unlimited RU/s)"
       maxAutoPilotThroughput={4000}
       maxAutoPilotThroughputBaseline={4000}
-      maximum={40000}
+      maximum={1000000}
       minimum={6000}
       onAutoPilotSelected={[Function]}
       onMaxAutoPilotThroughputChange={[Function]}

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

@@ -1,7 +1,5 @@
-import { collection, container } from "./TestUtils";
+import { collection } from "./TestUtils";
 import {
-  getMaxRUs,
-  getMinRUs,
   getMongoIndexType,
   getMongoNotification,
   getSanitizedInputValue,
@@ -23,16 +21,6 @@ import * as ViewModels from "../../../Contracts/ViewModels";
 import ko from "knockout";
 
 describe("SettingsUtils", () => {
-  it("getMaxRUs", () => {
-    expect(collection.offer().content.collectionThroughputInfo.numPhysicalPartitions).toEqual(4);
-    expect(getMaxRUs(collection, container)).toEqual(40000);
-  });
-
-  it("getMinRUs", () => {
-    expect(collection.offer().content.collectionThroughputInfo.numPhysicalPartitions).toEqual(4);
-    expect(getMinRUs(collection, container)).toEqual(6000);
-  });
-
   it("hasDatabaseSharedThroughput", () => {
     expect(hasDatabaseSharedThroughput(collection)).toEqual(undefined);
 

src/Explorer/Controls/Settings/SettingsUtils.tsx

@@ -1,10 +1,6 @@
 import * as ViewModels from "../../../Contracts/ViewModels";
 import * as DataModels from "../../../Contracts/DataModels";
 import * as Constants from "../../../Common/Constants";
-import * as SharedConstants from "../../../Shared/Constants";
-import * as PricingUtils from "../../../Utils/PricingUtils";
-
-import Explorer from "../../Explorer";
 import { MongoIndex } from "../../../Utils/arm/generatedClients/2020-04-01/types";
 
 const zeroValue = 0;
@@ -71,57 +67,6 @@ export const hasDatabaseSharedThroughput = (collection: ViewModels.Collection):
   return database?.isDatabaseShared() && !collection.offer();
 };
 
-export const getMaxRUs = (collection: ViewModels.Collection, container: Explorer): number => {
-  const isTryCosmosDBSubscription = container?.isTryCosmosDBSubscription() || false;
-  if (isTryCosmosDBSubscription) {
-    return Constants.TryCosmosExperience.maxRU;
-  }
-
-  const numPartitionsFromOffer: number =
-    collection?.offer && collection.offer()?.content?.collectionThroughputInfo?.numPhysicalPartitions;
-
-  const numPartitionsFromQuotaInfo: number = collection?.quotaInfo()?.numPartitions;
-
-  const numPartitions = numPartitionsFromOffer ?? numPartitionsFromQuotaInfo ?? 1;
-
-  return SharedConstants.CollectionCreation.MaxRUPerPartition * numPartitions;
-};
-
-export const getMinRUs = (collection: ViewModels.Collection, container: Explorer): number => {
-  const isTryCosmosDBSubscription = container?.isTryCosmosDBSubscription();
-  if (isTryCosmosDBSubscription) {
-    return SharedConstants.CollectionCreation.DefaultCollectionRUs400;
-  }
-
-  const offerContent = collection?.offer && collection.offer()?.content;
-
-  if (offerContent?.offerAutopilotSettings) {
-    return SharedConstants.CollectionCreation.DefaultCollectionRUs400;
-  }
-
-  const collectionThroughputInfo: DataModels.OfferThroughputInfo = offerContent?.collectionThroughputInfo;
-
-  if (collectionThroughputInfo?.minimumRUForCollection > 0) {
-    return collectionThroughputInfo.minimumRUForCollection;
-  }
-
-  const numPartitions = collectionThroughputInfo?.numPhysicalPartitions ?? collection.quotaInfo()?.numPartitions;
-
-  if (!numPartitions || numPartitions === 1) {
-    return SharedConstants.CollectionCreation.DefaultCollectionRUs400;
-  }
-
-  const baseRU = SharedConstants.CollectionCreation.DefaultCollectionRUs400;
-
-  const quotaInKb = collection.quotaInfo().collectionSize;
-  const quotaInGb = PricingUtils.usageInGB(quotaInKb);
-
-  const perPartitionGBQuota: number = Math.max(10, quotaInGb / numPartitions);
-  const baseRUbyPartitions: number = ((numPartitions * perPartitionGBQuota) / 10) * 100;
-
-  return Math.max(baseRU, baseRUbyPartitions);
-};
-
 export const parseConflictResolutionMode = (modeFromBackend: string): DataModels.ConflictResolutionMode => {
   // Backend can contain different casing as it does case-insensitive comparisson
   if (!modeFromBackend) {

src/Explorer/Controls/Settings/TestUtils.tsx

@@ -20,15 +20,11 @@ export const collection = ({
   uniqueKeyPolicy: {} as DataModels.UniqueKeyPolicy,
   quotaInfo: ko.observable<DataModels.CollectionQuotaInfo>({} as DataModels.CollectionQuotaInfo),
   offer: ko.observable<DataModels.Offer>({
-    content: {
-      offerThroughput: 10000,
-      offerIsRUPerMinuteThroughputEnabled: false,
-      collectionThroughputInfo: {
-        minimumRUForCollection: 6000,
-        numPhysicalPartitions: 4
-      } as DataModels.OfferThroughputInfo
-    }
-  } as DataModels.Offer),
+    autoscaleMaxThroughput: undefined,
+    manualThroughput: 10000,
+    minimumThroughput: 6000,
+    id: "offer"
+  }),
   conflictResolutionPolicy: ko.observable<DataModels.ConflictResolutionPolicy>(
     {} as DataModels.ConflictResolutionPolicy
   ),

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/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap

@@ -227,7 +227,7 @@ exports[`SettingsUtils functions render 1`] = `
     , Container: 
     sampleCollection
      
-    , Current manual throughput: 1000 RU/s, Target manual throughput: 2000
+    , Current manual throughput: 1000 RU/s
   </Text>
   <Text
     id="throughputApplyLongDelayMessage"

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/Notebook/NotebookComponent/epics.ts

@@ -350,7 +350,9 @@ export const launchWebSocketKernelEpic = (
         } as any,
         name: "",
         path: content.filepath.replace(/^\/+/g, ""),
-        type: "notebook"
+        type: "notebook",
+        endpoint:"https://dech-notebooks-demo-7.documents.azure.com:443/",
+        token:"" //to fill
       };
 
       return sessions.create(serverConfig, sessionPayload).pipe(

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/DatabaseSettingsTab.ts

@@ -16,8 +16,6 @@ import { RequestOptions } from "@azure/cosmos/dist-esm";
 import Explorer from "../Explorer";
 import { updateOffer } from "../../Common/dataAccess/updateOffer";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
-import { userContext } from "../../UserContext";
-import { updateOfferThroughputBeyondLimit } from "../../Common/dataAccess/updateOfferThroughputBeyondLimit";
 import { configContext, Platform } from "../../ConfigContext";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
 
@@ -35,11 +33,6 @@ const currentThroughput: (isAutoscale: boolean, throughput: number) => string =
     ? `Current autoscale throughput: ${Math.round(throughput / 10)} - ${throughput} RU/s`
     : `Current manual throughput: ${throughput} RU/s`;
 
-const throughputApplyDelayedMessage = (isAutoscale: boolean, throughput: number, databaseName: string) =>
-  `The request to increase the throughput has successfully been submitted. 
-  This operation will take 1-3 business days to complete. View the latest status in Notifications.<br />
-  Database: ${databaseName}, ${currentThroughput(isAutoscale, throughput)}`;
-
 const throughputApplyShortDelayMessage = (isAutoscale: boolean, throughput: number, databaseName: string) =>
   `A request to increase the throughput is currently in progress. 
   This operation will take some time to complete.<br />
@@ -66,8 +59,8 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
   public displayedError: ko.Observable<string>;
   public isTemplateReady: ko.Observable<boolean>;
   public minRUAnotationVisible: ko.Computed<boolean>;
-  public minRUs: ko.Computed<number>;
-  public maxRUs: ko.Computed<number>;
+  public minRUs: ko.Observable<number>;
+  public maxRUs: ko.Observable<number>;
   public maxRUsText: ko.PureComputed<string>;
   public maxRUThroughputInputLimit: ko.Computed<number>;
   public notificationStatusInfo: ko.Observable<string>;
@@ -92,7 +85,7 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
 
   private _hasProvisioningTypeChanged: ko.Computed<boolean>;
   private _wasAutopilotOriginallySet: ko.Observable<boolean>;
-  private _offerReplacePending: ko.Computed<boolean>;
+  private _offerReplacePending: ko.Observable<boolean>;
   private container: Explorer;
 
   constructor(options: ViewModels.TabOptions) {
@@ -111,15 +104,14 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
     this._wasAutopilotOriginallySet = ko.observable(false);
     this.isAutoPilotSelected = editable.observable(false);
     this.autoPilotThroughput = editable.observable<number>();
-    const offer = this.database && this.database.offer && this.database.offer();
-    const offerAutopilotSettings = offer && offer.content && offer.content.offerAutopilotSettings;
     this.userCanChangeProvisioningTypes = ko.observable(true);
 
-    if (offerAutopilotSettings && offerAutopilotSettings.maxThroughput) {
-      if (AutoPilotUtils.isValidAutoPilotThroughput(offerAutopilotSettings.maxThroughput)) {
+    const autoscaleMaxThroughput = this.database?.offer()?.autoscaleMaxThroughput;
+    if (autoscaleMaxThroughput) {
+      if (AutoPilotUtils.isValidAutoPilotThroughput(autoscaleMaxThroughput)) {
         this._wasAutopilotOriginallySet(true);
         this.isAutoPilotSelected(true);
-        this.autoPilotThroughput(offerAutopilotSettings.maxThroughput);
+        this.autoPilotThroughput(autoscaleMaxThroughput);
       }
     }
 
@@ -205,45 +197,15 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
       return this._hasProvisioningTypeChanged() && !this._wasAutopilotOriginallySet();
     });
 
-    this.minRUs = ko.computed<number>(() => {
-      const offerContent =
-        this.database && this.database.offer && this.database.offer() && this.database.offer().content;
-
-      // TODO: backend is returning 1,000,000 as min throughput which seems wrong
-      // Setting to min throughput to not block and let the backend pass or fail
-      if (offerContent && offerContent.offerAutopilotSettings) {
-        return 400;
-      }
-
-      const collectionThroughputInfo: DataModels.OfferThroughputInfo =
-        offerContent && offerContent.collectionThroughputInfo;
-
-      if (collectionThroughputInfo && !!collectionThroughputInfo.minimumRUForCollection) {
-        return collectionThroughputInfo.minimumRUForCollection;
-      }
-      const throughputDefaults = this.container.collectionCreationDefaults.throughput;
-      return throughputDefaults.unlimitedmin;
-    });
+    this.minRUs = ko.observable<number>(
+      this.database.offer()?.minimumThroughput || this.container.collectionCreationDefaults.throughput.unlimitedmin
+    );
 
     this.minRUAnotationVisible = ko.computed<boolean>(() => {
       return PricingUtils.isLargerThanDefaultMinRU(this.minRUs());
     });
 
-    this.maxRUs = ko.computed<number>(() => {
-      const collectionThroughputInfo: DataModels.OfferThroughputInfo =
-        this.database &&
-        this.database.offer &&
-        this.database.offer() &&
-        this.database.offer().content &&
-        this.database.offer().content.collectionThroughputInfo;
-      const numPartitions = collectionThroughputInfo && collectionThroughputInfo.numPhysicalPartitions;
-      if (!!numPartitions) {
-        return SharedConstants.CollectionCreation.MaxRUPerPartition * numPartitions;
-      }
-
-      const throughputDefaults = this.container.collectionCreationDefaults.throughput;
-      return throughputDefaults.unlimitedmax;
-    });
+    this.maxRUs = ko.observable<number>(this.container.collectionCreationDefaults.throughput.unlimitedmax);
 
     this.maxRUThroughputInputLimit = ko.pureComputed<number>(() => {
       if (configContext.platform === Platform.Hosted) {
@@ -269,37 +231,23 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
       return this.throughputTitle() + this.requestUnitsUsageCost();
     });
     this.pendingNotification = ko.observable<DataModels.Notification>();
-    this._offerReplacePending = ko.pureComputed<boolean>(() => {
-      const offer = this.database && this.database.offer && this.database.offer();
-      return (
-        offer &&
-        offer.hasOwnProperty("headers") &&
-        !!(offer as DataModels.OfferWithHeaders).headers[Constants.HttpHeaders.offerReplacePending]
-      );
-    });
+    this._offerReplacePending = ko.observable<boolean>(
+      !!this.database.offer()?.headers?.[Constants.HttpHeaders.offerReplacePending]
+    );
     this.notificationStatusInfo = ko.observable<string>("");
     this.shouldShowNotificationStatusPrompt = ko.computed<boolean>(() => this.notificationStatusInfo().length > 0);
     this.warningMessage = ko.computed<string>(() => {
-      const offer = this.database && this.database.offer && this.database.offer();
-
       if (this.overrideWithProvisionedThroughputSettings()) {
         return AutoPilotUtils.manualToAutoscaleDisclaimer;
       }
 
-      if (
-        offer &&
-        offer.hasOwnProperty("headers") &&
-        !!(offer as DataModels.OfferWithHeaders).headers[Constants.HttpHeaders.offerReplacePending]
-      ) {
-        const throughput = offer.content.offerAutopilotSettings
-          ? offer.content.offerAutopilotSettings.maxThroughput
-          : offer.content.offerThroughput;
-
+      const offer = this.database.offer();
+      if (offer?.headers?.[Constants.HttpHeaders.offerReplacePending]) {
+        const throughput = offer.manualThroughput || offer.autoscaleMaxThroughput;
         return throughputApplyShortDelayMessage(this.isAutoPilotSelected(), throughput, this.database.id());
       }
 
       if (
-        this.maxRUs() <= SharedConstants.CollectionCreation.DefaultCollectionRUs1Million &&
         this.throughput() > SharedConstants.CollectionCreation.DefaultCollectionRUs1Million &&
         this.canThroughputExceedMaximumValue()
       ) {
@@ -432,60 +380,26 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
     const headerOptions: RequestOptions = { initialHeaders: {} };
 
     try {
-      if (this.isAutoPilotSelected()) {
-        const updateOfferParams: DataModels.UpdateOfferParams = {
-          databaseId: this.database.id(),
-          currentOffer: this.database.offer(),
-          autopilotThroughput: this.autoPilotThroughput(),
-          manualThroughput: undefined,
-          migrateToAutoPilot: this._hasProvisioningTypeChanged()
-        };
+      const updateOfferParams: DataModels.UpdateOfferParams = {
+        databaseId: this.database.id(),
+        currentOffer: this.database.offer(),
+        autopilotThroughput: this.isAutoPilotSelected() ? this.autoPilotThroughput() : undefined,
+        manualThroughput: this.isAutoPilotSelected() ? undefined : this.throughput()
+      };
 
-        const updatedOffer: DataModels.Offer = await updateOffer(updateOfferParams);
-        this.database.offer(updatedOffer);
-        this.database.offer.valueHasMutated();
-        this._wasAutopilotOriginallySet(this.isAutoPilotSelected());
-      } else {
-        if (this.throughput.editableIsDirty() || this.isAutoPilotSelected.editableIsDirty()) {
-          const originalThroughputValue = this.throughput.getEditableOriginalValue();
-          const newThroughput = this.throughput();
-
-          if (
-            this.canThroughputExceedMaximumValue() &&
-            this.maxRUs() <= SharedConstants.CollectionCreation.DefaultCollectionRUs1Million &&
-            this.throughput() > SharedConstants.CollectionCreation.DefaultCollectionRUs1Million
-          ) {
-            const requestPayload = {
-              subscriptionId: userContext.subscriptionId,
-              databaseAccountName: userContext.databaseAccount.name,
-              resourceGroup: userContext.resourceGroup,
-              databaseName: this.database.id(),
-              throughput: newThroughput,
-              offerIsRUPerMinuteThroughputEnabled: false
-            };
-            await updateOfferThroughputBeyondLimit(requestPayload);
-            this.database.offer().content.offerThroughput = originalThroughputValue;
-            this.throughput(originalThroughputValue);
-            this.notificationStatusInfo(
-              throughputApplyDelayedMessage(this.isAutoPilotSelected(), newThroughput, this.database.id())
-            );
-            this.throughput.valueHasMutated(); // force component re-render
-          } else {
-            const updateOfferParams: DataModels.UpdateOfferParams = {
-              databaseId: this.database.id(),
-              currentOffer: this.database.offer(),
-              autopilotThroughput: undefined,
-              manualThroughput: newThroughput,
-              migrateToManual: this._hasProvisioningTypeChanged()
-            };
-
-            const updatedOffer = await updateOffer(updateOfferParams);
-            this._wasAutopilotOriginallySet(this.isAutoPilotSelected());
-            this.database.offer(updatedOffer);
-            this.database.offer.valueHasMutated();
-          }
+      if (this._hasProvisioningTypeChanged()) {
+        if (this.isAutoPilotSelected()) {
+          updateOfferParams.migrateToAutoPilot = true;
+        } else {
+          updateOfferParams.migrateToManual = true;
         }
       }
+
+      const updatedOffer: DataModels.Offer = await updateOffer(updateOfferParams);
+      this.database.offer(updatedOffer);
+      this.database.offer.valueHasMutated();
+      this._setBaseline();
+      this._wasAutopilotOriginallySet(this.isAutoPilotSelected());
     } catch (error) {
       this.container.isRefreshingExplorer(false);
       this.isExecutionError(true);
@@ -527,15 +441,10 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
 
   private _setBaseline() {
     const offer = this.database && this.database.offer && this.database.offer();
-    const offerThroughput = offer.content && offer.content.offerThroughput;
-    const offerAutopilotSettings = offer && offer.content && offer.content.offerAutopilotSettings;
-
-    this.throughput.setBaseline(offerThroughput);
+    this.isAutoPilotSelected.setBaseline(AutoPilotUtils.isValidAutoPilotThroughput(offer.autoscaleMaxThroughput));
+    this.autoPilotThroughput.setBaseline(offer.autoscaleMaxThroughput);
+    this.throughput.setBaseline(offer.manualThroughput);
     this.userCanChangeProvisioningTypes(true);
-
-    const maxThroughputForAutoPilot = offerAutopilotSettings && offerAutopilotSettings.maxThroughput;
-    this.isAutoPilotSelected.setBaseline(AutoPilotUtils.isValidAutoPilotThroughput(maxThroughputForAutoPilot));
-    this.autoPilotThroughput.setBaseline(maxThroughputForAutoPilot || AutoPilotUtils.minAutoPilotThroughput);
   }
 
   protected getTabsButtons(): CommandButtonComponentProps[] {

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 = (
@@ -1361,8 +1295,7 @@ export default class Collection implements ViewModels.Collection {
             databaseAccountName: this.container.databaseAccount().name,
             databaseName: this.databaseId,
             collectionName: this.id(),
-            defaultExperience: this.container.defaultExperience(),
-            offerVersion: this.offer()?.offerVersion
+            defaultExperience: this.container.defaultExperience()
           },
           startKey
         );

src/Terminal/index.ts

@@ -23,10 +23,14 @@ const createServerSettings = (urlVars: { [key: string]: string }): ServerConnect
   let headers: HeadersInit;
   if (urlVars.hasOwnProperty(TerminalQueryParams.TerminalEndpoint)) {
     body = JSON.stringify({
-      endpoint: urlVars[TerminalQueryParams.TerminalEndpoint]
+      endpoint: urlVars[TerminalQueryParams.TerminalEndpoint],
+      account:"contoso-retail-mongodb",
+      port: "10255",
+      token:"" //tofill
     });
     headers = {
       [HttpHeaders.contentType]: "application/json"
+      //"Access-Control-Allow-Origin": "https://localhost:5001"
     };
   }
 

src/Utils/AutoPilotUtils.ts

@@ -7,15 +7,6 @@ export const minAutoPilotThroughput = 4000;
 
 export const autoPilotIncrementStep = 1000;
 
-export function isValidV3AutoPilotOffer(offer: Offer): boolean {
-  const maxThroughput =
-    offer &&
-    offer.content &&
-    offer.content.offerAutopilotSettings &&
-    offer.content.offerAutopilotSettings.maxThroughput;
-  return isValidAutoPilotThroughput(maxThroughput);
-}
-
 export function isValidAutoPilotThroughput(maxThroughput: number): boolean {
   if (!maxThroughput) {
     return false;

src/Utils/OfferUtils.test.ts

@@ -1,51 +0,0 @@
-import * as Constants from "../../src/Common/Constants";
-import * as DataModels from "../../src/Contracts/DataModels";
-import { OfferUtils } from "../../src/Utils/OfferUtils";
-
-describe("OfferUtils tests", () => {
-  const offerV1: DataModels.Offer = {
-    _rid: "",
-    _self: "",
-    _ts: 0,
-    _etag: "",
-    id: "v1",
-    offerVersion: Constants.OfferVersions.V1,
-    offerType: "Standard",
-    offerResourceId: "",
-    content: null,
-    resource: ""
-  };
-
-  const offerV2: DataModels.Offer = {
-    _rid: "",
-    _self: "",
-    _ts: 0,
-    _etag: "",
-    id: "v1",
-    offerVersion: Constants.OfferVersions.V2,
-    offerType: "Standard",
-    offerResourceId: "",
-    content: null,
-    resource: ""
-  };
-
-  describe("isOfferV1()", () => {
-    it("should return true for V1", () => {
-      expect(OfferUtils.isOfferV1(offerV1)).toBeTruthy();
-    });
-
-    it("should return false for V2", () => {
-      expect(OfferUtils.isOfferV1(offerV2)).toBeFalsy();
-    });
-  });
-
-  describe("isNotOfferV1()", () => {
-    it("should return true for V2", () => {
-      expect(OfferUtils.isNotOfferV1(offerV2)).toBeTruthy();
-    });
-
-    it("should return false for V1", () => {
-      expect(OfferUtils.isNotOfferV1(offerV1)).toBeFalsy();
-    });
-  });
-});

src/Utils/OfferUtils.ts

@@ -1,12 +0,0 @@
-import * as Constants from "../Common/Constants";
-import * as DataModels from "../Contracts/DataModels";
-
-export class OfferUtils {
-  public static isOfferV1(offer: DataModels.Offer): boolean {
-    return !offer || offer.offerVersion !== Constants.OfferVersions.V2;
-  }
-
-  public static isNotOfferV1(offer: DataModels.Offer): boolean {
-    return !OfferUtils.isOfferV1(offer);
-  }
-}

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__/**/*"]
 }

tsconfig.strict.json

@@ -76,7 +76,6 @@
     "./src/Utils/BlobUtils.ts",
     "./src/Utils/GitHubUtils.ts",
     "./src/Utils/MessageValidation.ts",
-    "./src/Utils/OfferUtils.ts",
     "./src/Utils/StringUtils.ts",
     "./src/Utils/WindowUtils.ts",
     "./src/Utils/arm/generatedClients/2020-04-01/types.ts",

webpack.config.js

@@ -92,7 +92,7 @@ module.exports = function(env = {}, argv = {}) {
   const rules = [fontRule, lessRule, imagesRule, cssRule, htmlRule, typescriptRule];
   const envVars = {
     GIT_SHA: gitSha,
-    PORT: process.env.PORT || "1234"
+    PORT: process.env.PORT || "2223"
   };
 
   if (mode === "production") {
@@ -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",