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/Tabs/SettingsTab.test.ts

@@ -5,7 +5,7 @@ import * as ViewModels from "../../Contracts/ViewModels";
 import Collection from "../Tree/Collection";
 import Database from "../Tree/Database";
 import Explorer from "../Explorer";
-import SettingsTab from "../Tabs/SettingsTab";
+import SettingsTab from "./SettingsTab";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
 import { IndexingPolicies } from "../../Shared/Constants";
 

src/Explorer/Tabs/SettingsTab.ts

@@ -182,7 +182,6 @@ export default class SettingsTab extends TabsBase implements ViewModels.WaitsFor
   public partitionKeyVisible: ko.PureComputed<boolean>;
   public partitionKeyValue: ko.Observable<string>;
   public isLargePartitionKeyEnabled: ko.Computed<boolean>;
-  public pendingNotification: ko.Observable<DataModels.Notification>;
   public requestUnitsUsageCost: ko.Computed<string>;
   public rupmOnId: string;
   public rupmOffId: string;
@@ -859,7 +858,6 @@ export default class SettingsTab extends TabsBase implements ViewModels.WaitsFor
     this.ttlOnDefaultFocused = ko.observable<boolean>(false);
     this.ttlOnFocused = ko.observable<boolean>(false);
     this.indexingPolicyElementFocused = ko.observable<boolean>(false);
-    this.pendingNotification = ko.observable<DataModels.Notification>(undefined);
 
     this._offerReplacePending = ko.pureComputed<boolean>(() => {
       const offer = this.collection && this.collection.offer && this.collection.offer();

src/Explorer/Tabs/SettingsTabV2.html

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

src/Explorer/Tabs/SettingsTabV2.tsx

@@ -0,0 +1,27 @@
+import * as ViewModels from "../../Contracts/ViewModels";
+import TabsBase from "./TabsBase";
+import { SettingsComponentAdapter } from "../Controls/Settings/SettingsComponentAdapter";
+import { SettingsComponentProps } from "../Controls/Settings/SettingsComponent";
+import Explorer from "../Explorer";
+
+export default class SettingsTabV2 extends TabsBase {
+  public settingsComponentAdapter: SettingsComponentAdapter;
+
+  constructor(options: ViewModels.TabOptions) {
+    super(options);
+    const props: SettingsComponentProps = {
+      settingsTab: this
+    };
+    this.settingsComponentAdapter = new SettingsComponentAdapter(props);
+  }
+
+  public onActivate(): Q.Promise<unknown> {
+    return super.onActivate().then(() => {
+      this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.SettingsV2);
+    });
+  }
+
+  public getSettingsTabContainer(): Explorer {
+    return this.getContainer();
+  }
+}

src/Explorer/Tabs/TabComponents.ts

@@ -10,6 +10,7 @@ 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";
 import TriggerTabTemplate from "./TriggerTab.html";
@@ -141,6 +142,15 @@ export class SettingsTab {
   }
 }
 
+export class SettingsTabV2 {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: SettingsTabV2Template
+    };
+  }
+}
+
 export class DatabaseSettingsTab {
   constructor() {
     return {

src/Explorer/Tabs/TabsBase.ts

@@ -2,6 +2,7 @@ import * as ko from "knockout";
 import Q from "q";
 import * as Constants from "../../Common/Constants";
 import * as ViewModels from "../../Contracts/ViewModels";
+import * as DataModels from "../../Contracts/DataModels";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import { RouteHandler } from "../../RouteHandlers/RouteHandler";
 import { WaitsForTemplateViewModel } from "../WaitsForTemplateViewModel";
@@ -29,6 +30,7 @@ export default class TabsBase extends WaitsForTemplateViewModel {
   public hashLocation: ko.Observable<string>;
   public isExecutionError: ko.Observable<boolean>;
   public isExecuting: ko.Observable<boolean>;
+  public pendingNotification?: ko.Observable<DataModels.Notification>;
 
   protected _theme: string;
   public onLoadStartKey: number;
@@ -56,6 +58,7 @@ export default class TabsBase extends WaitsForTemplateViewModel {
     this.errorDetailsTabIndex = ko.computed<number>(() => (this.isActive() ? 0 : null));
     this.isExecutionError = ko.observable<boolean>(false);
     this.isExecuting = ko.observable<boolean>(false);
+    this.pendingNotification = ko.observable<DataModels.Notification>(undefined);
     this.onLoadStartKey = options.onLoadStartKey;
     this.hashLocation = ko.observable<string>(options.hashLocation || "");
     this.hashLocation.subscribe((newLocation: string) => this.updateGlobalHash(newLocation));

src/Explorer/Tabs/TabsManager.html

@@ -141,6 +141,10 @@
       <!-- ko if: $data.tabKind === 18 -->
       <notebook-viewer-tab params="{data: $data}"></notebook-viewer-tab>
       <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 19 -->
+      <settings-tab-v2 params="{data: $data}"></settings-tab-v2>
+      <!-- /ko -->
     </div>
     <!-- /ko -->
   </div>