Refactored Settings Tab (#161)

* added  SettingsV2 Tab

* lint changes

* foxed failing test

* Addressed PR comments

- removed dangerouslySetInnerHtml
- removed underscore dependency
- added AccessibleElement
- removed unnecesary exceptions to linting

* split render into separate functions

- removed sinon in test
- Added some enums to replace constant strings
- removed dangerously set inner html
- made autopilot input as StatefulValue

* add settingscomponent snapshot

* fixed linting errors

* fixed errors

* addressed PR comments

- Moved StatefulValue to new class
- Split render to more functions for throughputInputComponents

* Added sub components

- Added tests for SettingsRenderUtls
- Added empty test files for adding tests later

* Moved all inputs to fluent UI

- removed rupm
- added reusable styles

* Added Tabs

- Added ToolTipLabel component
- Removed toggleables for individual components
- Removed accessible elements
- Added IndexingPolicyComponent

* Added more tests

* Addressed PR comments

* Moved Label radio buttons to choicegroup

* fixed lint errors

* Removed StatefulValue

- Moved conflict res tab to the end
- Added styling for autpilot radiobuttons

* fixed linting errors

* fix bugs from merge to master

* fixed formatting issue

* Addressed PR comments

- Added unit tests for smaller methods within each component

* fixed linting errors

* removed redundant snapshots

* removed empty line

* made separate props objects for subcomponents

* Moved dirty checks to sub components

* Made indesing policy component height = 80% of view port

- modified auto pilot v3 messages
- Added Fluent UI tolltip
-

* Moved warning messages inline

* moved conflict res helpers out

* fixed bugs

* added stack style for message

* fixed tests

* Added tests

* fixed linting and format errors

* undid changes

* more edits

* fixed compile errors

* fixed compile errors

* fixed errors

* fixed bug with save and discard buttons

* fixed compile errors

* addressed PR comments

src/Explorer/Tree/Collection.ts

@@ -12,17 +12,13 @@ import { createDocument } from "../../Common/DocumentClientUtilityBase";
 import { readCollectionOffer } from "../../Common/dataAccess/readCollectionOffer";
 import { readCollectionQuotaInfo } from "../../Common/dataAccess/readCollectionQuotaInfo";
 import * as Logger from "../../Common/Logger";
-import { configContext } from "../../ConfigContext";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { PlatformType } from "../../PlatformType";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../UserContext";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
-import { OfferUtils } from "../../Utils/OfferUtils";
 import { StartUploadMessageParams, UploadDetails, UploadDetailsRecord } from "../../workers/upload/definitions";
-import Explorer from "../Explorer";
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import { CassandraAPIDataClient, CassandraTableKey, CassandraTableKeys } from "../Tables/TableDataClient";
 import ConflictsTab from "../Tabs/ConflictsTab";
@@ -33,12 +29,17 @@ 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";
 import Trigger from "./Trigger";
 import UserDefinedFunction from "./UserDefinedFunction";
+import { configContext } from "../../ConfigContext";
+import Explorer from "../Explorer";
+import { userContext } from "../../UserContext";
+import TabsBase from "../Tabs/TabsBase";
 
 export default class Collection implements ViewModels.Collection {
   public nodeKind: string;
@@ -562,33 +563,49 @@ export default class Collection implements ViewModels.Collection {
       return tab.collection && tab.collection.rid === this.rid;
     });
 
-    let settingsTab: SettingsTab = matchingTabs && (matchingTabs[0] as SettingsTab);
+    const traceStartData = {
+      databaseAccountName: this.container.databaseAccount().name,
+      databaseName: this.databaseId,
+      collectionName: this.id(),
+      defaultExperience: this.container.defaultExperience(),
+      dataExplorerArea: Constants.Areas.Tab,
+      tabTitle: tabTitle
+    };
+
+    const settingsTabOptions: ViewModels.TabOptions = {
+      tabKind: undefined,
+      title: !this.offer() ? "Settings" : "Scale & Settings",
+      tabPath: "",
+      collection: this,
+      node: this,
+      selfLink: this.self,
+      hashLocation: `${Constants.HashRoutePrefixes.collectionsWithIds(this.databaseId, this.id())}/settings`,
+      isActive: ko.observable(false),
+      onUpdateTabsButtons: this.container.onUpdateTabsButtons
+    };
+
+    const isSettingsV2Enabled = this.container.isSettingsV2Enabled();
+    var settingsTab: TabsBase;
+    if (isSettingsV2Enabled) {
+      settingsTab = matchingTabs && (matchingTabs[0] as SettingsTabV2);
+    } else {
+      settingsTab = matchingTabs && (matchingTabs[0] as SettingsTab);
+    }
+
     if (!settingsTab) {
-      const startKey: number = TelemetryProcessor.traceStart(Action.Tab, {
-        databaseAccountName: this.container.databaseAccount().name,
-        databaseName: this.databaseId,
-        collectionName: this.id(),
-        defaultExperience: this.container.defaultExperience(),
-        dataExplorerArea: Constants.Areas.Tab,
-        tabTitle: tabTitle
-      });
+      const startKey: number = TelemetryProcessor.traceStart(Action.Tab, traceStartData);
+      settingsTabOptions.onLoadStartKey = startKey;
 
       pendingNotificationsPromise.then(
         (data: any) => {
           const pendingNotification: DataModels.Notification = data && data[0];
-          settingsTab = new SettingsTab({
-            tabKind: ViewModels.CollectionTabKind.Settings,
-            title: tabTitle,
-            tabPath: "",
-
-            collection: this,
-            node: this,
-            selfLink: this.self,
-            hashLocation: `${Constants.HashRoutePrefixes.collectionsWithIds(this.databaseId, this.id())}/settings`,
-            isActive: ko.observable(false),
-            onLoadStartKey: startKey,
-            onUpdateTabsButtons: this.container.onUpdateTabsButtons
-          });
+          if (isSettingsV2Enabled) {
+            settingsTabOptions.tabKind = ViewModels.CollectionTabKind.SettingsV2;
+            settingsTab = new SettingsTabV2(settingsTabOptions);
+          } else {
+            settingsTabOptions.tabKind = ViewModels.CollectionTabKind.Settings;
+            settingsTab = new SettingsTab(settingsTabOptions);
+          }
           this.container.tabsManager.activateNewTab(settingsTab);
           settingsTab.pendingNotification(pendingNotification);
         },