Added Support for editing Mongo Indexing Policy from Settings tab (#284)

* 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

* added MongoIndexingPolicy component

* addressed PR comments

* moved read indexes to scale context

* added add index feature

* added AddMongoIndexComponent

* Added collapsible portions and focus changes

* removed unnecessary imports

* finetuned UI

* more edits

* Added mongoindexeditor flight

- Moved add index UI to within current index pane

* minro edits

* Added separate warning messages for index refresh

* aligned items

* Fixed tests

* minor edits

* resolved PR comments

* modified refs usage

* compile errors fixed

* moved fetch of notifications and offer to within the tab activation

* fixed PR comments

* added error handling

* added AAD verification

* removed l empty line

* added back line

* deleted file

* added file

* addressed PR comments

* addressed PR comments

* fixed format error

* updated package.json

* updated package-lock.json

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.test.tsx

@@ -0,0 +1,14 @@
+import { shallow } from "enzyme";
+import React from "react";
+import { CollapsibleSectionComponent, CollapsibleSectionProps } from "./CollapsibleSectionComponent";
+
+describe("CollapsibleSectionComponent", () => {
+  it("renders", () => {
+    const props: CollapsibleSectionProps = {
+      title: "Sample title"
+    };
+
+    const wrapper = shallow(<CollapsibleSectionComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx

@@ -0,0 +1,36 @@
+import { Icon, Label, Stack } from "office-ui-fabric-react";
+import * as React from "react";
+import { accordionIconStyles, accordionStackTokens } from "../Settings/SettingsRenderUtils";
+
+export interface CollapsibleSectionProps {
+  title: string;
+}
+
+export interface CollapsibleSectionState {
+  isExpanded: boolean;
+}
+
+export class CollapsibleSectionComponent extends React.Component<CollapsibleSectionProps, CollapsibleSectionState> {
+  constructor(props: CollapsibleSectionProps) {
+    super(props);
+    this.state = {
+      isExpanded: true
+    };
+  }
+
+  private toggleCollapsed = (): void => {
+    this.setState({ isExpanded: !this.state.isExpanded });
+  };
+
+  public render(): JSX.Element {
+    return (
+      <>
+        <Stack className="collapsibleSection" horizontal tokens={accordionStackTokens} onClick={this.toggleCollapsed}>
+          <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} styles={accordionIconStyles} />
+          <Label>{this.props.title}</Label>
+        </Stack>
+        {this.state.isExpanded && this.props.children}
+      </>
+    );
+  }
+}

src/Explorer/Controls/CollapsiblePanel/__snapshots__/CollapsibleSectionComponent.test.tsx.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CollapsibleSectionComponent renders 1`] = `
+<Fragment>
+  <Stack
+    className="collapsibleSection"
+    horizontal={true}
+    onClick={[Function]}
+    tokens={
+      Object {
+        "childrenGap": 10,
+      }
+    }
+  >
+    <StyledIconBase
+      iconName="ChevronDown"
+      styles={
+        Object {
+          "root": Object {
+            "paddingTop": 7,
+          },
+        }
+      }
+    />
+    <StyledLabelBase>
+      Sample title
+    </StyledLabelBase>
+  </Stack>
+</Fragment>
+`;