host fix

resolve merge conflict
Remove old add collection pane (#767 )
2026-01-18 09:20:02 +00:00 · 2021-05-11 20:52:54 +05:30 · 2021-05-11 20:37:53 +05:30 · 2021-05-10 20:10:48 -05:00 · 2021-05-10 17:36:50 -07:00 · 2021-05-10 14:17:37 -05:00
161 changed files with 6543 additions and 7910 deletions
--- a/.eslintignore
+++ b/.eslintignore
@@ -54,7 +54,6 @@ src/Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.ts
 src/Explorer/Controls/InputTypeahead/InputTypeahead.ts
 src/Explorer/Controls/JsonEditor/JsonEditorComponent.ts
 src/Explorer/Controls/Notebook/NotebookAppMessageHandler.ts
-src/Explorer/Controls/ThroughputInput/ThroughputInput.test.ts
 src/Explorer/Controls/ThroughputInput/ThroughputInputComponent.ts
 src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3.ts
 src/Explorer/Controls/Toolbar/IToolbarAction.ts
@@ -109,10 +108,8 @@ src/Explorer/Notebook/NotebookUtil.ts
 src/Explorer/OpenActions.test.ts
 src/Explorer/OpenActions.ts
 src/Explorer/OpenActionsStubs.ts
-src/Explorer/Panes/AddCollectionPane.test.ts
-src/Explorer/Panes/AddCollectionPane.ts
-src/Explorer/Panes/AddDatabasePane.test.ts
 src/Explorer/Panes/AddDatabasePane.ts
+src/Explorer/Panes/AddDatabasePane.test.ts
 src/Explorer/Panes/BrowseQueriesPane.ts
 src/Explorer/Panes/CassandraAddCollectionPane.ts
 src/Explorer/Panes/ContextualPaneBase.ts
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -1757,7 +1757,7 @@ input::-webkit-calendar-picker-indicator {
  cursor: pointer;
 }

-.contextual-pane .paneMainContent {
+.paneMainContent {
  flex: 1;
  padding-left: 34px;
  padding-right: 34px;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
    "@azure/ms-rest-nodeauth": "3.0.7",
    "@babel/plugin-proposal-class-properties": "7.12.1",
    "@babel/plugin-proposal-decorators": "7.12.12",
-    "@fluentui/react": "8.10.1",
+    "@fluentui/react": "8.14.3",
    "@jupyterlab/services": "6.0.2",
    "@jupyterlab/terminal": "3.0.3",
    "@microsoft/applicationinsights-web": "2.6.1",
@@ -43,7 +43,6 @@
    "@testing-library/jest-dom": "5.11.9",
    "@types/mkdirp": "1.0.1",
    "@types/node-fetch": "2.5.7",
-    "@uifabric/react-cards": "0.109.110",
    "applicationinsights": "1.8.0",
    "bootstrap": "3.4.1",
    "canvas": "file:./canvas",
@@ -101,10 +100,10 @@
    "utility-types": "3.10.0"
  },
  "devDependencies": {
-    "@babel/core": "7.14.0",
-    "@babel/preset-env": "7.14.1",
-    "@babel/preset-react": "7.13.13",
-    "@babel/preset-typescript": "7.13.0",
+    "@babel/core": "7.9.0",
+    "@babel/preset-env": "7.9.0",
+    "@babel/preset-react": "7.9.4",
+    "@babel/preset-typescript": "7.9.0",
    "@testing-library/react": "11.2.3",
    "@types/applicationinsights-js": "1.0.7",
    "@types/codemirror": "0.0.56",
@@ -127,10 +126,10 @@
    "@types/sinon": "2.3.3",
    "@types/styled-components": "5.1.1",
    "@types/underscore": "1.7.36",
-    "@typescript-eslint/eslint-plugin": "4.22.1",
-    "@typescript-eslint/parser": "4.22.1",
-    "babel-jest": "26.6.3",
-    "babel-loader": "8.2.2",
+    "@typescript-eslint/eslint-plugin": "4.22.0",
+    "@typescript-eslint/parser": "4.22.0",
+    "babel-jest": "24.9.0",
+    "babel-loader": "8.1.0",
    "buffer": "5.1.0",
    "case-sensitive-paths-webpack-plugin": "2.3.0",
    "create-file-webpack": "1.0.2",
@@ -138,7 +137,7 @@
    "enzyme": "3.11.0",
    "enzyme-adapter-react-16": "1.15.5",
    "enzyme-to-json": "3.6.1",
-    "eslint": "7.25.0",
+    "eslint": "7.8.1",
    "eslint-cli": "1.1.1",
    "eslint-plugin-no-null": "1.0.2",
    "eslint-plugin-prefer-arrow": "1.2.2",
@@ -152,7 +151,7 @@
    "html-loader": "0.5.5",
    "html-loader-jest": "0.2.1",
    "html-webpack-plugin": "4.5.2",
-    "jest": "26.6.3",
+    "jest": "25.5.4",
    "jest-canvas-mock": "2.1.0",
    "jest-playwright-preset": "1.5.1",
    "jest-trx-results-processor": "0.0.7",
@@ -169,10 +168,10 @@
    "rimraf": "3.0.0",
    "sinon": "3.2.1",
    "style-loader": "0.23.0",
-    "ts-loader": "9.1.2",
-    "tslint": "6.1.3",
-    "tslint-microsoft-contrib": "6.2.0",
-    "typescript": "4.3.0-beta",
+    "ts-loader": "6.2.2",
+    "tslint": "5.11.0",
+    "tslint-microsoft-contrib": "6.0.0",
+    "typescript": "4.2.4",
    "url-loader": "1.1.1",
    "wait-on": "4.0.2",
    "webpack": "4.46.0",
--- a/src/Common/ObjectCache.ts
+++ b/src/Common/ObjectCache.ts
@@ -3,11 +3,11 @@ export class ObjectCache<T> extends Map<string, T> {
    super();
  }

-  public override get(key: string): T | undefined {
+  public get(key: string): T | undefined {
    return this.touch(key);
  }

-  public override set(key: string, value: T): this {
+  public set(key: string, value: T): this {
    if (this.size === this.limit) {
      this.delete(this.keys().next().value);
    }
--- a/src/Common/Tooltip/InfoTooltip.tsx
+++ b/src/Common/Tooltip/InfoTooltip.tsx
@@ -0,0 +1,16 @@
+import { Icon, TooltipHost } from "@fluentui/react";
+import * as React from "react";
+
+export interface TooltipProps {
+  children: string;
+}
+
+export const InfoTooltip: React.FunctionComponent = ({ children }: TooltipProps) => {
+  return (
+    <span>
+      <TooltipHost content={children}>
+        <Icon iconName="Info" ariaLabel="Info" className="panelInfoIcon" />
+      </TooltipHost>
+    </span>
+  );
+};
--- a/src/Common/Tooltip/Tooltip.tsx
+++ b/src/Common/Tooltip/Tooltip.tsx
@@ -1,24 +0,0 @@
-import { ITooltipHostStyles, TooltipHost } from "@fluentui/react";
-import { useId } from "@fluentui/react-hooks";
-import * as React from "react";
-import InfoBubble from "../../../images/info-bubble.svg";
-
-const calloutProps = { gapSpace: 0 };
-const hostStyles: Partial<ITooltipHostStyles> = { root: { display: "inline-block" } };
-
-export interface TooltipProps {
-  children: string;
-}
-export const Tooltip: React.FunctionComponent = ({ children }: TooltipProps) => {
-  const tooltipId = useId("tooltip");
-
-  return children ? (
-    <span>
-      <TooltipHost content={children} id={tooltipId} calloutProps={calloutProps} styles={hostStyles}>
-        <img className="infoImg" src={InfoBubble} alt="More information" />
-      </TooltipHost>
-    </span>
-  ) : (
-    <></>
-  );
-};
--- a/src/Common/Upload/Upload.tsx
+++ b/src/Common/Upload/Upload.tsx
@@ -2,7 +2,7 @@ import { Image, Stack, TextField } from "@fluentui/react";
 import React, { ChangeEvent, FunctionComponent, KeyboardEvent, useRef, useState } from "react";
 import FolderIcon from "../../../images/folder_16x16.svg";
 import * as Constants from "../Constants";
-import { Tooltip } from "../Tooltip/Tooltip";
+import { InfoTooltip } from "../Tooltip/InfoTooltip";

 interface UploadProps {
  label: string;
@@ -51,7 +51,7 @@ export const Upload: FunctionComponent<UploadProps> = ({
  return (
    <div>
      <span className="renewUploadItemsHeader">{label}</span>
-      <Tooltip>{tooltip}</Tooltip>
+      {tooltip && <InfoTooltip>{tooltip}</InfoTooltip>}
      <Stack horizontal>
        <TextField styles={{ fieldGroup: { width: 300 } }} readOnly value={selectedFilesTitle.toString()} />
        <input
--- a/src/Explorer/ComponentRegisterer.test.ts
+++ b/src/Explorer/ComponentRegisterer.test.ts
@@ -20,10 +20,6 @@ describe("Component Registerer", () => {
    expect(ko.components.isRegistered("json-editor")).toBe(true);
  });

-  it("should registeradd-collection-pane component", () => {
-    expect(ko.components.isRegistered("add-collection-pane")).toBe(true);
-  });
-
  it("should register graph-styling-pane component", () => {
    expect(ko.components.isRegistered("graph-styling-pane")).toBe(true);
  });
--- a/src/Explorer/ComponentRegisterer.ts
+++ b/src/Explorer/ComponentRegisterer.ts
@@ -19,7 +19,7 @@ ko.components.register("dynamic-list", DynamicListComponent);
 ko.components.register("throughput-input-autopilot-v3", ThroughputInputComponentAutoPilotV3);

 // Panes
+
 ko.components.register("add-database-pane", new PaneComponents.AddDatabasePaneComponent());
-ko.components.register("add-collection-pane", new PaneComponents.AddCollectionPaneComponent());
 ko.components.register("graph-styling-pane", new PaneComponents.GraphStylingPaneComponent());
 ko.components.register("cassandra-add-collection-pane", new PaneComponents.CassandraAddCollectionPaneComponent());
--- a/src/Explorer/Controls/AccessibleElement/AccessibleElement.tsx
+++ b/src/Explorer/Controls/AccessibleElement/AccessibleElement.tsx
@@ -20,7 +20,7 @@ export class AccessibleElement extends React.Component<AccessibleElementProps> {
    }
  };

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    const elementProps = { ...this.props };
    delete elementProps.as;
    delete elementProps.onActivated;
--- a/src/Explorer/Controls/Accordion/AccordionComponent.tsx
+++ b/src/Explorer/Controls/Accordion/AccordionComponent.tsx
@@ -12,7 +12,7 @@ import TriangleRightIcon from "../../../../images/Triangle-right.svg";
 export interface AccordionComponentProps {}

 export class AccordionComponent extends React.Component<AccordionComponentProps> {
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return <div className="accordion">{this.props.children}</div>;
  }
 }
@@ -42,7 +42,7 @@ export class AccordionItemComponent extends React.Component<AccordionItemCompone
    };
  }

-public override componentDidUpdate() {
+  componentDidUpdate() {
    if (this.props.isExpanded !== this.isExpanded) {
      this.isExpanded = this.props.isExpanded;
      this.setState({
@@ -51,7 +51,7 @@ public override componentDidUpdate() {
    }
  }

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return (
      <div className="accordionItemContainer">
        <div className="accordionItemHeader" onClick={this.onHeaderClick} onKeyPress={this.onHeaderKeyPress}>
--- a/src/Explorer/Controls/Arcadia/ArcadiaMenuPicker.tsx
+++ b/src/Explorer/Controls/Arcadia/ArcadiaMenuPicker.tsx
@@ -62,7 +62,7 @@ export class ArcadiaMenuPicker extends React.Component<ArcadiaMenuPickerProps, A
    this.props.onCreateNewSparkPoolClicked(item.key);
  };

-  public override render() {
+  public render() {
    const { workspaces } = this.props;
    let workspaceMenuItems: IContextualMenuItem[] = workspaces.map((workspace) => {
      let sparkPoolsMenuProps: IContextualMenuProps = {
--- a/src/Explorer/Controls/CollapsiblePanel/CollapsiblePanel.tsx
+++ b/src/Explorer/Controls/CollapsiblePanel/CollapsiblePanel.tsx
@@ -19,7 +19,7 @@ export interface CollapsiblePanelProps {
 }

 export class CollapsiblePanel extends React.Component<CollapsiblePanelProps> {
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return (
      <div className={`collapsiblePanel ${this.props.isCollapsed ? "paneCollapsed" : ""}`}>
        {!this.props.isCollapsed ? this.getExpandedFragment() : this.getCollapsedFragment()}
--- a/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
+++ b/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
@@ -24,13 +24,13 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
    this.setState({ isExpanded: !this.state.isExpanded });
  };

-  public override componentDidUpdate(): void {
+  public componentDidUpdate(): void {
    if (this.state.isExpanded && this.props.onExpand) {
      this.props.onExpand();
    }
  }

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return (
      <>
        <Stack
--- a/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx
+++ b/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx
@@ -129,7 +129,7 @@ export class CommandButtonComponent extends React.Component<CommandButtonCompone
  private dropdownElt: HTMLElement;
  private expandButtonElt: HTMLElement;

-  public override componentDidUpdate(): void {
+  public componentDidUpdate(): void {
    if (!this.dropdownElt || !this.expandButtonElt) {
      return;
    }
@@ -243,7 +243,7 @@ export class CommandButtonComponent extends React.Component<CommandButtonCompone
    );
  }

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    let mainClassName = "commandButtonComponent";
    if (this.props.disabled) {
      mainClassName += " commandDisabled";
--- a/src/Explorer/Controls/Directory/DefaultDirectoryDropdownComponent.tsx
+++ b/src/Explorer/Controls/Directory/DefaultDirectoryDropdownComponent.tsx
@@ -16,7 +16,7 @@ export interface DefaultDirectoryDropdownProps {
 export class DefaultDirectoryDropdownComponent extends React.Component<DefaultDirectoryDropdownProps> {
  public static readonly lastVisitedKey: string = "lastVisited";

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    const lastVisitedOption: IDropdownOption = {
      key: DefaultDirectoryDropdownComponent.lastVisitedKey,
      text: "Sign in to your last visited directory",
--- a/src/Explorer/Controls/Directory/DirectoryListComponent.tsx
+++ b/src/Explorer/Controls/Directory/DirectoryListComponent.tsx
@@ -36,7 +36,7 @@ export class DirectoryListComponent extends React.Component<DirectoryListProps,
    };
  }

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    const { directories: originalItems, selectedDirectoryId } = this.props;
    const { filterText } = this.state;
    const filteredItems =
--- a/src/Explorer/Controls/Directory/snapshots/DirectoryListComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Directory/snapshots/DirectoryListComponent.test.tsx.snap
@@ -1959,7 +1959,7 @@ exports[`test render renders with filters 1`] = `
                              </div>
                            </span>
                          </button>
-                          <Component />
+                          <FocusRects />
                        </BaseButton>
                      </DefaultButton>
                    </CustomizedDefaultButton>
--- a/src/Explorer/Controls/DynamicList/DynamicListComponent.ts
+++ b/src/Explorer/Controls/DynamicList/DynamicListComponent.ts
@@ -56,7 +56,7 @@ export class DynamicListViewModel extends WaitsForTemplateViewModel {
  public ariaLabel: string;
  public buttonText: string;
  public newItem: ko.Observable<string>;
-  public override isTemplateReady: ko.Observable<boolean>;
+  public isTemplateReady: ko.Observable<boolean>;
  public listItems: ko.ObservableArray<DynamicListItem>;

  public constructor(options: DynamicListParams) {
--- a/src/Explorer/Controls/Editor/EditorComponent.ts
+++ b/src/Explorer/Controls/Editor/EditorComponent.ts
@@ -26,7 +26,7 @@ export interface EditorParams extends JsonEditorParams {
 */
 // TODO: Ideally, JsonEditorViewModel should extend EditorViewModel and not the other way around
 class EditorViewModel extends JsonEditorViewModel {
-  public override params: EditorParams;
+  public params: EditorParams;
  private static providerRegistered: string[] = [];

  public constructor(params: EditorParams) {
@@ -44,11 +44,11 @@ class EditorViewModel extends JsonEditorViewModel {
      });
  }

-  protected override getEditorLanguage(): string {
+  protected getEditorLanguage(): string {
    return this.params.contentType;
  }

-  protected override async registerCompletionItemProvider() {
+  protected async registerCompletionItemProvider() {
    if (EditorViewModel.providerRegistered.indexOf("sql") < 0) {
      const { SqlCompletionItemProvider } = await import("@azure/cosmos-language-service");
      const monaco = await loadMonaco();
@@ -57,7 +57,7 @@ class EditorViewModel extends JsonEditorViewModel {
    }
  }

-  protected override async getErrorMarkers(input: string): Promise<monaco.editor.IMarkerData[]> {
+  protected async getErrorMarkers(input: string): Promise<monaco.editor.IMarkerData[]> {
    const { ErrorMarkProvider } = await import("@azure/cosmos-language-service");
    return ErrorMarkProvider.getErrorMark(input);
  }
--- a/src/Explorer/Controls/Editor/EditorReact.tsx
+++ b/src/Explorer/Controls/Editor/EditorReact.tsx
@@ -21,20 +21,20 @@ export class EditorReact extends React.Component<EditorReactProps> {
    super(props);
  }

-  public override componentDidMount(): void {
+  public componentDidMount(): void {
    this.createEditor(this.configureEditor.bind(this));
  }

-  public override shouldComponentUpdate(): boolean {
+  public shouldComponentUpdate(): boolean {
    // Prevents component re-rendering
    return false;
  }

-  public override componentWillUnmount(): void {
+  public componentWillUnmount(): void {
    this.selectionListener && this.selectionListener.dispose();
  }

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return <div className="jsonEditor" ref={(elt: HTMLElement) => this.setRef(elt)} />;
  }

--- a/src/Explorer/Controls/GitHub/AddRepoComponent.tsx
+++ b/src/Explorer/Controls/GitHub/AddRepoComponent.tsx
@@ -38,7 +38,7 @@ export class AddRepoComponent extends React.Component<AddRepoComponentProps, Add
    };
  }

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    const textFieldProps: ITextFieldProps = {
      placeholder: AddRepoComponent.TextFieldPlaceholder,
      autoFocus: true,
--- a/src/Explorer/Controls/GitHub/AuthorizeAccessComponent.tsx
+++ b/src/Explorer/Controls/GitHub/AuthorizeAccessComponent.tsx
@@ -49,7 +49,7 @@ export class AuthorizeAccessComponent extends React.Component<
    };
  }

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    const choiceGroupProps: IChoiceGroupProps = {
      options: [
        {
--- a/src/Explorer/Controls/GitHub/GitHubReposComponent.tsx
+++ b/src/Explorer/Controls/GitHub/GitHubReposComponent.tsx
@@ -29,7 +29,7 @@ export class GitHubReposComponent extends React.Component<GitHubReposComponentPr
  private static readonly OKButtonText = "OK";
  private static readonly CancelButtonText = "Cancel";

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    const content: JSX.Element = this.props.showAuthorizeAccess ? (
      <AuthorizeAccessComponent {...this.props.authorizeAccessProps} />
    ) : (
--- a/src/Explorer/Controls/GitHub/ReposListComponent.tsx
+++ b/src/Explorer/Controls/GitHub/ReposListComponent.tsx
@@ -67,7 +67,7 @@ export class ReposListComponent extends React.Component<ReposListComponentProps>
  private static readonly DefaultBranchName = "master";
  private static readonly FooterIndex = -1;

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    const pinnedReposListProps: IDetailsListProps = {
      styles: {
        contentWrapper: {
--- a/src/Explorer/Controls/Header/GalleryHeaderComponent.tsx
+++ b/src/Explorer/Controls/Header/GalleryHeaderComponent.tsx
@@ -30,7 +30,7 @@ export class GalleryHeaderComponent extends React.Component {
    );
  };

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return (
      <Stack
        tokens={{ childrenGap: 10 }}
--- a/src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
+++ b/src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
@@ -113,7 +113,7 @@ export class InputTypeaheadComponent extends React.Component<
   * @param prevState
   * @param snapshot
   */
-  public override componentDidUpdate(
+  public componentDidUpdate(
    prevProps: InputTypeaheadComponentProps,
    prevState: InputTypeaheadComponentState,
    snapshot: any
@@ -127,11 +127,11 @@ export class InputTypeaheadComponent extends React.Component<
  /**
   * Executed once react is done building the DOM for this component
   */
-  public override componentDidMount(): void {
+  public componentDidMount(): void {
    this.initializeTypeahead();
  }

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return (
      <span className="input-typeahead-container">
        <div
--- a/src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx
+++ b/src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx
@@ -19,7 +19,7 @@ export class NotebookTerminalComponent extends React.Component<NotebookTerminalC
    super(props);
  }

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return (
      <div className="notebookTerminalContainer">
        <iframe
--- a/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx
@@ -1,20 +1,23 @@
 import {
  BaseButton,
  Button,
-  FontWeights,
+  DocumentCard,
+  DocumentCardActivity,
+  DocumentCardDetails,
+  DocumentCardPreview,
+  DocumentCardTitle,
  Icon,
  IconButton,
-  Image,
+  IDocumentCardPreviewProps,
+  IDocumentCardStyles,
  ImageFit,
  Link,
-  Persona,
  Separator,
  Spinner,
  SpinnerSize,
  Text,
  TooltipHost,
 } from "@fluentui/react";
-import { Card } from "@uifabric/react-cards";
 import React, { FunctionComponent, useState } from "react";
 import CosmosDBLogo from "../../../../../images/CosmosDB-logo.svg";
 import { IGalleryItem } from "../../../../Juno/JunoClient";
@@ -48,7 +51,6 @@ export const GalleryCardComponent: FunctionComponent<GalleryCardComponentProps>
  const CARD_WIDTH = 256;
  const cardImageHeight = 144;
  const cardDescriptionMaxChars = 80;
-  const cardItemGapBig = 10;
  const cardItemGapSmall = 8;
  const cardDeleteSpinnerHeight = 360;
  const smallTextLineHeight = 18;
@@ -64,9 +66,9 @@ export const GalleryCardComponent: FunctionComponent<GalleryCardComponentProps>
  const dateString = new Date(data.created).toLocaleString("default", options);
  const cardTitle = FileSystemUtil.stripExtension(data.name, "ipynb");

-  const renderTruncatedDescription = (): string => {
-    let truncatedDescription = data.description.substr(0, cardDescriptionMaxChars);
-    if (data.description.length > cardDescriptionMaxChars) {
+  const renderTruncated = (text: string, totalLength: number): string => {
+    let truncatedDescription = text.substr(0, totalLength);
+    if (text.length > totalLength) {
      truncatedDescription = `${truncatedDescription} ...`;
    }
    return truncatedDescription;
@@ -120,42 +122,35 @@ export const GalleryCardComponent: FunctionComponent<GalleryCardComponentProps>
    event.preventDefault();
    activate();
  };
-
+  const DocumentCardActivityPeople = [{ name: data.author, profileImageSrc: data.isSample && CosmosDBLogo }];
+  const previewProps: IDocumentCardPreviewProps = {
+    previewImages: [
+      {
+        previewImageSrc: data.thumbnailUrl,
+        imageFit: ImageFit.cover,
+        width: CARD_WIDTH,
+        height: cardImageHeight,
+      },
+    ],
+  };
+  const cardStyles: IDocumentCardStyles = {
+    root: { display: "inline-block", marginRight: 20, width: CARD_WIDTH },
+  };
  return (
-    <Card
-      style={{ background: "white" }}
-      aria-label={cardTitle}
-      data-is-focusable="true"
-      tokens={{ width: CARD_WIDTH, childrenGap: 0 }}
-      onClick={(event) => handlerOnClick(event, onClick)}
-    >
+    <DocumentCard aria-label={cardTitle} styles={cardStyles} onClick={onClick}>
      {isDeletingPublishedNotebook && (
-        <Card.Item tokens={{ padding: cardItemGapBig }}>
-          <Spinner
-            size={SpinnerSize.large}
-            label={`Deleting '${cardTitle}'`}
-            styles={{ root: { height: cardDeleteSpinnerHeight } }}
-          />
-        </Card.Item>
+        <Spinner
+          size={SpinnerSize.large}
+          label={`Deleting '${cardTitle}'`}
+          styles={{ root: { height: cardDeleteSpinnerHeight } }}
+        />
      )}
      {!isDeletingPublishedNotebook && (
        <>
-          <Card.Item tokens={{ padding: cardItemGapBig }}>
-            <Persona imageUrl={data.isSample && CosmosDBLogo} text={data.author} secondaryText={dateString} />
-          </Card.Item>
-
-          <Card.Item>
-            <Image
-              src={data.thumbnailUrl}
-              width={CARD_WIDTH}
-              height={cardImageHeight}
-              imageFit={ImageFit.cover}
-              alt={`${cardTitle} cover image`}
-            />
-          </Card.Item>
-
-          <Card.Section styles={{ root: { padding: cardItemGapBig } }}>
-            <Text variant="small" nowrap styles={{ root: { height: smallTextLineHeight } }}>
+          <DocumentCardActivity activity={dateString} people={DocumentCardActivityPeople} />
+          <DocumentCardPreview {...previewProps} />
+          <DocumentCardDetails>
+            <Text variant="small" nowrap styles={{ root: { height: smallTextLineHeight, padding: "2px 16px" } }}>
              {data.tags ? (
                data.tags.map((tag, index, array) => (
                  <span key={tag}>
@@ -167,43 +162,22 @@ export const GalleryCardComponent: FunctionComponent<GalleryCardComponentProps>
                <br />
              )}
            </Text>
-
-            <Text
-              styles={{
-                root: {
-                  fontWeight: FontWeights.semibold,
-                  paddingTop: cardItemGapSmall,
-                  paddingBottom: cardItemGapSmall,
-                },
-              }}
-              nowrap
-            >
-              {cardTitle}
-            </Text>
-
-            <Text variant="small" styles={{ root: { height: smallTextLineHeight * 2 } }}>
-              {renderTruncatedDescription()}
-            </Text>
-
-            <span>
+            <DocumentCardTitle title={renderTruncated(cardTitle, 20)} shouldTruncate />
+            <DocumentCardTitle
+              title={renderTruncated(data.description, cardDescriptionMaxChars)}
+              showAsSecondaryTitle
+            />
+            <span style={{ padding: "8px 16px" }}>
              {data.views !== undefined && generateIconText("RedEye", data.views.toString())}
              {data.downloads !== undefined && generateIconText("Download", data.downloads.toString())}
              {data.favorites !== undefined && generateIconText("Heart", data.favorites.toString())}
            </span>
-          </Card.Section>
-
+          </DocumentCardDetails>
          {cardButtonsVisible && (
-            <Card.Section
-              styles={{
-                root: {
-                  marginLeft: cardItemGapBig,
-                  marginRight: cardItemGapBig,
-                },
-              }}
-            >
+            <DocumentCardDetails>
              <Separator styles={{ root: { padding: 0, height: 1 } }} />

-              <span>
+              <span style={{ padding: "0px 16px" }}>
                {isFavorite !== undefined &&
                  generateIconButtonWithTooltip(
                    isFavorite ? "HeartFill" : "Heart",
@@ -222,10 +196,10 @@ export const GalleryCardComponent: FunctionComponent<GalleryCardComponentProps>
                    )
                  )}
              </span>
-            </Card.Section>
+            </DocumentCardDetails>
          )}
        </>
      )}
-    </Card>
+    </DocumentCard>
  );
 };
--- a/src/Explorer/Controls/NotebookGallery/Cards/snapshots/GalleryCardComponent.test.tsx.snap
+++ b/src/Explorer/Controls/NotebookGallery/Cards/snapshots/GalleryCardComponent.test.tsx.snap
@@ -1,59 +1,49 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`GalleryCardComponent renders 1`] = `
-<Card
+<StyledDocumentCardBase
  aria-label="name"
-  data-is-focusable="true"
-  onClick={[Function]}
-  style={
+  styles={
    Object {
-      "background": "white",
-    }
-  }
-  tokens={
-    Object {
-      "childrenGap": 0,
-      "width": 256,
+      "root": Object {
+        "display": "inline-block",
+        "marginRight": 20,
+        "width": 256,
+      },
    }
  }
 >
-  <CardItem
-    tokens={
-      Object {
-        "padding": 10,
-      }
-    }
-  >
-    <StyledPersonaBase
-      imageUrl={false}
-      secondaryText="Invalid Date"
-      text="author"
-    />
-  </CardItem>
-  <CardItem>
-    <Image
-      alt="name cover image"
-      height={144}
-      imageFit={2}
-      src="thumbnailUrl"
-      width={256}
-    />
-  </CardItem>
-  <CardSection
-    styles={
-      Object {
-        "root": Object {
-          "padding": 10,
+  <StyledDocumentCardActivityBase
+    activity="Invalid Date"
+    people={
+      Array [
+        Object {
+          "name": "author",
+          "profileImageSrc": false,
        },
-      }
+      ]
    }
-  >
+  />
+  <StyledDocumentCardPreviewBase
+    previewImages={
+      Array [
+        Object {
+          "height": 144,
+          "imageFit": 2,
+          "previewImageSrc": "thumbnailUrl",
+          "width": 256,
+        },
+      ]
+    }
+  />
+  <StyledDocumentCardDetailsBase>
    <Text
      nowrap={true}
      styles={
        Object {
          "root": Object {
            "height": 18,
+            "padding": "2px 16px",
          },
        }
      }
@@ -69,33 +59,21 @@ exports[`GalleryCardComponent renders 1`] = `
        </StyledLinkBase>
      </span>
    </Text>
-    <Text
-      nowrap={true}
-      styles={
+    <StyledDocumentCardTitleBase
+      shouldTruncate={true}
+      title="name"
+    />
+    <StyledDocumentCardTitleBase
+      showAsSecondaryTitle={true}
+      title="description"
+    />
+    <span
+      style={
        Object {
-          "root": Object {
-            "fontWeight": 600,
-            "paddingBottom": 8,
-            "paddingTop": 8,
-          },
+          "padding": "8px 16px",
        }
      }
    >
-      name
-    </Text>
-    <Text
-      styles={
-        Object {
-          "root": Object {
-            "height": 36,
-          },
-        }
-      }
-      variant="small"
-    >
-      description
-    </Text>
-    <span>
      <Text
        styles={
          Object {
@@ -169,17 +147,8 @@ exports[`GalleryCardComponent renders 1`] = `
        0
      </Text>
    </span>
-  </CardSection>
-  <CardSection
-    styles={
-      Object {
-        "root": Object {
-          "marginLeft": 10,
-          "marginRight": 10,
-        },
-      }
-    }
-  >
+  </StyledDocumentCardDetailsBase>
+  <StyledDocumentCardDetailsBase>
    <Separator
      styles={
        Object {
@@ -190,7 +159,13 @@ exports[`GalleryCardComponent renders 1`] = `
        }
      }
    />
-    <span>
+    <span
+      style={
+        Object {
+          "padding": "0px 16px",
+        }
+      }
+    >
      <StyledTooltipHostBase
        calloutProps={
          Object {
@@ -276,6 +251,6 @@ exports[`GalleryCardComponent renders 1`] = `
        />
      </StyledTooltipHostBase>
    </span>
-  </CardSection>
-</Card>
+  </StyledDocumentCardDetailsBase>
+</StyledDocumentCardBase>
 `;
--- a/src/Explorer/Controls/NotebookGallery/GalleryAndNotebookViewerComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/GalleryAndNotebookViewerComponent.tsx
@@ -42,7 +42,7 @@ export class GalleryAndNotebookViewerComponent extends React.Component<
    };
  }

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    if (this.state.notebookUrl) {
      const props: NotebookViewerComponentProps = {
        container: this.props.container,
--- a/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
@@ -34,7 +34,6 @@ import { CodeOfConductComponent } from "./CodeOfConductComponent";
 import "./GalleryViewerComponent.less";
 import { InfoComponent } from "./InfoComponent/InfoComponent";

-const CARD_WIDTH = 256;
 export interface GalleryViewerComponentProps {
  container?: Explorer;
  junoClient: JunoClient;
@@ -87,7 +86,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
  public static readonly PublishedTitle = "My published work";

  private static readonly rowsPerPage = 5;
-
+  private static readonly CARD_WIDTH = 256;
  private static readonly mostViewedText = "Most viewed";
  private static readonly mostDownloadedText = "Most downloaded";
  private static readonly mostFavoritedText = "Most favorited";
@@ -149,7 +148,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
    this.loadFavoriteNotebooks(this.state.searchText, this.state.sortBy, false); // Need this to show correct favorite button state
  }

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    this.traceViewGallery();

    const tabs: GalleryTabInfo[] = [
@@ -644,7 +643,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone

  private getPageSpecification = (itemIndex?: number, visibleRect?: IRectangle): IPageSpecification => {
    if (itemIndex === 0) {
-      this.columnCount = Math.floor(visibleRect.width / CARD_WIDTH) || this.columnCount;
+      this.columnCount = Math.floor(visibleRect.width / GalleryViewerComponent.CARD_WIDTH) || this.columnCount;
      this.rowCount = GalleryViewerComponent.rowsPerPage;
    }

@@ -672,7 +671,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
    };

    return (
-      <div style={{ float: "left", padding: 10 }}>
+      <div style={{ float: "left", padding: 5 }}>
        <GalleryCardComponent {...props} />
      </div>
    );
--- a/src/Explorer/Controls/NotebookGallery/InfoComponent/InfoComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/InfoComponent/InfoComponent.tsx
@@ -38,7 +38,7 @@ export class InfoComponent extends React.Component<InfoComponentProps> {
    );
  };

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return (
      <HoverCard plainCardProps={{ onRenderPlainCard: this.onHover }} instantOpenOnClick type={HoverCardType.plain}>
        <div className="infoPanelMain">
--- a/src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx
+++ b/src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx
@@ -41,7 +41,7 @@ export class NotebookMetadataComponent extends React.Component<NotebookMetadataC
    );
  };

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    const options: Intl.DateTimeFormatOptions = {
      year: "numeric",
      month: "short",
--- a/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
+++ b/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
@@ -132,7 +132,7 @@ export class NotebookViewerComponent
    }
  }

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return (
      <div className="notebookViewerContainer">
        {this.props.backNavigationText !== undefined ? (
--- a/src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx
+++ b/src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx
@@ -62,7 +62,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
    this.selection.setItems(this.state.filteredResults);
  }

-  public override componentDidUpdate(prevProps: QueriesGridComponentProps, prevState: QueriesGridComponentState): void {
+  public componentDidUpdate(prevProps: QueriesGridComponentProps, prevState: QueriesGridComponentState): void {
    this.selection.setItems(
      this.state.filteredResults,
      !_.isEqual(prevState.filteredResults, this.state.filteredResults)
@@ -79,11 +79,11 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
  }

  // fetched saved queries when panel open
-  public override componentDidMount() {
+  public componentDidMount() {
    this.fetchSavedQueries();
  }

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    if (this.state.queries.length === 0) {
      return this.renderBannerComponent();
    }
--- a/src/Explorer/Controls/RadioSwitchComponent/RadioSwitchComponent.tsx
+++ b/src/Explorer/Controls/RadioSwitchComponent/RadioSwitchComponent.tsx
@@ -20,7 +20,7 @@ export interface RadioSwitchComponentProps {
 }

 export class RadioSwitchComponent extends React.Component<RadioSwitchComponentProps> {
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return (
      <div className="radioSwitchComponent">
        {this.props.choices.map((choice: Choice) => (
--- a/src/Explorer/Controls/ResizeSensorReactComponent/ResizeSensorComponent.tsx
+++ b/src/Explorer/Controls/ResizeSensorReactComponent/ResizeSensorComponent.tsx
@@ -17,7 +17,7 @@ export abstract class ResizeSensorComponent<P, S> extends React.Component<P, S>
  protected abstract onDimensionsChanged(width: number, height: number): void;
  protected abstract getSensorTarget(): HTMLElement;

-  public override componentDidUpdate(): void {
+  public componentDidUpdate(): void {
    if (this.isSensing) {
      return;
    }
@@ -37,7 +37,7 @@ export abstract class ResizeSensorComponent<P, S> extends React.Component<P, S>
    }
  }

-  public override componentWillUnmount(): void {
+  public componentWillUnmount(): void {
    if (!!this.resizeSensor) {
      this.resizeSensor.detach();
    }
--- a/src/Explorer/Controls/Settings/SettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsComponent.tsx
@@ -213,7 +213,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
    };
  }

-public override componentDidMount(): void {
+  componentDidMount(): void {
    if (this.isCollectionSettingsTab) {
      this.refreshIndexTransformationProgress();
      this.loadMongoIndexes();
@@ -226,7 +226,7 @@ public override componentDidMount(): void {
    }
  }

-public override componentDidUpdate(): void {
+  componentDidUpdate(): void {
    if (this.props.settingsTab.isActive()) {
      this.props.settingsTab.getContainer().onUpdateTabsButtons(this.getTabsButtons());
    }
@@ -879,7 +879,7 @@ public override componentDidUpdate(): void {
    return mongoIndexingPolicyAADError;
  };

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    const scaleComponentProps: ScaleComponentProps = {
      collection: this.collection,
      database: this.database,
--- a/src/Explorer/Controls/Settings/SettingsRenderUtils.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsRenderUtils.test.tsx
@@ -26,7 +26,7 @@ import {
 } from "./SettingsRenderUtils";

 class SettingsRenderUtilsTestComponent extends React.Component {
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    const estimatedSpendingColumns: IColumn[] = [
      { key: "costType", name: "", fieldName: "costType", minWidth: 100, maxWidth: 200, isResizable: true },
      { key: "hourly", name: "Hourly", fieldName: "hourly", minWidth: 100, maxWidth: 200, isResizable: true },
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ConflictResolutionComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ConflictResolutionComponent.tsx
@@ -40,11 +40,11 @@ export class ConflictResolutionComponent extends React.Component<ConflictResolut
    { key: DataModels.ConflictResolutionMode.Custom, text: "Merge Procedure (custom)" },
  ];

-public override componentDidMount(): void {
+  componentDidMount(): void {
    this.onComponentUpdate();
  }

-public override componentDidUpdate(): void {
+  componentDidUpdate(): void {
    this.onComponentUpdate();
  }

@@ -135,7 +135,7 @@ public override componentDidUpdate(): void {
    />
  );

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return (
      <Stack {...subComponentStackProps}>
        {this.getConflictResolutionModeComponent()}
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx
@@ -38,7 +38,7 @@ export class IndexingPolicyComponent extends React.Component<
    };
  }

-public override componentDidUpdate(): void {
+  componentDidUpdate(): void {
    if (this.props.shouldDiscardIndexingPolicy) {
      this.resetIndexingPolicyEditor();
      this.props.resetShouldDiscardIndexingPolicy();
@@ -46,7 +46,7 @@ public override componentDidUpdate(): void {
    this.onComponentUpdate();
  }

-public override componentDidMount(): void {
+  componentDidMount(): void {
    this.resetIndexingPolicyEditor();
    this.onComponentUpdate();
  }
@@ -112,7 +112,7 @@ public override componentDidMount(): void {
    }
  };

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return (
      <Stack {...titleAndInputStackProps}>
        <IndexingPolicyRefreshComponent
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/IndexingPolicyRefreshComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/IndexingPolicyRefreshComponent.tsx
@@ -52,7 +52,7 @@ export class IndexingPolicyRefreshComponent extends React.Component<
    }
  };

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return this.renderIndexTransformationWarning() ? (
      <MessageBar messageBarType={MessageBarType.warning}>{this.renderIndexTransformationWarning()}</MessageBar>
    ) : (
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/AddMongoIndexComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/AddMongoIndexComponent.tsx
@@ -61,7 +61,7 @@ export class AddMongoIndexComponent extends React.Component<AddMongoIndexCompone
    this.descriptionTextField.focus();
  };

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return (
      <Stack {...mongoWarningStackProps}>
        <Stack horizontal tokens={addMongoIndexSubElementsTokens}>
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx
@@ -89,14 +89,14 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
    },
  ];

-public override componentDidUpdate(prevProps: MongoIndexingPolicyComponentProps): void {
+  componentDidUpdate(prevProps: MongoIndexingPolicyComponentProps): void {
    if (this.props.indexesToAdd.length > prevProps.indexesToAdd.length) {
      this.addMongoIndexComponentRefs[prevProps.indexesToAdd.length]?.current?.focus();
    }
    this.onComponentUpdate();
  }

-public override componentDidMount(): void {
+  componentDidMount(): void {
    this.onComponentUpdate();
  }

@@ -311,7 +311,7 @@ public override componentDidMount(): void {
    );
  };

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    if (this.props.mongoIndexes) {
      if (this.hasCompoundIndex()) {
        return mongoCompoundIndexNotSupportedMessage;
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx
@@ -216,7 +216,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
    );
  }

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return (
      <Stack {...subComponentStackProps}>
        {this.isFreeTierAccount() && (
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
@@ -72,11 +72,11 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
    this.partitionKeyName = userContext.apiType === "Mongo" ? "Shard key" : "Partition key";
  }

-public override componentDidMount(): void {
+  componentDidMount(): void {
    this.onComponentUpdate();
  }

-public override componentDidUpdate(): void {
+  componentDidUpdate(): void {
    this.onComponentUpdate();
  }

@@ -323,7 +323,7 @@ public override componentDidUpdate(): void {

  public isLargePartitionKeyEnabled = (): boolean => this.props.collection.partitionKey?.version >= 2;

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return (
      <Stack {...subComponentStackProps}>
        {userContext.apiType !== "Cassandra" && this.getTtlComponent()}
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
@@ -96,11 +96,11 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
    { key: "false", text: "Manual" },
  ];

-public override componentDidMount(): void {
+  componentDidMount(): void {
    this.onComponentUpdate();
  }

-public override componentDidUpdate(): void {
+  componentDidUpdate(): void {
    this.onComponentUpdate();
  }

@@ -627,7 +627,7 @@ public override componentDidUpdate(): void {
    );
  };

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return (
      <Stack {...checkBoxAndInputStackProps}>
        {this.renderWarningMessage()}
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/snapshots/ThroughputInputAutoPilotV3Component.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/snapshots/ThroughputInputAutoPilotV3Component.test.tsx.snap
@@ -252,7 +252,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
      >
         capacity calculator
         
-        <Component
+        <FontIcon
          iconName="NavigateExternalInline"
        />
      </StyledLinkBase>
@@ -526,7 +526,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
      >
         capacity calculator
         
-        <Component
+        <FontIcon
          iconName="NavigateExternalInline"
        />
      </StyledLinkBase>
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ToolTipLabelComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ToolTipLabelComponent.tsx
@@ -10,7 +10,7 @@ export interface ToolTipLabelComponentProps {
 const iconButtonStyles: Partial<IIconStyles> = { root: { marginBottom: -3 } };

 export class ToolTipLabelComponent extends React.Component<ToolTipLabelComponentProps> {
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return (
      <>
        <Stack horizontal verticalAlign="center" tokens={toolTipLabelStackTokens}>
--- a/src/Explorer/Controls/Settings/snapshots/SettingsComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/snapshots/SettingsComponent.test.tsx.snap
@@ -75,89 +75,6 @@ exports[`SettingsComponent renders 1`] = `
                    "upsellMessageAriaLabel": [Function],
                    "visible": [Function],
                  },
-                  AddCollectionPane {
-                    "_isSynapseLinkEnabled": [Function],
-                    "autoPilotThroughput": [Function],
-                    "autoPilotUsageCost": [Function],
-                    "canConfigureThroughput": [Function],
-                    "canExceedMaximumValue": [Function],
-                    "canRequestSupport": [Function],
-                    "collectionId": [Function],
-                    "collectionIdTitle": [Function],
-                    "collectionWithThroughputInShared": [Function],
-                    "collectionWithThroughputInSharedTitle": [Function],
-                    "container": [Circular],
-                    "costsVisible": [Function],
-                    "databaseCreateNew": [Function],
-                    "databaseCreateNewShared": [Function],
-                    "databaseHasSharedOffer": [Function],
-                    "databaseId": [Function],
-                    "databaseIds": [Function],
-                    "dedicatedRequestUnitsUsageCost": [Function],
-                    "displayCollectionThroughput": [Function],
-                    "firstFieldHasFocus": [Function],
-                    "formErrors": [Function],
-                    "formErrorsDetails": [Function],
-                    "formWarnings": [Function],
-                    "freeTierExceedThroughputTooltip": [Function],
-                    "id": "addcollectionpane",
-                    "isAnalyticalStorageOn": [Function],
-                    "isAutoPilotSelected": [Function],
-                    "isEnableMongoCapabilityEnabled": [Function],
-                    "isExecuting": [Function],
-                    "isFixedStorageSelected": [Function],
-                    "isFreeTierAccount": [Function],
-                    "isNonTableApi": [Function],
-                    "isPreferredApiTable": [Function],
-                    "isSharedAutoPilotSelected": [Function],
-                    "isSynapseLinkSupported": [Function],
-                    "isSynapseLinkUpdating": [Function],
-                    "isTemplateReady": [Function],
-                    "isTryCosmosDBSubscription": [Function],
-                    "isUnlimitedStorageSelected": [Function],
-                    "largePartitionKey": [Function],
-                    "lowerCasePartitionKeyName": [Function],
-                    "maxCollectionsReached": [Function],
-                    "maxCollectionsReachedMessage": [Function],
-                    "maxThroughputRU": [Function],
-                    "minThroughputRU": [Function],
-                    "onMoreDetailsKeyPress": [Function],
-                    "partitionKey": [Function],
-                    "partitionKeyName": [Function],
-                    "partitionKeyPattern": [Function],
-                    "partitionKeyPlaceholder": [Function],
-                    "partitionKeyTitle": [Function],
-                    "partitionKeyVisible": [Function],
-                    "requestUnitsUsageCost": [Function],
-                    "ruToolTipText": [Function],
-                    "sharedAutoPilotThroughput": [Function],
-                    "sharedThroughputRangeText": [Function],
-                    "shouldCreateMongoWildcardIndex": [Function],
-                    "shouldUseDatabaseThroughput": [Function],
-                    "showAnalyticalStore": [Function],
-                    "showEnableSynapseLink": [Function],
-                    "showIndexingOptionsForSharedThroughput": [Function],
-                    "showUpsellMessage": [Function],
-                    "storage": [Function],
-                    "throughputDatabase": [Function],
-                    "throughputMultiPartition": [Function],
-                    "throughputRangeText": [Function],
-                    "throughputSinglePartition": [Function],
-                    "throughputSpendAck": [Function],
-                    "throughputSpendAckText": [Function],
-                    "throughputSpendAckVisible": [Function],
-                    "title": [Function],
-                    "ttl90DaysEnabled": [Function],
-                    "uniqueKeys": [Function],
-                    "uniqueKeysPlaceholder": [Function],
-                    "uniqueKeysVisible": [Function],
-                    "upsellAnchorText": [Function],
-                    "upsellAnchorUrl": [Function],
-                    "upsellMessage": [Function],
-                    "upsellMessageAriaLabel": [Function],
-                    "useIndexingForSharedThroughput": [Function],
-                    "visible": [Function],
-                  },
                  GraphStylingPane {
                    "container": [Circular],
                    "firstFieldHasFocus": [Function],
@@ -226,89 +143,6 @@ exports[`SettingsComponent renders 1`] = `
                ],
                "_refreshSparkEnabledStateForAccount": [Function],
                "_resetNotebookWorkspace": [Function],
-                "addCollectionPane": AddCollectionPane {
-                  "_isSynapseLinkEnabled": [Function],
-                  "autoPilotThroughput": [Function],
-                  "autoPilotUsageCost": [Function],
-                  "canConfigureThroughput": [Function],
-                  "canExceedMaximumValue": [Function],
-                  "canRequestSupport": [Function],
-                  "collectionId": [Function],
-                  "collectionIdTitle": [Function],
-                  "collectionWithThroughputInShared": [Function],
-                  "collectionWithThroughputInSharedTitle": [Function],
-                  "container": [Circular],
-                  "costsVisible": [Function],
-                  "databaseCreateNew": [Function],
-                  "databaseCreateNewShared": [Function],
-                  "databaseHasSharedOffer": [Function],
-                  "databaseId": [Function],
-                  "databaseIds": [Function],
-                  "dedicatedRequestUnitsUsageCost": [Function],
-                  "displayCollectionThroughput": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "formWarnings": [Function],
-                  "freeTierExceedThroughputTooltip": [Function],
-                  "id": "addcollectionpane",
-                  "isAnalyticalStorageOn": [Function],
-                  "isAutoPilotSelected": [Function],
-                  "isEnableMongoCapabilityEnabled": [Function],
-                  "isExecuting": [Function],
-                  "isFixedStorageSelected": [Function],
-                  "isFreeTierAccount": [Function],
-                  "isNonTableApi": [Function],
-                  "isPreferredApiTable": [Function],
-                  "isSharedAutoPilotSelected": [Function],
-                  "isSynapseLinkSupported": [Function],
-                  "isSynapseLinkUpdating": [Function],
-                  "isTemplateReady": [Function],
-                  "isTryCosmosDBSubscription": [Function],
-                  "isUnlimitedStorageSelected": [Function],
-                  "largePartitionKey": [Function],
-                  "lowerCasePartitionKeyName": [Function],
-                  "maxCollectionsReached": [Function],
-                  "maxCollectionsReachedMessage": [Function],
-                  "maxThroughputRU": [Function],
-                  "minThroughputRU": [Function],
-                  "onMoreDetailsKeyPress": [Function],
-                  "partitionKey": [Function],
-                  "partitionKeyName": [Function],
-                  "partitionKeyPattern": [Function],
-                  "partitionKeyPlaceholder": [Function],
-                  "partitionKeyTitle": [Function],
-                  "partitionKeyVisible": [Function],
-                  "requestUnitsUsageCost": [Function],
-                  "ruToolTipText": [Function],
-                  "sharedAutoPilotThroughput": [Function],
-                  "sharedThroughputRangeText": [Function],
-                  "shouldCreateMongoWildcardIndex": [Function],
-                  "shouldUseDatabaseThroughput": [Function],
-                  "showAnalyticalStore": [Function],
-                  "showEnableSynapseLink": [Function],
-                  "showIndexingOptionsForSharedThroughput": [Function],
-                  "showUpsellMessage": [Function],
-                  "storage": [Function],
-                  "throughputDatabase": [Function],
-                  "throughputMultiPartition": [Function],
-                  "throughputRangeText": [Function],
-                  "throughputSinglePartition": [Function],
-                  "throughputSpendAck": [Function],
-                  "throughputSpendAckText": [Function],
-                  "throughputSpendAckVisible": [Function],
-                  "title": [Function],
-                  "ttl90DaysEnabled": [Function],
-                  "uniqueKeys": [Function],
-                  "uniqueKeysPlaceholder": [Function],
-                  "uniqueKeysVisible": [Function],
-                  "upsellAnchorText": [Function],
-                  "upsellAnchorUrl": [Function],
-                  "upsellMessage": [Function],
-                  "upsellMessageAriaLabel": [Function],
-                  "useIndexingForSharedThroughput": [Function],
-                  "visible": [Function],
-                },
                "addCollectionText": [Function],
                "addDatabasePane": AddDatabasePane {
                  "autoPilotUsageCost": [Function],
@@ -1353,89 +1187,6 @@ exports[`SettingsComponent renders 1`] = `
                  "upsellMessageAriaLabel": [Function],
                  "visible": [Function],
                },
-                AddCollectionPane {
-                  "_isSynapseLinkEnabled": [Function],
-                  "autoPilotThroughput": [Function],
-                  "autoPilotUsageCost": [Function],
-                  "canConfigureThroughput": [Function],
-                  "canExceedMaximumValue": [Function],
-                  "canRequestSupport": [Function],
-                  "collectionId": [Function],
-                  "collectionIdTitle": [Function],
-                  "collectionWithThroughputInShared": [Function],
-                  "collectionWithThroughputInSharedTitle": [Function],
-                  "container": [Circular],
-                  "costsVisible": [Function],
-                  "databaseCreateNew": [Function],
-                  "databaseCreateNewShared": [Function],
-                  "databaseHasSharedOffer": [Function],
-                  "databaseId": [Function],
-                  "databaseIds": [Function],
-                  "dedicatedRequestUnitsUsageCost": [Function],
-                  "displayCollectionThroughput": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "formWarnings": [Function],
-                  "freeTierExceedThroughputTooltip": [Function],
-                  "id": "addcollectionpane",
-                  "isAnalyticalStorageOn": [Function],
-                  "isAutoPilotSelected": [Function],
-                  "isEnableMongoCapabilityEnabled": [Function],
-                  "isExecuting": [Function],
-                  "isFixedStorageSelected": [Function],
-                  "isFreeTierAccount": [Function],
-                  "isNonTableApi": [Function],
-                  "isPreferredApiTable": [Function],
-                  "isSharedAutoPilotSelected": [Function],
-                  "isSynapseLinkSupported": [Function],
-                  "isSynapseLinkUpdating": [Function],
-                  "isTemplateReady": [Function],
-                  "isTryCosmosDBSubscription": [Function],
-                  "isUnlimitedStorageSelected": [Function],
-                  "largePartitionKey": [Function],
-                  "lowerCasePartitionKeyName": [Function],
-                  "maxCollectionsReached": [Function],
-                  "maxCollectionsReachedMessage": [Function],
-                  "maxThroughputRU": [Function],
-                  "minThroughputRU": [Function],
-                  "onMoreDetailsKeyPress": [Function],
-                  "partitionKey": [Function],
-                  "partitionKeyName": [Function],
-                  "partitionKeyPattern": [Function],
-                  "partitionKeyPlaceholder": [Function],
-                  "partitionKeyTitle": [Function],
-                  "partitionKeyVisible": [Function],
-                  "requestUnitsUsageCost": [Function],
-                  "ruToolTipText": [Function],
-                  "sharedAutoPilotThroughput": [Function],
-                  "sharedThroughputRangeText": [Function],
-                  "shouldCreateMongoWildcardIndex": [Function],
-                  "shouldUseDatabaseThroughput": [Function],
-                  "showAnalyticalStore": [Function],
-                  "showEnableSynapseLink": [Function],
-                  "showIndexingOptionsForSharedThroughput": [Function],
-                  "showUpsellMessage": [Function],
-                  "storage": [Function],
-                  "throughputDatabase": [Function],
-                  "throughputMultiPartition": [Function],
-                  "throughputRangeText": [Function],
-                  "throughputSinglePartition": [Function],
-                  "throughputSpendAck": [Function],
-                  "throughputSpendAckText": [Function],
-                  "throughputSpendAckVisible": [Function],
-                  "title": [Function],
-                  "ttl90DaysEnabled": [Function],
-                  "uniqueKeys": [Function],
-                  "uniqueKeysPlaceholder": [Function],
-                  "uniqueKeysVisible": [Function],
-                  "upsellAnchorText": [Function],
-                  "upsellAnchorUrl": [Function],
-                  "upsellMessage": [Function],
-                  "upsellMessageAriaLabel": [Function],
-                  "useIndexingForSharedThroughput": [Function],
-                  "visible": [Function],
-                },
                GraphStylingPane {
                  "container": [Circular],
                  "firstFieldHasFocus": [Function],
@@ -1504,89 +1255,6 @@ exports[`SettingsComponent renders 1`] = `
              ],
              "_refreshSparkEnabledStateForAccount": [Function],
              "_resetNotebookWorkspace": [Function],
-              "addCollectionPane": AddCollectionPane {
-                "_isSynapseLinkEnabled": [Function],
-                "autoPilotThroughput": [Function],
-                "autoPilotUsageCost": [Function],
-                "canConfigureThroughput": [Function],
-                "canExceedMaximumValue": [Function],
-                "canRequestSupport": [Function],
-                "collectionId": [Function],
-                "collectionIdTitle": [Function],
-                "collectionWithThroughputInShared": [Function],
-                "collectionWithThroughputInSharedTitle": [Function],
-                "container": [Circular],
-                "costsVisible": [Function],
-                "databaseCreateNew": [Function],
-                "databaseCreateNewShared": [Function],
-                "databaseHasSharedOffer": [Function],
-                "databaseId": [Function],
-                "databaseIds": [Function],
-                "dedicatedRequestUnitsUsageCost": [Function],
-                "displayCollectionThroughput": [Function],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "formWarnings": [Function],
-                "freeTierExceedThroughputTooltip": [Function],
-                "id": "addcollectionpane",
-                "isAnalyticalStorageOn": [Function],
-                "isAutoPilotSelected": [Function],
-                "isEnableMongoCapabilityEnabled": [Function],
-                "isExecuting": [Function],
-                "isFixedStorageSelected": [Function],
-                "isFreeTierAccount": [Function],
-                "isNonTableApi": [Function],
-                "isPreferredApiTable": [Function],
-                "isSharedAutoPilotSelected": [Function],
-                "isSynapseLinkSupported": [Function],
-                "isSynapseLinkUpdating": [Function],
-                "isTemplateReady": [Function],
-                "isTryCosmosDBSubscription": [Function],
-                "isUnlimitedStorageSelected": [Function],
-                "largePartitionKey": [Function],
-                "lowerCasePartitionKeyName": [Function],
-                "maxCollectionsReached": [Function],
-                "maxCollectionsReachedMessage": [Function],
-                "maxThroughputRU": [Function],
-                "minThroughputRU": [Function],
-                "onMoreDetailsKeyPress": [Function],
-                "partitionKey": [Function],
-                "partitionKeyName": [Function],
-                "partitionKeyPattern": [Function],
-                "partitionKeyPlaceholder": [Function],
-                "partitionKeyTitle": [Function],
-                "partitionKeyVisible": [Function],
-                "requestUnitsUsageCost": [Function],
-                "ruToolTipText": [Function],
-                "sharedAutoPilotThroughput": [Function],
-                "sharedThroughputRangeText": [Function],
-                "shouldCreateMongoWildcardIndex": [Function],
-                "shouldUseDatabaseThroughput": [Function],
-                "showAnalyticalStore": [Function],
-                "showEnableSynapseLink": [Function],
-                "showIndexingOptionsForSharedThroughput": [Function],
-                "showUpsellMessage": [Function],
-                "storage": [Function],
-                "throughputDatabase": [Function],
-                "throughputMultiPartition": [Function],
-                "throughputRangeText": [Function],
-                "throughputSinglePartition": [Function],
-                "throughputSpendAck": [Function],
-                "throughputSpendAckText": [Function],
-                "throughputSpendAckVisible": [Function],
-                "title": [Function],
-                "ttl90DaysEnabled": [Function],
-                "uniqueKeys": [Function],
-                "uniqueKeysPlaceholder": [Function],
-                "uniqueKeysVisible": [Function],
-                "upsellAnchorText": [Function],
-                "upsellAnchorUrl": [Function],
-                "upsellMessage": [Function],
-                "upsellMessageAriaLabel": [Function],
-                "useIndexingForSharedThroughput": [Function],
-                "visible": [Function],
-              },
              "addCollectionText": [Function],
              "addDatabasePane": AddDatabasePane {
                "autoPilotUsageCost": [Function],
@@ -2644,89 +2312,6 @@ exports[`SettingsComponent renders 1`] = `
                    "upsellMessageAriaLabel": [Function],
                    "visible": [Function],
                  },
-                  AddCollectionPane {
-                    "_isSynapseLinkEnabled": [Function],
-                    "autoPilotThroughput": [Function],
-                    "autoPilotUsageCost": [Function],
-                    "canConfigureThroughput": [Function],
-                    "canExceedMaximumValue": [Function],
-                    "canRequestSupport": [Function],
-                    "collectionId": [Function],
-                    "collectionIdTitle": [Function],
-                    "collectionWithThroughputInShared": [Function],
-                    "collectionWithThroughputInSharedTitle": [Function],
-                    "container": [Circular],
-                    "costsVisible": [Function],
-                    "databaseCreateNew": [Function],
-                    "databaseCreateNewShared": [Function],
-                    "databaseHasSharedOffer": [Function],
-                    "databaseId": [Function],
-                    "databaseIds": [Function],
-                    "dedicatedRequestUnitsUsageCost": [Function],
-                    "displayCollectionThroughput": [Function],
-                    "firstFieldHasFocus": [Function],
-                    "formErrors": [Function],
-                    "formErrorsDetails": [Function],
-                    "formWarnings": [Function],
-                    "freeTierExceedThroughputTooltip": [Function],
-                    "id": "addcollectionpane",
-                    "isAnalyticalStorageOn": [Function],
-                    "isAutoPilotSelected": [Function],
-                    "isEnableMongoCapabilityEnabled": [Function],
-                    "isExecuting": [Function],
-                    "isFixedStorageSelected": [Function],
-                    "isFreeTierAccount": [Function],
-                    "isNonTableApi": [Function],
-                    "isPreferredApiTable": [Function],
-                    "isSharedAutoPilotSelected": [Function],
-                    "isSynapseLinkSupported": [Function],
-                    "isSynapseLinkUpdating": [Function],
-                    "isTemplateReady": [Function],
-                    "isTryCosmosDBSubscription": [Function],
-                    "isUnlimitedStorageSelected": [Function],
-                    "largePartitionKey": [Function],
-                    "lowerCasePartitionKeyName": [Function],
-                    "maxCollectionsReached": [Function],
-                    "maxCollectionsReachedMessage": [Function],
-                    "maxThroughputRU": [Function],
-                    "minThroughputRU": [Function],
-                    "onMoreDetailsKeyPress": [Function],
-                    "partitionKey": [Function],
-                    "partitionKeyName": [Function],
-                    "partitionKeyPattern": [Function],
-                    "partitionKeyPlaceholder": [Function],
-                    "partitionKeyTitle": [Function],
-                    "partitionKeyVisible": [Function],
-                    "requestUnitsUsageCost": [Function],
-                    "ruToolTipText": [Function],
-                    "sharedAutoPilotThroughput": [Function],
-                    "sharedThroughputRangeText": [Function],
-                    "shouldCreateMongoWildcardIndex": [Function],
-                    "shouldUseDatabaseThroughput": [Function],
-                    "showAnalyticalStore": [Function],
-                    "showEnableSynapseLink": [Function],
-                    "showIndexingOptionsForSharedThroughput": [Function],
-                    "showUpsellMessage": [Function],
-                    "storage": [Function],
-                    "throughputDatabase": [Function],
-                    "throughputMultiPartition": [Function],
-                    "throughputRangeText": [Function],
-                    "throughputSinglePartition": [Function],
-                    "throughputSpendAck": [Function],
-                    "throughputSpendAckText": [Function],
-                    "throughputSpendAckVisible": [Function],
-                    "title": [Function],
-                    "ttl90DaysEnabled": [Function],
-                    "uniqueKeys": [Function],
-                    "uniqueKeysPlaceholder": [Function],
-                    "uniqueKeysVisible": [Function],
-                    "upsellAnchorText": [Function],
-                    "upsellAnchorUrl": [Function],
-                    "upsellMessage": [Function],
-                    "upsellMessageAriaLabel": [Function],
-                    "useIndexingForSharedThroughput": [Function],
-                    "visible": [Function],
-                  },
                  GraphStylingPane {
                    "container": [Circular],
                    "firstFieldHasFocus": [Function],
@@ -2795,89 +2380,6 @@ exports[`SettingsComponent renders 1`] = `
                ],
                "_refreshSparkEnabledStateForAccount": [Function],
                "_resetNotebookWorkspace": [Function],
-                "addCollectionPane": AddCollectionPane {
-                  "_isSynapseLinkEnabled": [Function],
-                  "autoPilotThroughput": [Function],
-                  "autoPilotUsageCost": [Function],
-                  "canConfigureThroughput": [Function],
-                  "canExceedMaximumValue": [Function],
-                  "canRequestSupport": [Function],
-                  "collectionId": [Function],
-                  "collectionIdTitle": [Function],
-                  "collectionWithThroughputInShared": [Function],
-                  "collectionWithThroughputInSharedTitle": [Function],
-                  "container": [Circular],
-                  "costsVisible": [Function],
-                  "databaseCreateNew": [Function],
-                  "databaseCreateNewShared": [Function],
-                  "databaseHasSharedOffer": [Function],
-                  "databaseId": [Function],
-                  "databaseIds": [Function],
-                  "dedicatedRequestUnitsUsageCost": [Function],
-                  "displayCollectionThroughput": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "formWarnings": [Function],
-                  "freeTierExceedThroughputTooltip": [Function],
-                  "id": "addcollectionpane",
-                  "isAnalyticalStorageOn": [Function],
-                  "isAutoPilotSelected": [Function],
-                  "isEnableMongoCapabilityEnabled": [Function],
-                  "isExecuting": [Function],
-                  "isFixedStorageSelected": [Function],
-                  "isFreeTierAccount": [Function],
-                  "isNonTableApi": [Function],
-                  "isPreferredApiTable": [Function],
-                  "isSharedAutoPilotSelected": [Function],
-                  "isSynapseLinkSupported": [Function],
-                  "isSynapseLinkUpdating": [Function],
-                  "isTemplateReady": [Function],
-                  "isTryCosmosDBSubscription": [Function],
-                  "isUnlimitedStorageSelected": [Function],
-                  "largePartitionKey": [Function],
-                  "lowerCasePartitionKeyName": [Function],
-                  "maxCollectionsReached": [Function],
-                  "maxCollectionsReachedMessage": [Function],
-                  "maxThroughputRU": [Function],
-                  "minThroughputRU": [Function],
-                  "onMoreDetailsKeyPress": [Function],
-                  "partitionKey": [Function],
-                  "partitionKeyName": [Function],
-                  "partitionKeyPattern": [Function],
-                  "partitionKeyPlaceholder": [Function],
-                  "partitionKeyTitle": [Function],
-                  "partitionKeyVisible": [Function],
-                  "requestUnitsUsageCost": [Function],
-                  "ruToolTipText": [Function],
-                  "sharedAutoPilotThroughput": [Function],
-                  "sharedThroughputRangeText": [Function],
-                  "shouldCreateMongoWildcardIndex": [Function],
-                  "shouldUseDatabaseThroughput": [Function],
-                  "showAnalyticalStore": [Function],
-                  "showEnableSynapseLink": [Function],
-                  "showIndexingOptionsForSharedThroughput": [Function],
-                  "showUpsellMessage": [Function],
-                  "storage": [Function],
-                  "throughputDatabase": [Function],
-                  "throughputMultiPartition": [Function],
-                  "throughputRangeText": [Function],
-                  "throughputSinglePartition": [Function],
-                  "throughputSpendAck": [Function],
-                  "throughputSpendAckText": [Function],
-                  "throughputSpendAckVisible": [Function],
-                  "title": [Function],
-                  "ttl90DaysEnabled": [Function],
-                  "uniqueKeys": [Function],
-                  "uniqueKeysPlaceholder": [Function],
-                  "uniqueKeysVisible": [Function],
-                  "upsellAnchorText": [Function],
-                  "upsellAnchorUrl": [Function],
-                  "upsellMessage": [Function],
-                  "upsellMessageAriaLabel": [Function],
-                  "useIndexingForSharedThroughput": [Function],
-                  "visible": [Function],
-                },
                "addCollectionText": [Function],
                "addDatabasePane": AddDatabasePane {
                  "autoPilotUsageCost": [Function],
@@ -3922,89 +3424,6 @@ exports[`SettingsComponent renders 1`] = `
                  "upsellMessageAriaLabel": [Function],
                  "visible": [Function],
                },
-                AddCollectionPane {
-                  "_isSynapseLinkEnabled": [Function],
-                  "autoPilotThroughput": [Function],
-                  "autoPilotUsageCost": [Function],
-                  "canConfigureThroughput": [Function],
-                  "canExceedMaximumValue": [Function],
-                  "canRequestSupport": [Function],
-                  "collectionId": [Function],
-                  "collectionIdTitle": [Function],
-                  "collectionWithThroughputInShared": [Function],
-                  "collectionWithThroughputInSharedTitle": [Function],
-                  "container": [Circular],
-                  "costsVisible": [Function],
-                  "databaseCreateNew": [Function],
-                  "databaseCreateNewShared": [Function],
-                  "databaseHasSharedOffer": [Function],
-                  "databaseId": [Function],
-                  "databaseIds": [Function],
-                  "dedicatedRequestUnitsUsageCost": [Function],
-                  "displayCollectionThroughput": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "formWarnings": [Function],
-                  "freeTierExceedThroughputTooltip": [Function],
-                  "id": "addcollectionpane",
-                  "isAnalyticalStorageOn": [Function],
-                  "isAutoPilotSelected": [Function],
-                  "isEnableMongoCapabilityEnabled": [Function],
-                  "isExecuting": [Function],
-                  "isFixedStorageSelected": [Function],
-                  "isFreeTierAccount": [Function],
-                  "isNonTableApi": [Function],
-                  "isPreferredApiTable": [Function],
-                  "isSharedAutoPilotSelected": [Function],
-                  "isSynapseLinkSupported": [Function],
-                  "isSynapseLinkUpdating": [Function],
-                  "isTemplateReady": [Function],
-                  "isTryCosmosDBSubscription": [Function],
-                  "isUnlimitedStorageSelected": [Function],
-                  "largePartitionKey": [Function],
-                  "lowerCasePartitionKeyName": [Function],
-                  "maxCollectionsReached": [Function],
-                  "maxCollectionsReachedMessage": [Function],
-                  "maxThroughputRU": [Function],
-                  "minThroughputRU": [Function],
-                  "onMoreDetailsKeyPress": [Function],
-                  "partitionKey": [Function],
-                  "partitionKeyName": [Function],
-                  "partitionKeyPattern": [Function],
-                  "partitionKeyPlaceholder": [Function],
-                  "partitionKeyTitle": [Function],
-                  "partitionKeyVisible": [Function],
-                  "requestUnitsUsageCost": [Function],
-                  "ruToolTipText": [Function],
-                  "sharedAutoPilotThroughput": [Function],
-                  "sharedThroughputRangeText": [Function],
-                  "shouldCreateMongoWildcardIndex": [Function],
-                  "shouldUseDatabaseThroughput": [Function],
-                  "showAnalyticalStore": [Function],
-                  "showEnableSynapseLink": [Function],
-                  "showIndexingOptionsForSharedThroughput": [Function],
-                  "showUpsellMessage": [Function],
-                  "storage": [Function],
-                  "throughputDatabase": [Function],
-                  "throughputMultiPartition": [Function],
-                  "throughputRangeText": [Function],
-                  "throughputSinglePartition": [Function],
-                  "throughputSpendAck": [Function],
-                  "throughputSpendAckText": [Function],
-                  "throughputSpendAckVisible": [Function],
-                  "title": [Function],
-                  "ttl90DaysEnabled": [Function],
-                  "uniqueKeys": [Function],
-                  "uniqueKeysPlaceholder": [Function],
-                  "uniqueKeysVisible": [Function],
-                  "upsellAnchorText": [Function],
-                  "upsellAnchorUrl": [Function],
-                  "upsellMessage": [Function],
-                  "upsellMessageAriaLabel": [Function],
-                  "useIndexingForSharedThroughput": [Function],
-                  "visible": [Function],
-                },
                GraphStylingPane {
                  "container": [Circular],
                  "firstFieldHasFocus": [Function],
@@ -4073,89 +3492,6 @@ exports[`SettingsComponent renders 1`] = `
              ],
              "_refreshSparkEnabledStateForAccount": [Function],
              "_resetNotebookWorkspace": [Function],
-              "addCollectionPane": AddCollectionPane {
-                "_isSynapseLinkEnabled": [Function],
-                "autoPilotThroughput": [Function],
-                "autoPilotUsageCost": [Function],
-                "canConfigureThroughput": [Function],
-                "canExceedMaximumValue": [Function],
-                "canRequestSupport": [Function],
-                "collectionId": [Function],
-                "collectionIdTitle": [Function],
-                "collectionWithThroughputInShared": [Function],
-                "collectionWithThroughputInSharedTitle": [Function],
-                "container": [Circular],
-                "costsVisible": [Function],
-                "databaseCreateNew": [Function],
-                "databaseCreateNewShared": [Function],
-                "databaseHasSharedOffer": [Function],
-                "databaseId": [Function],
-                "databaseIds": [Function],
-                "dedicatedRequestUnitsUsageCost": [Function],
-                "displayCollectionThroughput": [Function],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "formWarnings": [Function],
-                "freeTierExceedThroughputTooltip": [Function],
-                "id": "addcollectionpane",
-                "isAnalyticalStorageOn": [Function],
-                "isAutoPilotSelected": [Function],
-                "isEnableMongoCapabilityEnabled": [Function],
-                "isExecuting": [Function],
-                "isFixedStorageSelected": [Function],
-                "isFreeTierAccount": [Function],
-                "isNonTableApi": [Function],
-                "isPreferredApiTable": [Function],
-                "isSharedAutoPilotSelected": [Function],
-                "isSynapseLinkSupported": [Function],
-                "isSynapseLinkUpdating": [Function],
-                "isTemplateReady": [Function],
-                "isTryCosmosDBSubscription": [Function],
-                "isUnlimitedStorageSelected": [Function],
-                "largePartitionKey": [Function],
-                "lowerCasePartitionKeyName": [Function],
-                "maxCollectionsReached": [Function],
-                "maxCollectionsReachedMessage": [Function],
-                "maxThroughputRU": [Function],
-                "minThroughputRU": [Function],
-                "onMoreDetailsKeyPress": [Function],
-                "partitionKey": [Function],
-                "partitionKeyName": [Function],
-                "partitionKeyPattern": [Function],
-                "partitionKeyPlaceholder": [Function],
-                "partitionKeyTitle": [Function],
-                "partitionKeyVisible": [Function],
-                "requestUnitsUsageCost": [Function],
-                "ruToolTipText": [Function],
-                "sharedAutoPilotThroughput": [Function],
-                "sharedThroughputRangeText": [Function],
-                "shouldCreateMongoWildcardIndex": [Function],
-                "shouldUseDatabaseThroughput": [Function],
-                "showAnalyticalStore": [Function],
-                "showEnableSynapseLink": [Function],
-                "showIndexingOptionsForSharedThroughput": [Function],
-                "showUpsellMessage": [Function],
-                "storage": [Function],
-                "throughputDatabase": [Function],
-                "throughputMultiPartition": [Function],
-                "throughputRangeText": [Function],
-                "throughputSinglePartition": [Function],
-                "throughputSpendAck": [Function],
-                "throughputSpendAckText": [Function],
-                "throughputSpendAckVisible": [Function],
-                "title": [Function],
-                "ttl90DaysEnabled": [Function],
-                "uniqueKeys": [Function],
-                "uniqueKeysPlaceholder": [Function],
-                "uniqueKeysVisible": [Function],
-                "upsellAnchorText": [Function],
-                "upsellAnchorUrl": [Function],
-                "upsellMessage": [Function],
-                "upsellMessageAriaLabel": [Function],
-                "useIndexingForSharedThroughput": [Function],
-                "visible": [Function],
-              },
              "addCollectionText": [Function],
              "addDatabasePane": AddDatabasePane {
                "autoPilotUsageCost": [Function],
--- a/src/Explorer/Controls/SmartUi/SmartUiComponent.tsx
+++ b/src/Explorer/Controls/SmartUi/SmartUiComponent.tsx
@@ -115,7 +115,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
    fontSize: 12,
  };

-public override componentDidUpdate(): void {
+  componentDidUpdate(): void {
    if (!this.shouldCheckErrors) {
      this.shouldCheckErrors = true;
      return;
@@ -407,7 +407,7 @@ public override componentDidUpdate(): void {
    );
  }

-public override render(): JSX.Element {
+  render(): JSX.Element {
    return this.renderNode(this.props.descriptor.root);
  }
 }
--- a/src/Explorer/Controls/Tabs/TabComponent.tsx
+++ b/src/Explorer/Controls/Tabs/TabComponent.tsx
@@ -68,7 +68,7 @@ export class TabComponent extends React.Component<TabComponentProps> {
    });
  }

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    const currentTabContent = this.props.tabs[this.props.currentTabIndex].content;
    let className = "tabComponentContent";
    if (currentTabContent.className) {
--- a/src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.test.tsx
+++ b/src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.test.tsx
@@ -0,0 +1,13 @@
+import { shallow } from "enzyme";
+import React from "react";
+import { CostEstimateText } from "./CostEstimateText";
+const props = {
+  requestUnits: 5,
+  isAutoscale: false,
+};
+describe("CostEstimateText Pane", () => {
+  it("should render Default properly", () => {
+    const wrapper = shallow(<CostEstimateText {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});
--- a/src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx
+++ b/src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx
@@ -0,0 +1,77 @@
+import { Text } from "@fluentui/react";
+import React, { FunctionComponent } from "react";
+import { InfoTooltip } from "../../../../Common/Tooltip/InfoTooltip";
+import * as SharedConstants from "../../../../Shared/Constants";
+import { userContext } from "../../../../UserContext";
+import {
+  calculateEstimateNumber,
+  computeRUUsagePriceHourly,
+  getAutoscalePricePerRu,
+  getCurrencySign,
+  getMultimasterMultiplier,
+  getPriceCurrency,
+  getPricePerRu,
+} from "../../../../Utils/PricingUtils";
+
+interface CostEstimateTextProps {
+  requestUnits: number;
+  isAutoscale: boolean;
+}
+
+export const CostEstimateText: FunctionComponent<CostEstimateTextProps> = ({
+  requestUnits,
+  isAutoscale,
+}: CostEstimateTextProps) => {
+  const { databaseAccount } = userContext;
+  if (!databaseAccount?.properties) {
+    return <></>;
+  }
+
+  const serverId: string = userContext.portalEnv;
+  const numberOfRegions: number = databaseAccount.properties.readLocations?.length || 1;
+  const multimasterEnabled: boolean = databaseAccount.properties.enableMultipleWriteLocations;
+  const hourlyPrice: number = computeRUUsagePriceHourly({
+    serverId,
+    requestUnits,
+    numberOfRegions,
+    multimasterEnabled,
+    isAutoscale,
+  });
+  const dailyPrice: number = hourlyPrice * 24;
+  const monthlyPrice: number = hourlyPrice * SharedConstants.hoursInAMonth;
+  const currency: string = getPriceCurrency(serverId);
+  const currencySign: string = getCurrencySign(serverId);
+  const multiplier = getMultimasterMultiplier(numberOfRegions, multimasterEnabled);
+  const pricePerRu = isAutoscale
+    ? getAutoscalePricePerRu(serverId, multiplier) * multiplier
+    : getPricePerRu(serverId) * multiplier;
+
+  const iconWithEstimatedCostDisclaimer: JSX.Element = <InfoTooltip>PricingUtils.estimatedCostDisclaimer</InfoTooltip>;
+
+  if (isAutoscale) {
+    return (
+      <Text variant="small">
+        Estimated monthly cost ({currency}){iconWithEstimatedCostDisclaimer}:{" "}
+        <b>
+          {currencySign + calculateEstimateNumber(monthlyPrice / 10)} -{" "}
+          {currencySign + calculateEstimateNumber(monthlyPrice)}{" "}
+        </b>
+        ({numberOfRegions + (numberOfRegions === 1 ? " region" : " regions")}, {requestUnits / 10} - {requestUnits}{" "}
+        RU/s, {currencySign + pricePerRu}/RU)
+      </Text>
+    );
+  }
+
+  return (
+    <Text variant="small">
+      Estimated cost ({currency}){iconWithEstimatedCostDisclaimer}:{" "}
+      <b>
+        {currencySign + calculateEstimateNumber(hourlyPrice)} hourly /{" "}
+        {currencySign + calculateEstimateNumber(dailyPrice)} daily /{" "}
+        {currencySign + calculateEstimateNumber(monthlyPrice)} monthly{" "}
+      </b>
+      ({numberOfRegions + (numberOfRegions === 1 ? " region" : " regions")}, {requestUnits}RU/s,{" "}
+      {currencySign + pricePerRu}/RU)
+    </Text>
+  );
+};
--- a/src/Explorer/Controls/ThroughputInput/CostEstimateText/snapshots/CostEstimateText.test.tsx.snap
+++ b/src/Explorer/Controls/ThroughputInput/CostEstimateText/snapshots/CostEstimateText.test.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CostEstimateText Pane should render Default properly 1`] = `<Fragment />`;
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.test.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.test.tsx
@@ -0,0 +1,36 @@
+import { mount, ReactWrapper } from "enzyme";
+import React from "react";
+import { ThroughputInput } from "./ThroughputInput";
+const props = {
+  isDatabase: false,
+  showFreeTierExceedThroughputTooltip: true,
+  isSharded: false,
+  setThroughputValue: () => jest.fn(),
+  setIsAutoscale: () => jest.fn(),
+  onCostAcknowledgeChange: () => jest.fn(),
+};
+describe("ThroughputInput Pane", () => {
+  let wrapper: ReactWrapper;
+
+  beforeEach(() => {
+    wrapper = mount(<ThroughputInput {...props} />);
+  });
+
+  it("should render Default properly", () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("test Autoscale Mode select", () => {
+    wrapper.setProps({ isAutoscaleSelected: true });
+    expect(wrapper.find('[aria-label="ruDescription"]').at(0).text()).toBe(
+      "Estimate your required RU/s with capacity calculator."
+    );
+    expect(wrapper.find('[aria-label="maxRUDescription"]').at(0).text()).toContain("Max RU/s");
+  });
+
+  it("test Manual Mode select", () => {
+    wrapper.setProps({ isAutoscaleSelected: false });
+    expect(wrapper.find('[aria-label="ruDescription"]').at(0).text()).toContain("Estimate your required RU/s with");
+    expect(wrapper.find('[aria-label="capacityLink"]').at(0).text()).toContain("capacity calculator");
+  });
+});
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
@@ -1,11 +1,14 @@
-import { Checkbox, DirectionalHint, Icon, Link, Stack, Text, TextField, TooltipHost } from "@fluentui/react";
-import React from "react";
+import { Checkbox, DirectionalHint, Link, Stack, Text, TextField, TooltipHost } from "@fluentui/react";
+import React, { FunctionComponent, useState } from "react";
 import * as Constants from "../../../Common/Constants";
+import { InfoTooltip } from "../../../Common/Tooltip/InfoTooltip";
 import * as SharedConstants from "../../../Shared/Constants";
 import { userContext } from "../../../UserContext";
 import { getCollectionName } from "../../../Utils/APITypeUtils";
 import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
 import * as PricingUtils from "../../../Utils/PricingUtils";
+import { CostEstimateText } from "./CostEstimateText/CostEstimateText";
+import "./ThroughputInput.less";

 export interface ThroughputInputProps {
  isDatabase: boolean;
@@ -14,178 +17,25 @@ export interface ThroughputInputProps {
  setThroughputValue: (throughput: number) => void;
  setIsAutoscale: (isAutoscale: boolean) => void;
  onCostAcknowledgeChange: (isAcknowledged: boolean) => void;
+  isAutoscaleSelected?: boolean;
+  throughput?: number;
 }

-export interface ThroughputInputState {
-  isAutoscaleSelected: boolean;
-  throughput: number;
-  isCostAcknowledged: boolean;
-  throughputError: string;
-}
-
-export class ThroughputInput extends React.Component<ThroughputInputProps, ThroughputInputState> {
-  constructor(props: ThroughputInputProps) {
-    super(props);
-
-    this.state = {
-      isAutoscaleSelected: true,
-      throughput: AutoPilotUtils.minAutoPilotThroughput,
-      isCostAcknowledged: false,
-      throughputError: undefined,
-    };
-
-    this.props.setThroughputValue(AutoPilotUtils.minAutoPilotThroughput);
-    this.props.setIsAutoscale(true);
-  }
-
-public override render(): JSX.Element {
-    return (
-      <div className="throughputInputContainer throughputInputSpacing">
-        <Stack horizontal>
-          <span className="mandatoryStar">*&nbsp;</span>
-          <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
-            {this.getThroughputLabelText()}
-          </Text>
-          <TooltipHost directionalHint={DirectionalHint.bottomLeftEdge} content={PricingUtils.getRuToolTipText()}>
-            <Icon iconName="Info" className="panelInfoIcon" />
-          </TooltipHost>
-        </Stack>
-
-        <Stack horizontal verticalAlign="center">
-          <input
-            className="throughputInputRadioBtn"
-            aria-label="Autoscale mode"
-            checked={this.state.isAutoscaleSelected}
-            type="radio"
-            role="radio"
-            tabIndex={0}
-            onChange={this.onAutoscaleRadioBtnChange.bind(this)}
-          />
-          <span className="throughputInputRadioBtnLabel">Autoscale</span>
-
-          <input
-            className="throughputInputRadioBtn"
-            aria-label="Manual mode"
-            checked={!this.state.isAutoscaleSelected}
-            type="radio"
-            role="radio"
-            tabIndex={0}
-            onChange={this.onManualRadioBtnChange.bind(this)}
-          />
-          <span className="throughputInputRadioBtnLabel">Manual</span>
-        </Stack>
-
-        {this.state.isAutoscaleSelected && (
-          <Stack className="throughputInputSpacing">
-            <Text variant="small">
-              Estimate your required RU/s with&nbsp;
-              <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
-                capacity calculator
-              </Link>
-              .
-            </Text>
-
-            <Stack horizontal>
-              <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
-                {this.props.isDatabase ? "Database" : getCollectionName()} max RU/s
-              </Text>
-              <TooltipHost directionalHint={DirectionalHint.bottomLeftEdge} content={this.getAutoScaleTooltip()}>
-                <Icon iconName="Info" className="panelInfoIcon" />
-              </TooltipHost>
-            </Stack>
-
-            <TextField
-              type="number"
-              styles={{
-                fieldGroup: { width: 300, height: 27 },
-                field: { fontSize: 12 },
-              }}
-              onChange={(event, newInput?: string) => this.onThroughputValueChange(newInput)}
-              step={AutoPilotUtils.autoPilotIncrementStep}
-              min={AutoPilotUtils.minAutoPilotThroughput}
-              value={this.state.throughput.toString()}
-              aria-label="Max request units per second"
-              errorMessage={this.state.throughputError}
-            />
-
-            <Text variant="small">
-              Your {this.props.isDatabase ? "database" : getCollectionName().toLocaleLowerCase()} throughput will
-              automatically scale from{" "}
-              <b>
-                {AutoPilotUtils.getMinRUsBasedOnUserInput(this.state.throughput)} RU/s (10% of max RU/s) -{" "}
-                {this.state.throughput} RU/s
-              </b>{" "}
-              based on usage.
-            </Text>
-          </Stack>
-        )}
-
-        {!this.state.isAutoscaleSelected && (
-          <Stack className="throughputInputSpacing">
-            <Text variant="small">
-              Estimate your required RU/s with&nbsp;
-              <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
-                capacity calculator
-              </Link>
-              .
-            </Text>
-
-            <TooltipHost
-              directionalHint={DirectionalHint.topLeftEdge}
-              content={
-                this.props.showFreeTierExceedThroughputTooltip &&
-                this.state.throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs400
-                  ? "The first 400 RU/s in this account are free. Billing will apply to any throughput beyond 400 RU/s."
-                  : undefined
-              }
-            >
-              <TextField
-                type="number"
-                styles={{
-                  fieldGroup: { width: 300, height: 27 },
-                  field: { fontSize: 12 },
-                }}
-                onChange={(event, newInput?: string) => this.onThroughputValueChange(newInput)}
-                step={100}
-                min={SharedConstants.CollectionCreation.DefaultCollectionRUs400}
-                max={userContext.isTryCosmosDBSubscription ? Constants.TryCosmosExperience.maxRU : Infinity}
-                value={this.state.throughput.toString()}
-                aria-label="Max request units per second"
-                required={true}
-                errorMessage={this.state.throughputError}
-              />
-            </TooltipHost>
-          </Stack>
-        )}
-
-        <CostEstimateText requestUnits={this.state.throughput} isAutoscale={this.state.isAutoscaleSelected} />
-
-        {this.state.throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K && (
-          <Stack horizontal verticalAlign="start">
-            <span className="mandatoryStar">*&nbsp;</span>
-            <Checkbox
-              checked={this.state.isCostAcknowledged}
-              styles={{
-                checkbox: { width: 12, height: 12 },
-                label: { padding: 0, margin: "4px 4px 0 0" },
-              }}
-              onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) => {
-                this.setState({ isCostAcknowledged: isChecked });
-                this.props.onCostAcknowledgeChange(isChecked);
-              }}
-            />
-            <Text variant="small" style={{ lineHeight: "20px" }}>
-              {this.getCostAcknowledgeText()}
-            </Text>
-          </Stack>
-        )}
-      </div>
-    );
-  }
-
-  private getThroughputLabelText(): string {
+export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
+  isDatabase,
+  showFreeTierExceedThroughputTooltip,
+  setThroughputValue,
+  setIsAutoscale,
+  isSharded,
+  isAutoscaleSelected = true,
+  throughput = AutoPilotUtils.minAutoPilotThroughput,
+  onCostAcknowledgeChange,
+}: ThroughputInputProps) => {
+  const [isCostAcknowledged, setIsCostAcknowledged] = useState<boolean>(false);
+  const [throughputError, setThroughputError] = useState<string>("");
+  const getThroughputLabelText = (): string => {
    let throughputHeaderText: string;
-    if (this.state.isAutoscaleSelected) {
+    if (isAutoscaleSelected) {
      throughputHeaderText = AutoPilotUtils.getAutoPilotHeaderText().toLocaleLowerCase();
    } else {
      const minRU: string = SharedConstants.CollectionCreation.DefaultCollectionRUs400.toLocaleString();
@@ -194,29 +44,26 @@ public override render(): JSX.Element {
        : "unlimited";
      throughputHeaderText = `throughput (${minRU} - ${maxRU} RU/s)`;
    }
+    return `${isDatabase ? "Database" : getCollectionName()} ${throughputHeaderText}`;
+  };

-    return `${this.props.isDatabase ? "Database" : getCollectionName()} ${throughputHeaderText}`;
-  }
-
-  private onThroughputValueChange(newInput: string): void {
+  const onThroughputValueChange = (newInput: string): void => {
    const newThroughput = parseInt(newInput);
-    this.setState({ throughput: newThroughput });
-    this.props.setThroughputValue(newThroughput);
-
-    if (!this.props.isSharded && newThroughput > 10000) {
-      this.setState({ throughputError: "Unsharded collections support up to 10,000 RUs" });
+    setThroughputValue(newThroughput);
+    if (!isSharded && newThroughput > 10000) {
+      setThroughputError("Unsharded collections support up to 10,000 RUs");
    } else {
-      this.setState({ throughputError: undefined });
+      setThroughputError("");
    }
-  }
+  };

-  private getAutoScaleTooltip(): string {
+  const getAutoScaleTooltip = (): string => {
    const collectionName = getCollectionName().toLocaleLowerCase();
    return `Set the max RU/s to the highest RU/s you want your ${collectionName} to scale to. The ${collectionName} will scale between 10% of max RU/s to the max RU/s based on usage.`;
-  }
+  };

-  private getCostAcknowledgeText(): string {
-    const { databaseAccount } = userContext;
+  const getCostAcknowledgeText = (): string => {
+    const databaseAccount = userContext.databaseAccount;
    if (!databaseAccount || !databaseAccount.properties) {
      return "";
    }
@@ -225,98 +72,159 @@ public override render(): JSX.Element {
    const multimasterEnabled: boolean = databaseAccount.properties.enableMultipleWriteLocations;

    return PricingUtils.getEstimatedSpendAcknowledgeString(
-      this.state.throughput,
+      throughput,
      userContext.portalEnv,
      numberOfRegions,
      multimasterEnabled,
-      this.state.isAutoscaleSelected
+      isAutoscaleSelected
    );
-  }
+  };

-  private onAutoscaleRadioBtnChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    if (event.target.checked && !this.state.isAutoscaleSelected) {
-      this.setState({ isAutoscaleSelected: true, throughput: AutoPilotUtils.minAutoPilotThroughput });
-      this.props.setIsAutoscale(true);
+  const handleOnChangeMode = (event: React.ChangeEvent<HTMLInputElement>, mode: string): void => {
+    if (mode === "Autoscale") {
+      setThroughputValue(AutoPilotUtils.minAutoPilotThroughput);
+      setIsAutoscale(true);
+    } else {
+      setThroughputValue(SharedConstants.CollectionCreation.DefaultCollectionRUs400);
+      setIsAutoscale(false);
    }
-  }
-
-  private onManualRadioBtnChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    if (event.target.checked && this.state.isAutoscaleSelected) {
-      this.setState({
-        isAutoscaleSelected: false,
-        throughput: SharedConstants.CollectionCreation.DefaultCollectionRUs400,
-      });
-      this.props.setIsAutoscale(false);
-      this.props.setThroughputValue(SharedConstants.CollectionCreation.DefaultCollectionRUs400);
-    }
-  }
-}
-
-interface CostEstimateTextProps {
-  requestUnits: number;
-  isAutoscale: boolean;
-}
-
-const CostEstimateText: React.FunctionComponent<CostEstimateTextProps> = (props: CostEstimateTextProps) => {
-  const { requestUnits, isAutoscale } = props;
-  const { databaseAccount } = userContext;
-  if (!databaseAccount?.properties) {
-    return <></>;
-  }
-
-  const serverId: string = userContext.portalEnv;
-  const numberOfRegions: number = databaseAccount.properties.readLocations?.length || 1;
-  const multimasterEnabled: boolean = databaseAccount.properties.enableMultipleWriteLocations;
-  const hourlyPrice: number = PricingUtils.computeRUUsagePriceHourly({
-    serverId,
-    requestUnits,
-    numberOfRegions,
-    multimasterEnabled,
-    isAutoscale,
-  });
-  const dailyPrice: number = hourlyPrice * 24;
-  const monthlyPrice: number = hourlyPrice * SharedConstants.hoursInAMonth;
-  const currency: string = PricingUtils.getPriceCurrency(serverId);
-  const currencySign: string = PricingUtils.getCurrencySign(serverId);
-  const multiplier = PricingUtils.getMultimasterMultiplier(numberOfRegions, multimasterEnabled);
-  const pricePerRu = isAutoscale
-    ? PricingUtils.getAutoscalePricePerRu(serverId, multiplier) * multiplier
-    : PricingUtils.getPricePerRu(serverId) * multiplier;
-
-  const iconWithEstimatedCostDisclaimer: JSX.Element = (
-    <TooltipHost
-      directionalHint={DirectionalHint.bottomLeftEdge}
-      content={PricingUtils.estimatedCostDisclaimer}
-      styles={{ root: { verticalAlign: "bottom" } }}
-    >
-      <Icon iconName="Info" className="panelInfoIcon" />
-    </TooltipHost>
-  );
-
-  if (isAutoscale) {
-    return (
-      <Text variant="small">
-        Estimated monthly cost ({currency}){iconWithEstimatedCostDisclaimer}:{" "}
-        <b>
-          {currencySign + PricingUtils.calculateEstimateNumber(monthlyPrice / 10)} -{" "}
-          {currencySign + PricingUtils.calculateEstimateNumber(monthlyPrice)}{" "}
-        </b>
-        ({numberOfRegions + (numberOfRegions === 1 ? " region" : " regions")}, {requestUnits / 10} - {requestUnits}{" "}
-        RU/s, {currencySign + pricePerRu}/RU)
-      </Text>
-    );
-  }
+  };

  return (
-    <Text variant="small">
-      Estimated cost ({currency}){iconWithEstimatedCostDisclaimer}:{" "}
-      <b>
-        {currencySign + PricingUtils.calculateEstimateNumber(hourlyPrice)} hourly /{" "}
-        {currencySign + PricingUtils.calculateEstimateNumber(dailyPrice)} daily /{" "}
-        {currencySign + PricingUtils.calculateEstimateNumber(monthlyPrice)} monthly{" "}
-      </b>
-      ({numberOfRegions + (numberOfRegions === 1 ? " region" : " regions")}, {requestUnits}RU/s,{" "}
-      {currencySign + pricePerRu}/RU)
-    </Text>
+    <div className="throughputInputContainer throughputInputSpacing">
+      <Stack horizontal>
+        <span className="mandatoryStar">*&nbsp;</span>
+        <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
+          {getThroughputLabelText()}
+        </Text>
+        <InfoTooltip>{PricingUtils.getRuToolTipText()}</InfoTooltip>
+      </Stack>
+
+      <Stack horizontal verticalAlign="center">
+        <input
+          className="throughputInputRadioBtn"
+          aria-label="Autoscale mode"
+          checked={isAutoscaleSelected}
+          type="radio"
+          role="radio"
+          tabIndex={0}
+          onChange={(e) => handleOnChangeMode(e, "Autoscale")}
+        />
+        <span className="throughputInputRadioBtnLabel">Autoscale</span>
+
+        <input
+          className="throughputInputRadioBtn"
+          aria-label="Manual mode"
+          checked={!isAutoscaleSelected}
+          type="radio"
+          role="radio"
+          tabIndex={0}
+          onChange={(e) => handleOnChangeMode(e, "Manual")}
+        />
+        <span className="throughputInputRadioBtnLabel">Manual</span>
+      </Stack>
+
+      {isAutoscaleSelected && (
+        <Stack className="throughputInputSpacing">
+          <Text variant="small" aria-label="ruDescription">
+            Estimate your required RU/s with{" "}
+            <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" aria-label="ruDescription">
+              capacity calculator
+            </Link>
+            .
+          </Text>
+
+          <Stack horizontal>
+            <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }} aria-label="maxRUDescription">
+              {isDatabase ? "Database" : getCollectionName()} Max RU/s
+            </Text>
+            <InfoTooltip>{getAutoScaleTooltip()}</InfoTooltip>
+          </Stack>
+
+          <TextField
+            type="number"
+            styles={{
+              fieldGroup: { width: 300, height: 27 },
+              field: { fontSize: 12 },
+            }}
+            onChange={(event, newInput?: string) => onThroughputValueChange(newInput)}
+            step={AutoPilotUtils.autoPilotIncrementStep}
+            min={AutoPilotUtils.minAutoPilotThroughput}
+            value={throughput.toString()}
+            aria-label="Max request units per second"
+            required={true}
+            errorMessage={throughputError}
+          />
+
+          <Text variant="small">
+            Your {isDatabase ? "database" : getCollectionName().toLocaleLowerCase()} throughput will automatically scale
+            from{" "}
+            <b>
+              {AutoPilotUtils.getMinRUsBasedOnUserInput(throughput)} RU/s (10% of max RU/s) - {throughput} RU/s
+            </b>{" "}
+            based on usage.
+          </Text>
+        </Stack>
+      )}
+
+      {!isAutoscaleSelected && (
+        <Stack className="throughputInputSpacing">
+          <Text variant="small" aria-label="ruDescription">
+            Estimate your required RU/s with&nbsp;
+            <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" aria-label="capacityLink">
+              capacity calculator
+            </Link>
+            .
+          </Text>
+
+          <TooltipHost
+            directionalHint={DirectionalHint.topLeftEdge}
+            content={
+              showFreeTierExceedThroughputTooltip &&
+              throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs400
+                ? "The first 400 RU/s in this account are free. Billing will apply to any throughput beyond 400 RU/s."
+                : undefined
+            }
+          >
+            <TextField
+              type="number"
+              styles={{
+                fieldGroup: { width: 300, height: 27 },
+                field: { fontSize: 12 },
+              }}
+              onChange={(event, newInput?: string) => onThroughputValueChange(newInput)}
+              step={100}
+              min={SharedConstants.CollectionCreation.DefaultCollectionRUs400}
+              max={userContext.isTryCosmosDBSubscription ? Constants.TryCosmosExperience.maxRU : Infinity}
+              value={throughput.toString()}
+              aria-label="Max request units per second"
+              required={true}
+              errorMessage={throughputError}
+            />
+          </TooltipHost>
+        </Stack>
+      )}
+
+      <CostEstimateText requestUnits={throughput} isAutoscale={isAutoscaleSelected} />
+
+      {throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K && (
+        <Stack horizontal verticalAlign="start">
+          <Checkbox
+            checked={isCostAcknowledged}
+            styles={{
+              checkbox: { width: 12, height: 12 },
+              label: { padding: 0, margin: "4px 4px 0 0" },
+            }}
+            onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) => {
+              setIsCostAcknowledged(isChecked);
+              onCostAcknowledgeChange(isChecked);
+            }}
+          />
+          <Text variant="small" style={{ lineHeight: "20px" }}>
+            {getCostAcknowledgeText()}
+          </Text>
+        </Stack>
+      )}
+    </div>
  );
 };
--- a/src/Explorer/Controls/ThroughputInput/snapshots/ThroughputInput.test.tsx.snap
+++ b/src/Explorer/Controls/ThroughputInput/snapshots/ThroughputInput.test.tsx.snap
--- a/src/Explorer/Controls/TreeComponent/TreeComponent.tsx
+++ b/src/Explorer/Controls/TreeComponent/TreeComponent.tsx
@@ -56,7 +56,7 @@ export interface TreeComponentProps {
 }

 export class TreeComponent extends React.Component<TreeComponentProps> {
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return (
      <div style={this.props.style} className={`treeComponent ${this.props.className}`}>
        <TreeNodeComponent paddingLeft={0} node={this.props.rootNode} generation={0} />
@@ -93,7 +93,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
    };
  }

-public override componentDidUpdate(prevProps: TreeNodeComponentProps, prevState: TreeNodeComponentState) {
+  componentDidUpdate(prevProps: TreeNodeComponentProps, prevState: TreeNodeComponentState) {
    // Only call when expand has actually changed
    if (this.state.isExpanded !== prevState.isExpanded) {
      if (this.state.isExpanded) {
@@ -110,7 +110,7 @@ public override componentDidUpdate(prevProps: TreeNodeComponentProps, prevState:
    }
  }

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return this.renderNode(this.props.node, this.props.generation);
  }

--- a/src/Explorer/Explorer.tsx
+++ b/src/Explorer/Explorer.tsx
@@ -31,7 +31,7 @@ import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants"
 import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
 import { ArcadiaResourceManager } from "../SparkClusterManager/ArcadiaResourceManager";
 import { updateUserContext, userContext } from "../UserContext";
-import { getCollectionName } from "../Utils/APITypeUtils";
+import { getCollectionName, getDatabaseName, getUploadName } from "../Utils/APITypeUtils";
 import { decryptJWTToken, getAuthorizationHeader } from "../Utils/AuthorizationUtils";
 import { stringToBlob } from "../Utils/BlobUtils";
 import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
@@ -49,9 +49,9 @@ import { NotebookContentItem, NotebookContentItemType } from "./Notebook/Noteboo
 import type NotebookManager from "./Notebook/NotebookManager";
 import type { NotebookPaneContent } from "./Notebook/NotebookManager";
 import { NotebookUtil } from "./Notebook/NotebookUtil";
-import AddCollectionPane from "./Panes/AddCollectionPane";
 import { AddCollectionPanel } from "./Panes/AddCollectionPanel";
 import AddDatabasePane from "./Panes/AddDatabasePane";
+import { AddDatabasePanel } from "./Panes/AddDatabasePanel/AddDatabasePanel";
 import { BrowseQueriesPane } from "./Panes/BrowseQueriesPane/BrowseQueriesPane";
 import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
 import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
@@ -150,7 +150,6 @@ export default class Explorer {

  // Contextual panes
  public addDatabasePane: AddDatabasePane;
-  public addCollectionPane: AddCollectionPane;
  public graphStylingPane: GraphStylingPane;
  public cassandraAddCollectionPane: CassandraAddCollectionPane;
  private gitHubClient: GitHubClient;
@@ -412,14 +411,6 @@ export default class Explorer {
      container: this,
    });

-    this.addCollectionPane = new AddCollectionPane({
-      isPreferredApiTable: ko.computed(() => userContext.apiType === "Tables"),
-      id: "addcollectionpane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
    this.graphStylingPane = new GraphStylingPane({
      id: "graphstylingpane",
      visible: ko.observable<boolean>(false),
@@ -442,12 +433,7 @@ export default class Explorer {
      }
    });

-    this._panes = [
-      this.addDatabasePane,
-      this.addCollectionPane,
-      this.graphStylingPane,
-      this.cassandraAddCollectionPane,
-    ];
+    this._panes = [this.addDatabasePane, this.graphStylingPane, this.cassandraAddCollectionPane];
    this.addDatabaseText.subscribe((addDatabaseText: string) => this.addDatabasePane.title(addDatabaseText));
    this.isTabsContentExpanded = ko.observable(false);

@@ -471,11 +457,6 @@ export default class Explorer {
        this.collectionTreeNodeAltText("Container");
        this.deleteCollectionText("Delete Container");
        this.deleteDatabaseText("Delete Database");
-        this.addCollectionPane.title("Add Container");
-        this.addCollectionPane.collectionIdTitle("Container id");
-        this.addCollectionPane.collectionWithThroughputInSharedTitle(
-          "Provision dedicated throughput for this container"
-        );
        this.refreshTreeTitle("Refresh containers");
        break;
      case "Mongo":
@@ -485,11 +466,6 @@ export default class Explorer {
        this.collectionTreeNodeAltText("Collection");
        this.deleteCollectionText("Delete Collection");
        this.deleteDatabaseText("Delete Database");
-        this.addCollectionPane.title("Add Collection");
-        this.addCollectionPane.collectionIdTitle("Collection id");
-        this.addCollectionPane.collectionWithThroughputInSharedTitle(
-          "Provision dedicated throughput for this collection"
-        );
        this.refreshTreeTitle("Refresh collections");
        break;
      case "Gremlin":
@@ -499,9 +475,6 @@ export default class Explorer {
        this.deleteDatabaseText("Delete Database");
        this.collectionTitle("Gremlin API");
        this.collectionTreeNodeAltText("Graph");
-        this.addCollectionPane.title("Add Graph");
-        this.addCollectionPane.collectionIdTitle("Graph id");
-        this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this graph");
        this.refreshTreeTitle("Refresh graphs");
        break;
      case "Tables":
@@ -511,9 +484,6 @@ export default class Explorer {
        this.deleteDatabaseText("Delete Database");
        this.collectionTitle("Azure Table API");
        this.collectionTreeNodeAltText("Table");
-        this.addCollectionPane.title("Add Table");
-        this.addCollectionPane.collectionIdTitle("Table id");
-        this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this table");
        this.refreshTreeTitle("Refresh tables");
        this.tableDataClient = new TablesAPIDataClient();
        break;
@@ -524,9 +494,6 @@ export default class Explorer {
        this.deleteDatabaseText("Delete Keyspace");
        this.collectionTitle("Cassandra API");
        this.collectionTreeNodeAltText("Table");
-        this.addCollectionPane.title("Add Table");
-        this.addCollectionPane.collectionIdTitle("Table id");
-        this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this table");
        this.refreshTreeTitle("Refresh tables");
        this.tableDataClient = new CassandraAPIDataClient();
        break;
@@ -1845,9 +1812,6 @@ export default class Explorer {
  public onNewCollectionClicked(databaseId?: string): void {
    if (userContext.apiType === "Cassandra") {
      this.cassandraAddCollectionPane.open();
-    } else if (userContext.features.enableKOPanel) {
-      this.addCollectionPane.open(this.selectedDatabaseId());
-      document.getElementById("linkAddCollection").focus();
    } else {
      this.openAddCollectionPanel(databaseId);
    }
@@ -1961,7 +1925,7 @@ export default class Explorer {

  public openDeleteDatabaseConfirmationPane(): void {
    this.openSidePanel(
-      "Delete Database",
+      "Delete " + getDatabaseName(),
      <DeleteDatabaseConfirmationPanel
        explorer={this}
        openNotificationConsole={this.expandConsole}
@@ -1972,12 +1936,12 @@ export default class Explorer {
  }

  public openUploadItemsPanePane(): void {
-    this.openSidePanel("Upload", <UploadItemsPane explorer={this} closePanel={this.closeSidePanel} />);
+    this.openSidePanel("Upload " + getUploadName(), <UploadItemsPane explorer={this} />);
  }

  public openSettingPane(): void {
    this.openSidePanel(
-      "Settings",
+      "Setting",
      <SettingsPane expandConsole={() => this.expandConsole()} closePanel={this.closeSidePanel} />
    );
  }
@@ -2005,6 +1969,21 @@ export default class Explorer {
      />
    );
  }
+  public openAddDatabasePane(): void {
+    if (userContext.features.enableKOPanel) {
+      this.addDatabasePane.open();
+      document.getElementById("linkAddDatabase").focus();
+    } else {
+      this.openSidePanel(
+        "Add " + getDatabaseName(),
+        <AddDatabasePanel
+          explorer={this}
+          openNotificationConsole={this.expandConsole}
+          closePanel={this.closeSidePanel}
+        />
+      );
+    }
+  }

  public openBrowseQueriesPanel(): void {
    this.openSidePanel("Open Saved Queries", <BrowseQueriesPane explorer={this} closePanel={this.closeSidePanel} />);
@@ -2021,7 +2000,7 @@ export default class Explorer {
  public openUploadFilePanel(parent?: NotebookContentItem): void {
    parent = parent || this.resourceTree.myNotebooksContentRoot;
    this.openSidePanel(
-      "Upload File",
+      "Upload file to notebook server",
      <UploadFilePane
        expandConsole={() => this.expandConsole()}
        closePanel={this.closeSidePanel}
--- a/src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts
+++ b/src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts
@@ -733,15 +733,16 @@ export class D3ForceGraph implements GraphRenderer {
      .attr("aria-label", (d: D3Node) => {
        return this.retrieveNodeCaption(d);
      })
-      .on("dblclick", function (_: MouseEvent, d: D3Node) {
+      .on("dblclick", function (this: Element, _: MouseEvent, d: D3Node) {
+        // https://stackoverflow.com/a/41945742 ('this' implicitly has type 'any' because it does not have a type annotation)
        // this is the <g> element
        self.onNodeClicked(this.parentNode, d);
      })
-      .on("click", function (_: MouseEvent, d: D3Node) {
+      .on("click", function (this: Element, _: MouseEvent, d: D3Node) {
        // this is the <g> element
        self.onNodeClicked(this.parentNode, d);
      })
-      .on("keypress", function (event: KeyboardEvent, d: D3Node) {
+      .on("keypress", function (this: Element, event: KeyboardEvent, d: D3Node) {
        if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
          event.stopPropagation();
          // this is the <g> element
--- a/src/Explorer/Graph/GraphExplorerComponent/EditorNeighborsComponent.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/EditorNeighborsComponent.tsx
@@ -34,7 +34,7 @@ export class EditorNeighborsComponent extends React.Component<EditorNeighborsCom
    this.addNewEdgeToNeighbor = this.props.isSource ? this.addNewEdgeToSource : this.addNewEdgeToTarget;
  }

-  public override componentDidMount(): void {
+  public componentDidMount(): void {
    // Show empty text boxes by default if no neighbor for convenience
    if (this.props.editedNeighbors.currentNeighbors.length === 0) {
      if (this.props.isSource) {
@@ -45,7 +45,7 @@ export class EditorNeighborsComponent extends React.Component<EditorNeighborsCom
    }
  }

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    const neighborTitle = this.props.isSource
      ? EditorNeighborsComponent.SOURCE_TITLE
      : EditorNeighborsComponent.TARGET_TITLE;
--- a/src/Explorer/Graph/GraphExplorerComponent/EditorNodePropertiesComponent.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/EditorNodePropertiesComponent.tsx
@@ -20,7 +20,7 @@ export class EditorNodePropertiesComponent extends React.Component<EditorNodePro
  public static readonly VERTEX_PROPERTY_TYPES = ["string", "number", "boolean" /* 'null' */]; // TODO Enable null when fully supported by backend
  private static readonly DEFAULT_PROPERTY_TYPE = "string";

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return (
      <table className="propertyTable">
        <tbody>
--- a/src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx
@@ -965,7 +965,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
  }

  /* ************* React life-cycle methods *********** */
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    const currentTabIndex = ((resultDisplay: ResultDisplay): number => {
      switch (resultDisplay) {
        case ResultDisplay.Graph:
@@ -1022,10 +1022,10 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    );
  }

-  public override componentWillUnmount(): void {
+  public componentWillUnmount(): void {
    this.gremlinClient.destroy();
  }
-  public override componentDidMount(): void {
+  public componentDidMount(): void {
    if (this.props.onLoadStartKey != null && this.props.onLoadStartKey != undefined) {
      TelemetryProcessor.traceSuccess(
        Action.Tab,
@@ -1069,7 +1069,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    }
  }

-  public override componentDidUpdate(): void {
+  public componentDidUpdate(): void {
    this.onIsPropertyPaneEditing(this.isPropertyPaneEditing());
    this.onIsNewVertexDisabledChange(this.isNewVertexDisabled());
  }
--- a/src/Explorer/Graph/GraphExplorerComponent/GraphVizComponent.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/GraphVizComponent.tsx
@@ -18,20 +18,20 @@ export class GraphVizComponent extends React.Component<GraphVizComponentProps> {
    this.forceGraph = new D3ForceGraph(this.props.forceGraphParams);
  }

-  public override componentDidMount(): void {
+  public componentDidMount(): void {
    this.forceGraph.init(this.rootNode);
  }

-  public override shouldComponentUpdate(): boolean {
+  public shouldComponentUpdate(): boolean {
    // Prevents component re-rendering
    return false;
  }

-  public override componentWillUnmount(): void {
+  public componentWillUnmount(): void {
    this.forceGraph.destroy();
  }

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return (
      <svg id="maingraph" ref={(elt: Element) => this.setRef(elt)}>
        <title>Main Graph</title>
--- a/src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx
@@ -18,7 +18,7 @@ interface LeftPaneComponentProps {
 }

 export class LeftPaneComponent extends React.Component<LeftPaneComponentProps> {
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return (
      <div className="leftPane">
        <div className="paneTitle leftPaneResults">Results</div>
--- a/src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx
@@ -12,7 +12,7 @@ interface MiddlePaneComponentProps {
 }

 export class MiddlePaneComponent extends React.Component<MiddlePaneComponentProps> {
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return (
      <div className="middlePane">
        <div className="graphTitle">
--- a/src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx
@@ -104,7 +104,7 @@ export class NodePropertiesComponent extends React.Component<
    return null;
  }

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    if (!this.props.node) {
      return <span />;
    } else {
--- a/src/Explorer/Graph/GraphExplorerComponent/QueryContainerComponent.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/QueryContainerComponent.tsx
@@ -25,7 +25,7 @@ export class QueryContainerComponent extends React.Component<
    };
  }

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return (
      <div className="queryContainer">
        <InputTypeaheadComponent.InputTypeaheadComponent
--- a/src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNeighborsComponent.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNeighborsComponent.tsx
@@ -20,7 +20,7 @@ export class ReadOnlyNeighborsComponent extends React.Component<ReadOnlyNeighbor
  private static readonly NO_TARGETS_LABEL = "No targets found";
  private static readonly TARGET_TITLE = "Target";

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    const neighbors = this.props.isSource ? this.props.node.sources : this.props.node.targets;
    const noNeighborsLabel = this.props.isSource
      ? ReadOnlyNeighborsComponent.NO_SOURCES_LABEL
--- a/src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.tsx
@@ -12,7 +12,7 @@ export interface ReadOnlyNodePropertiesComponentProps {
 }

 export class ReadOnlyNodePropertiesComponent extends React.Component<ReadOnlyNodePropertiesComponentProps> {
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return (
      <table className="roPropertyTable propertyTable">
        <tbody>
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
@@ -266,8 +266,7 @@ function createNewDatabase(container: Explorer): CommandButtonComponentProps {
    iconSrc: AddDatabaseIcon,
    iconAlt: label,
    onCommandClick: () => {
-      container.addDatabasePane.open();
-      document.getElementById("linkAddDatabase").focus();
+      container.openAddDatabasePane();
    },
    commandButtonLabel: label,
    ariaLabel: label,
--- a/src/Explorer/Menus/CommandBar/MemoryTrackerComponent.tsx
+++ b/src/Explorer/Menus/CommandBar/MemoryTrackerComponent.tsx
@@ -10,17 +10,17 @@ interface MemoryTrackerProps {
 export class MemoryTrackerComponent extends React.Component<MemoryTrackerProps> {
  private memoryUsageInfoSubscription: Subscription;

-  public override componentDidMount(): void {
+  public componentDidMount(): void {
    this.memoryUsageInfoSubscription = this.props.memoryUsageInfo.subscribe(() => {
      this.forceUpdate();
    });
  }

-  public override componentWillUnmount(): void {
+  public componentWillUnmount(): void {
    this.memoryUsageInfoSubscription && this.memoryUsageInfoSubscription.dispose();
  }

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    const memoryUsageInfo: MemoryUsageInfo = this.props.memoryUsageInfo();
    if (!memoryUsageInfo) {
      return (
--- a/src/Explorer/Menus/NavBar/ControlBarComponent.tsx
+++ b/src/Explorer/Menus/NavBar/ControlBarComponent.tsx
@@ -23,7 +23,7 @@ export class ControlBarComponent extends React.Component<ControlBarComponentProp
    );
  }

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    if (!this.props.buttons || this.props.buttons.length < 1) {
      return <React.Fragment />;
    }
--- a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
+++ b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
@@ -74,7 +74,7 @@ export class NotificationConsoleComponent extends React.Component<
    this.prevHeaderStatus = undefined;
  }

-  public override componentDidUpdate(
+  public componentDidUpdate(
    prevProps: NotificationConsoleComponentProps,
    prevState: NotificationConsoleComponentState
  ): void {
@@ -102,7 +102,7 @@ export class NotificationConsoleComponent extends React.Component<
    this.consoleHeaderElement = element;
  };

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    const numInProgress = this.state.allConsoleData.filter(
      (data: ConsoleData) => data.type === ConsoleDataType.InProgress
    ).length;
--- a/src/Explorer/Notebook/NotebookComponent/NotebookComponent.tsx
+++ b/src/Explorer/Notebook/NotebookComponent/NotebookComponent.tsx
@@ -6,11 +6,11 @@ import { default as Contents } from "./contents";
 export class NotebookComponent extends React.Component<{ contentRef: ContentRef }> {
  notificationSystem!: ReactNotificationSystem;

-public override shouldComponentUpdate(nextProps: { contentRef: ContentRef }): boolean {
+  shouldComponentUpdate(nextProps: { contentRef: ContentRef }): boolean {
    return nextProps.contentRef !== this.props.contentRef;
  }

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    return (
      <div className="notebookComponentContainer">
        <Contents contentRef={this.props.contentRef} />
--- a/src/Explorer/Notebook/NotebookComponent/NotebookComponentAdapter.tsx
+++ b/src/Explorer/Notebook/NotebookComponent/NotebookComponentAdapter.tsx
@@ -53,7 +53,7 @@ export class NotebookComponentAdapter extends NotebookComponentBootstrapper impl
    };
  }

-  protected override renderExtraComponent = (): JSX.Element => {
+  protected renderExtraComponent = (): JSX.Element => {
    return <VirtualCommandBarComponent contentRef={this.contentRef} onRender={this.onUpdateKernelInfo} />;
  };
 }
--- a/src/Explorer/Notebook/NotebookComponent/VirtualCommandBarComponent.tsx
+++ b/src/Explorer/Notebook/NotebookComponent/VirtualCommandBarComponent.tsx
@@ -16,7 +16,7 @@ class VirtualCommandBarComponent extends React.Component<VirtualCommandBarCompon
    this.state = {};
  }

-public override shouldComponentUpdate(nextProps: VirtualCommandBarComponentProps): boolean {
+  shouldComponentUpdate(nextProps: VirtualCommandBarComponentProps): boolean {
    return (
      this.props.kernelStatus !== nextProps.kernelStatus ||
      this.props.kernelSpecName !== nextProps.kernelSpecName ||
@@ -24,7 +24,7 @@ public override shouldComponentUpdate(nextProps: VirtualCommandBarComponentProps
    );
  }

-  public override render(): JSX.Element {
+  public render(): JSX.Element {
    this.props.onRender && this.props.onRender();
    return <></>;
  }
--- a/src/Explorer/Notebook/NotebookComponent/contents/file/index.tsx
+++ b/src/Explorer/Notebook/NotebookComponent/contents/file/index.tsx
@@ -55,7 +55,7 @@ export class File extends React.PureComponent<FileProps> {
    return choice;
  };

-public override render(): JSX.Element {
+  render(): JSX.Element {
    const choice = this.getChoice();

    // Right now we only handle one kind of editor
--- a/src/Explorer/Notebook/NotebookComponent/contents/file/text-file.tsx
+++ b/src/Explorer/Notebook/NotebookComponent/contents/file/text-file.tsx
@@ -35,7 +35,7 @@ interface TextFileState {
 }

 class EditorPlaceholder extends React.PureComponent<MonacoEditorProps> {
-public override render(): JSX.Element {
+  render(): JSX.Element {
    // TODO: Show a little blocky placeholder
    return null;
  }
@@ -53,13 +53,13 @@ export class TextFile extends React.PureComponent<TextFileProps, TextFileState>
    this.props.handleChange(source);
  };

-public override componentDidMount(): void {
+  componentDidMount(): void {
    import(/* webpackChunkName: "monaco-editor" */ "@nteract/monaco-editor").then((module) => {
      this.setState({ Editor: module.default });
    });
  }

-public override render(): JSX.Element {
+  render(): JSX.Element {
    const Editor = this.state.Editor;

    return (
--- a/src/Explorer/Notebook/NotebookComponent/contents/index.tsx
+++ b/src/Explorer/Notebook/NotebookComponent/contents/index.tsx
@@ -54,7 +54,7 @@ class Contents extends React.PureComponent<ContentsProps> {
    SAVE: ["ctrl+s", "ctrl+shift+s", "meta+s", "meta+shift+s"],
  };

-public override render(): JSX.Element {
+  render(): JSX.Element {
    const { contentRef, handlers } = this.props;

    if (!contentRef) {
--- a/src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.tsx
+++ b/src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.tsx
@@ -25,7 +25,7 @@ export interface NotebookRendererProps {
 * This is the class that uses nteract to render a read-only notebook.
 */
 class NotebookReadOnlyRenderer extends React.Component<NotebookRendererProps> {
-public override componentDidMount() {
+  componentDidMount() {
    if (!userContext.features.sandboxNotebookOutputs) {
      loadTransform(this.props as any);
    }
@@ -54,7 +54,7 @@ public override componentDidMount() {
    );
  }

-public override render(): JSX.Element {
+  render(): JSX.Element {
    return (
      <div className="NotebookReadOnlyRender">
        <Cells contentRef={this.props.contentRef}>
--- a/src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.tsx
+++ b/src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.tsx
@@ -68,22 +68,22 @@ class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
    };
  }

-public override componentDidMount() {
+  componentDidMount() {
    if (!userContext.features.sandboxNotebookOutputs) {
      loadTransform(this.props as any);
    }
    this.props.updateNotebookParentDomElt(this.props.contentRef, this.notebookRendererRef.current);
  }

-public override componentDidUpdate() {
+  componentDidUpdate() {
    this.props.updateNotebookParentDomElt(this.props.contentRef, this.notebookRendererRef.current);
  }

-public override componentWillUnmount() {
+  componentWillUnmount() {
    this.props.updateNotebookParentDomElt(this.props.contentRef, undefined);
  }

-public override render(): JSX.Element {
+  render(): JSX.Element {
    return (
      <>
        <div className="NotebookRendererContainer">
--- a/src/Explorer/Notebook/NotebookRenderer/Prompt.tsx
+++ b/src/Explorer/Notebook/NotebookRenderer/Prompt.tsx
@@ -36,7 +36,7 @@ interface DispatchProps {
 type Props = StateProps & DispatchProps & ComponentProps;

 export class PromptPure extends React.Component<Props> {
-public override render() {
+  render() {
    return (
      <div className="nteract-cell-prompt">
        {this.props.children({
--- a/src/Explorer/Notebook/NotebookRenderer/StatusBar.tsx
+++ b/src/Explorer/Notebook/NotebookRenderer/StatusBar.tsx
@@ -45,14 +45,14 @@ const BarContainer = styled.div`
 `;

 export class StatusBar extends React.Component<Props> {
-public override shouldComponentUpdate(nextProps: Props): boolean {
+  shouldComponentUpdate(nextProps: Props): boolean {
    if (this.props.lastSaved !== nextProps.lastSaved || this.props.kernelStatus !== nextProps.kernelStatus) {
      return true;
    }
    return false;
  }

-public override render() {
+  render() {
    const name = this.props.kernelSpecDisplayName || "Loading...";

    return (
--- a/src/Explorer/Notebook/NotebookRenderer/Toolbar.tsx
+++ b/src/Explorer/Notebook/NotebookRenderer/Toolbar.tsx
@@ -37,7 +37,7 @@ interface StateProps {
 class BaseToolbar extends React.PureComponent<ComponentProps & DispatchProps & StateProps> {
  static contextType = CellToolbarContext;

-public override render(): JSX.Element {
+  render(): JSX.Element {
    let items: IContextualMenuItem[] = [];

    if (this.props.cellType === "code") {
--- a/src/Explorer/Notebook/NotebookRenderer/decorators/CellCreator.tsx
+++ b/src/Explorer/Notebook/NotebookRenderer/decorators/CellCreator.tsx
@@ -132,7 +132,7 @@ export class PureCellCreator extends React.PureComponent<CellCreatorProps> {
    this.props.createCell("code", this.props.above);
  };

-public override render() {
+  render() {
    return (
      <CreatorHoverMask>
        <CreatorHoverRegion>
@@ -171,7 +171,7 @@ class CellCreator extends React.PureComponent<ComponentProps & DispatchProps & S
      : createCellBelow({ cellType: type, id, source: "", contentRef });
  };

-public override render() {
+  render() {
    return (
      <React.Fragment>
        {this.props.isFirstCell && (
--- a/src/Explorer/Notebook/NotebookRenderer/decorators/CellLabeler.tsx
+++ b/src/Explorer/Notebook/NotebookRenderer/decorators/CellLabeler.tsx
@@ -19,7 +19,7 @@ interface StateProps {
 * Displays "Cell <index>"
 */
 class CellLabeler extends React.Component<ComponentProps & StateProps> {
-public override render() {
+  render() {
    return (
      <div className="CellLabeler">
        <div className="CellLabel">Cell {this.props.cellIndex + 1}</div>
--- a/src/Explorer/Notebook/NotebookRenderer/decorators/HoverableCell.tsx
+++ b/src/Explorer/Notebook/NotebookRenderer/decorators/HoverableCell.tsx
@@ -20,7 +20,7 @@ interface DispatchProps {
 * HoverableCell sets the hovered cell
 */
 class HoverableCell extends React.Component<ComponentProps & DispatchProps> {
-public override render() {
+  render() {
    return (
      <div className="HoverableCell" onMouseEnter={this.props.hover} onMouseLeave={this.props.unHover}>
        {this.props.children}
--- a/src/Explorer/Notebook/NotebookRenderer/decorators/draggable/index.tsx
+++ b/src/Explorer/Notebook/NotebookRenderer/decorators/draggable/index.tsx
@@ -173,11 +173,11 @@ function collectTarget(
 export class DraggableCellView extends React.Component<Props & DnDSourceProps & DnDTargetProps, State> {
  el?: HTMLDivElement | null;

-public override state = {
+  state = {
    hoverUpperHalf: true,
  };

-public override componentDidMount(): void {
+  componentDidMount(): void {
    const connectDragPreview = this.props.connectDragPreview;
    const img = new (window as any).Image();

@@ -193,7 +193,7 @@ public override componentDidMount(): void {
    focusCell({ id, contentRef });
  };

-public override render() {
+  render() {
    return this.props.connectDropTarget(
      // Sadly connectDropTarget _has_ to take a React element for a DOM element (no styled-divs)
      <div>
--- a/src/Explorer/Notebook/NotebookRenderer/decorators/hijack-scroll/index.tsx
+++ b/src/Explorer/Notebook/NotebookRenderer/decorators/hijack-scroll/index.tsx
@@ -47,15 +47,15 @@ export class HijackScroll extends React.Component<Props> {
    }
  }

-public override componentDidUpdate(prevProps: Props) {
+  componentDidUpdate(prevProps: Props) {
    this.scrollIntoViewIfNeeded(prevProps.focused);
  }

-public override componentDidMount(): void {
+  componentDidMount(): void {
    this.scrollIntoViewIfNeeded();
  }

-public override render() {
+  render() {
    return (
      <div
        onClick={this.props.selectCell}
--- a/src/Explorer/Notebook/NotebookRenderer/decorators/kbd-shortcuts/index.tsx
+++ b/src/Explorer/Notebook/NotebookRenderer/decorators/kbd-shortcuts/index.tsx
@@ -31,18 +31,18 @@ export class KeyboardShortcuts extends React.Component<Props> {
    this.keyDown = this.keyDown.bind(this);
  }

-public override shouldComponentUpdate(nextProps: Props) {
+  shouldComponentUpdate(nextProps: Props) {
    const newContentRef = this.props.contentRef !== nextProps.contentRef;
    const newFocusedCell = this.props.focusedCell !== nextProps.focusedCell;
    const newCellOrder = this.props.cellOrder && this.props.cellOrder.size !== nextProps.cellOrder.size;
    return newContentRef || newFocusedCell || newCellOrder;
  }

-public override componentDidMount(): void {
+  componentDidMount(): void {
    document.addEventListener("keydown", this.keyDown);
  }

-public override componentWillUnmount(): void {
+  componentWillUnmount(): void {
    document.removeEventListener("keydown", this.keyDown);
  }

@@ -102,7 +102,7 @@ public override componentWillUnmount(): void {
    }
  }

-public override render() {
+  render() {
    return <React.Fragment>{this.props.children}</React.Fragment>;
  }
 }
--- a/src/Explorer/Notebook/NotebookRenderer/markdown-cell.tsx
+++ b/src/Explorer/Notebook/NotebookRenderer/markdown-cell.tsx
@@ -54,7 +54,7 @@ export const Source = styled(BareSource)`
  width: -moz-available;
 `;
 export class PureMarkdownCell extends React.Component<ComponentProps & DispatchProps & StateProps> {
-public override render() {
+  render() {
    const { contentRef, id, cell, children } = this.props;

    const { isEditorFocused, isCellFocused, markdownOptions } = this.props;
--- a/src/Explorer/Notebook/NotebookRenderer/outputs/SandboxOutputs.tsx
+++ b/src/Explorer/Notebook/NotebookRenderer/outputs/SandboxOutputs.tsx
@@ -33,7 +33,7 @@ interface DispatchProps {
 export class SandboxOutputs extends React.PureComponent<ComponentProps & StateProps & DispatchProps> {
  private childWindow: Window;

-public override render(): JSX.Element {
+  render(): JSX.Element {
    // Using min-width to set the width of the iFrame, works around an issue in iOS that can prevent the iFrame from sizing correctly.
    return (
      <IframeResizer
@@ -72,11 +72,11 @@ public override render(): JSX.Element {
    postRobot.send(this.childWindow, "props", props);
  }

-public override componentDidMount(): void {
+  componentDidMount(): void {
    this.sendPropsToFrame();
  }

-public override componentDidUpdate(): void {
+  componentDidUpdate(): void {
    this.sendPropsToFrame();
  }
 }
--- a/src/Explorer/Notebook/SchemaAnalyzerComponent/SchemaAnalyzerComponent.tsx
+++ b/src/Explorer/Notebook/SchemaAnalyzerComponent/SchemaAnalyzerComponent.tsx
@@ -46,7 +46,7 @@ export class SchemaAnalyzerComponent extends React.Component<
    };
  }

-public override componentDidMount(): void {
+  componentDidMount(): void {
    loadTransform(this.props);
  }

@@ -78,7 +78,7 @@ public override componentDidMount(): void {
    this.props.runCell(this.props.contentRef, this.props.firstCellId);
  };

-public override render(): JSX.Element {
+  render(): JSX.Element {
    const { firstCellId: id, contentRef, kernelStatus, outputs } = this.props;
    if (!id) {
      return <></>;
--- a/src/Explorer/Notebook/SchemaAnalyzerComponent/SchemaAnalyzerComponentAdapter.tsx
+++ b/src/Explorer/Notebook/SchemaAnalyzerComponent/SchemaAnalyzerComponentAdapter.tsx
@@ -71,7 +71,7 @@ export class SchemaAnalyzerComponentAdapter extends NotebookComponentBootstrappe
    }
  }

-  public override renderComponent(): JSX.Element {
+  public renderComponent(): JSX.Element {
    const props = {
      contentRef: this.contentRef,
      kernelRef: this.kernelRef,
--- a/src/Explorer/Panes/AddCollectionPane.html
+++ b/src/Explorer/Panes/AddCollectionPane.html
@@ -1,602 +0,0 @@
-<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
-  <div class="contextual-pane-out" data-bind="setTemplateReady: true, click: cancel, clickBubble: false"></div>
-  <div class="contextual-pane" data-bind="attr: { id: id }">
-    <!-- Add collection form  -- Start -->
-    <div class="contextual-pane-in">
-      <form data-bind="submit: submit" style="height: 100%">
-        <div
-          class="paneContentContainer"
-          role="dialog"
-          aria-labelledby="containerTitle"
-          data-bind="template: { name: 'add-collection-inputs' }"
-        ></div>
-      </form>
-    </div>
-    <!-- Add collection form  -- End -->
-    <!-- Loader - Start -->
-    <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
-      <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
-    </div>
-    <!-- Loader - End -->
-  </div>
-</div>
-
-<script type="text/html" id="add-collection-inputs">
-  <!-- Add collection header - Start -->
-  <div class="firstdivbg headerline">
-    <span id="containerTitle" role="heading" aria-level="2" data-bind="text: title"></span>
-    <div
-      class="closeImg"
-      id="closeBtnAddCollection"
-      role="button"
-      aria-label="Add collection close pane"
-      data-bind="click: cancel, event: { keypress: onCloseKeyPress }"
-      tabindex="0"
-    >
-      <img src="../../../images/close-black.svg" title="Close" alt="Close" />
-    </div>
-  </div>
-  <!-- Add collection header - End -->
-
-  <!-- Add collection errors - Start -->
-  <div class="warningErrorContainer" aria-live="assertive" data-bind="visible: formErrors() && formErrors() !== ''">
-    <div class="warningErrorContent">
-      <span><img class="paneErrorIcon" src="/error_red.svg" alt="Error" /></span>
-      <span class="warningErrorDetailsLinkContainer">
-        <span class="formErrors" data-bind="text: formErrors, attr: { title: formErrors }"></span>
-        <a
-          class="errorLink"
-          role="link"
-          data-bind="visible: formErrorsDetails() && formErrorsDetails() !== '' , click: showErrorDetails, event: { keypress: onMoreDetailsKeyPress }"
-          tabindex="0"
-        >
-          More details</a
-        >
-      </span>
-    </div>
-  </div>
-  <div class="warningErrorContainer" aria-live="assertive" data-bind="visible: formWarnings() && formWarnings() !== ''">
-    <div class="warningErrorContent">
-      <span><img class="paneErrorIcon" src="/warning.svg" alt="Warning" /></span>
-      <span class="warningErrorDetailsLinkContainer">
-        <span class="formErrors" data-bind="text: formWarnings, attr: { title: formWarnings }"></span>
-      </span>
-    </div>
-  </div>
-  <!-- Add collection errors - End -->
-
-  <!-- upsell message - start -->
-  <div
-    class="infoBoxContainer"
-    aria-live="assertive"
-    data-bind="visible: showUpsellMessage && showUpsellMessage() && formErrors && !formErrors()"
-  >
-    <div class="infoBoxContent">
-      <span><img class="infoBoxIcon" src="/info_color.svg" alt="Promo" /></span>
-      <span class="infoBoxDetails">
-        <span class="infoBoxMessage" data-bind="text: upsellMessage, attr: { title: upsellMessage }"></span>
-        <a
-          class="underlinedLink"
-          id="linkAddCollection"
-          data-bind="text: upsellAnchorText, attr: { 'href': upsellAnchorUrl, 'aria-label': upsellMessageAriaLabel }"
-          target="_blank"
-          href=""
-          tabindex="0"
-        ></a>
-      </span>
-    </div>
-  </div>
-  <!-- upsell message - end -->
-
-  <!-- Add collection inputs - Start -->
-  <div class="paneMainContent" data-bind="visible: !maxCollectionsReached()">
-    <div data-bind="visible: !isPreferredApiTable()">
-      <p>
-        <span class="mandatoryStar">*</span>
-        <span class="addCollectionLabel">Database id</span>
-        <span class="infoTooltip" role="tooltip" tabindex="0">
-          <img class="infoImg" src="/info-bubble.svg" alt="More information" />
-          <span class="tooltiptext infoTooltipWidth"
-            >A database is analogous to a namespace. It is the unit of management for a set of containers.</span
-          >
-        </span>
-      </p>
-
-      <div class="createNewDatabaseOrUseExisting">
-        <input
-          class="createNewDatabaseOrUseExistingRadio"
-          aria-label="Create new database"
-          name="databaseType"
-          type="radio"
-          role="radio"
-          id="databaseCreateNew"
-          data-test="addCollection-createNewDatabase"
-          tabindex="0"
-          data-bind="checked: databaseCreateNew, checkedValue: true, attr: { 'aria-checked': databaseCreateNew() ? 'true' : 'false' }"
-        />
-        <span class="createNewDatabaseOrUseExistingSpace" for="databaseCreateNew">Create new</span>
-
-        <input
-          class="createNewDatabaseOrUseExistingRadio"
-          aria-label="Use existing database"
-          name="databaseType"
-          type="radio"
-          role="radio"
-          id="databaseUseExisting"
-          data-test="addCollection-existingDatabase"
-          tabindex="0"
-          data-bind="checked: databaseCreateNew, checkedValue: false, attr: { 'aria-checked': !databaseCreateNew() ? 'true' : 'false' }"
-        />
-        <span class="createNewDatabaseOrUseExistingSpace" for="databaseUseExisting">Use existing</span>
-      </div>
-
-      <input
-        name="newDatabaseId"
-        id="databaseId"
-        data-test="addCollection-newDatabaseId"
-        aria-required="true"
-        type="text"
-        autocomplete="off"
-        pattern="[^/?#\\]*[^/?# \\]"
-        title="May not end with space nor contain characters '\' '/' '#' '?'"
-        placeholder="Type a new database id"
-        size="40"
-        class="collid"
-        data-bind="visible: databaseCreateNew, textInput: databaseId, hasFocus: firstFieldHasFocus"
-        autofocus
-      />
-
-      <input
-        name="existingDatabaseId"
-        id="existingDatabaseId"
-        data-test="addCollection-existingDatabaseId"
-        aria-required="true"
-        type="text"
-        autocomplete="off"
-        pattern="[^/?#\\]*[^/?# \\]"
-        title="May not end with space nor contain characters '\' '/' '#' '?'"
-        list="databasesList"
-        placeholder="Choose an existing database"
-        size="40"
-        class="collid"
-        data-bind="visible: !databaseCreateNew(), textInput: databaseId, hasFocus: firstFieldHasFocus"
-      />
-
-      <datalist id="databasesList" data-bind="foreach: databaseIds" data-bind="visible: databaseCreateNew">
-        <option data-bind="value: $data"></option>
-      </datalist>
-
-      <!-- Database provisioned throughput - Start -->
-      <!-- ko if: canConfigureThroughput -->
-      <div class="databaseProvision" aria-label="Provision database throughput" data-bind="visible: databaseCreateNew">
-        <input
-          tabindex="0"
-          type="checkbox"
-          data-test="addCollectionPane-databaseSharedThroughput"
-          id="addCollection-databaseSharedThroughput"
-          title="Provision database throughput"
-          data-bind="checked: databaseCreateNewShared"
-        />
-        <span class="databaseProvisionText" for="databaseSharedThroughput">Provision database throughput</span>
-        <span class="infoTooltip" role="tooltip" tabindex="0">
-          <img class="infoImg" src="/info-bubble.svg" alt="More information" />
-          <span class="tooltiptext provisionDatabaseThroughput"
-            >Provisioned throughput at the database level will be shared across all containers within the
-            database.</span
-          >
-        </span>
-      </div>
-      <div data-bind="visible: databaseCreateNewShared() && databaseCreateNew()">
-        <!-- 1 -->
-        <throughput-input-autopilot-v3
-          params="{
-                                                                                                                  testId: 'databaseThroughputValue',
-                                                                                                                  value: throughputDatabase,
-                                                                                                                  minimum: minThroughputRU,
-                                                                                                                  maximum: maxThroughputRU,
-                                                                                                                  isEnabled: databaseCreateNewShared() && databaseCreateNew(),
-                                                                                                                  label: sharedThroughputRangeText,
-                                                                                                                  ariaLabel: sharedThroughputRangeText,
-                                                                                                                  costsVisible: costsVisible,
-                                                                                                                  requestUnitsUsageCost: requestUnitsUsageCost,
-                                                                                                                  spendAckChecked: throughputSpendAck,
-                                                                                                                  spendAckId: 'throughputSpendAck',
-                                                                                                                  spendAckText: throughputSpendAckText,
-                                                                                                                  spendAckVisible: throughputSpendAckVisible,
-                                                                                                                  showAsMandatory: true,
-                                                                                                                  infoBubbleText: ruToolTipText,
-                                                                                                                  throughputAutoPilotRadioId: 'newContainer-databaseThroughput-autoPilotRadio',
-                                                                                                                  throughputProvisionedRadioId: 'newContainer-databaseThroughput-manualRadio',
-                                                                                                                  throughputModeRadioName: 'sharedThroughputModeRadio',
-                                                                                                                  isAutoPilotSelected: isSharedAutoPilotSelected,
-                                                                                                                  maxAutoPilotThroughputSet: sharedAutoPilotThroughput,
-                                                                                                                  autoPilotUsageCost: autoPilotUsageCost,
-                                                                                                                  canExceedMaximumValue: canExceedMaximumValue,
-                                                                                                                  freeTierExceedThroughputTooltip: freeTierExceedThroughputTooltip
-                                                                                                              }"
-        >
-        </throughput-input-autopilot-v3>
-      </div>
-      <!-- /ko -->
-      <!-- Database provisioned throughput - End -->
-    </div>
-
-    <div class="seconddivpadding">
-      <p>
-        <span class="mandatoryStar">*</span>
-        <span class="addCollectionLabel" data-bind="text: collectionIdTitle"></span>
-        <span class="infoTooltip" role="tooltip" tabindex="0">
-          <img class="infoImg" src="/info-bubble.svg" alt="More information" />
-          <span class="tooltiptext infoTooltipWidth"
-            >Unique identifier for the container and used for id-based routing through REST and all SDKs</span
-          >
-        </span>
-      </p>
-      <input
-        name="collectionId"
-        id="containerId"
-        data-test="addCollection-collectionId"
-        type="text"
-        aria-required="true"
-        autocomplete="off"
-        pattern="[^/?#\\]*[^/?# \\]"
-        title="May not end with space nor contain characters '\' '/' '#' '?'"
-        placeholder="e.g., Container1"
-        size="40"
-        class="textfontclr collid"
-        data-bind="value: collectionId"
-      />
-    </div>
-
-    <!-- Indexing For Shared Throughput - start -->
-    <div class="seconddivpadding" data-bind="visible: showIndexingOptionsForSharedThroughput() && !isMongo()">
-      <div
-        class="useIndexingForSharedThroughput createNewDatabaseOrUseExisting"
-        aria-label="Indexing For Shared Throughput"
-      >
-        <p>
-          <span class="mandatoryStar">*</span>
-          <span class="addCollectionLabel">Indexing</span>
-        </p>
-        <div>
-          <input
-            type="radio"
-            id="useIndexingForSharedThroughputOn"
-            name="useIndexingForSharedThroughput"
-            value="on"
-            class="createNewDatabaseOrUseExistingRadio"
-            data-bind="checked: useIndexingForSharedThroughput, checkedValue: true"
-          />
-          <span class="createNewDatabaseOrUseExistingSpace" for="useIndexingForSharedThroughputOn">Automatic</span>
-          <input
-            type="radio"
-            id="useIndexingForSharedThroughputOff"
-            name="useIndexingForSharedThroughput"
-            value="off"
-            class="createNewDatabaseOrUseExistingRadio"
-            data-bind="checked: useIndexingForSharedThroughput, checkedValue: false"
-          />
-          <span class="createNewDatabaseOrUseExistingSpace" for="useIndexingForSharedThroughputOff">Off</span>
-        </div>
-        <p data-bind="visible: useIndexingForSharedThroughput">
-          All properties in your documents will be indexed by default for flexible and efficient queries.
-          <a class="errorLink" href="https://aka.ms/cosmos-indexing-policy" target="_blank">Learn more</a>
-        </p>
-        <p data-bind="visible: useIndexingForSharedThroughput() === false">
-          Indexing will be turned off. Recommended if you don't need to run queries or only have key value operations.
-          <a class="errorLink" href="https://aka.ms/cosmos-indexing-policy" target="_blank">Learn more</a>
-        </p>
-      </div>
-    </div>
-    <!-- Indexing For Shared Throughput - end -->
-
-    <p
-      class="seconddivpadding"
-      data-bind="visible: isMongo() && !databaseHasSharedOffer() || container.isFixedCollectionWithSharedThroughputSupported"
-    >
-      <span class="mandatoryStar">*</span>
-      <span class="addCollectionLabel">Storage capacity</span>
-      <span class="infoTooltip" role="tooltip" tabindex="0">
-        <img class="infoImg" src="/info-bubble.svg" alt="More information" />
-        <span class="tooltiptext infoTooltipWidth"
-          >This is the maximum storage size of the container. Storage is billed per GB based on consumption.</span
-        >
-      </span>
-    </p>
-
-    <div class="tabs">
-      <div
-        tabindex="0"
-        data-bind="event: { keydown: onStorageOptionsKeyDown }, visible: isMongo() && !databaseHasSharedOffer() || container.isFixedCollectionWithSharedThroughputSupported"
-        aria-label="Storage capacity"
-      >
-        <!-- Fixed option button - Start -->
-        <div class="tab">
-          <input type="radio" id="tab1" name="storage" value="10" class="radio" data-bind="checked: storage" />
-          <label for="tab1">Fixed (20 GB)</label>
-        </div>
-        <!-- Fixed option button - End -->
-
-        <!-- Unlimited option button - Start -->
-        <div class="tab">
-          <input type="radio" id="tab2" name="storage" value="100" class="radio" data-bind="checked: storage" />
-          <label for="tab2">Unlimited</label>
-        </div>
-        <!-- Unlimited option button - End -->
-      </div>
-      <!-- Unlimited Button Content - Start -->
-      <div class="tabcontent" data-bind="visible: isUnlimitedStorageSelected() || databaseHasSharedOffer()">
-        <div data-bind="visible: partitionKeyVisible">
-          <p>
-            <span class="mandatoryStar">*</span>
-            <span class="addCollectionLabel" data-bind="text: partitionKeyName"></span>
-            <span class="infoTooltip" role="tooltip" tabindex="0">
-              <img class="infoImg" src="/info-bubble.svg" alt="More information" />
-              <span class="tooltiptext infoTooltipWidth"
-                >The <span data-bind="text: partitionKeyName"></span> is used to automatically partition data among
-                multiple servers for scalability. Choose a JSON property name that has a wide range of values and is
-                likely to have evenly distributed access patterns.</span
-              >
-            </span>
-          </p>
-          <input
-            type="text"
-            id="addCollection-partitionKeyValue"
-            data-test="addCollection-partitionKeyValue"
-            aria-required="true"
-            size="40"
-            class="textfontclr collid"
-            data-bind="textInput: partitionKey,
-                                                attr: {
-                                                    placeholder: partitionKeyPlaceholder,
-                                                    required: partitionKeyVisible(),
-                                                    pattern: partitionKeyPattern,
-                                                    title: partitionKeyTitle
-                                                }"
-          />
-        </div>
-        <!-- large parition key - start -->
-        <div class="largePartitionKey" aria-label="Large Partition Key" data-bind="visible: partitionKeyVisible">
-          <input
-            tabindex="0"
-            type="checkbox"
-            id="largePartitionKey"
-            data-test="addCollection-largePartitionKey"
-            title="Large Partition Key"
-            data-bind="checked: largePartitionKey"
-          />
-          <span for="largePartitionKey"
-            >My <span data-bind="text: lowerCasePartitionKeyName"></span> is larger than 100 bytes</span
-          >
-          <p
-            data-bind="visible: largePartitionKey"
-            class="largePartitionKeyDescription"
-            data-test="addCollection-largePartitionKeyDescription"
-          >
-            Old SDKs do not work with containers that support large
-            <span data-bind="text: lowerCasePartitionKeyName"></span>s, ensure you are using the right SDK version.
-            <a class="errorLink" href="https://aka.ms/cosmosdb/pkv2" target="_blank">Learn more</a>
-          </p>
-        </div>
-        <!-- large parition key - end -->
-
-        <!-- ko if: canConfigureThroughput -->
-        <!-- Provision collection throughput checkbox - start -->
-        <div class="pkPadding" data-bind="visible: databaseHasSharedOffer() && !databaseCreateNew()">
-          <input
-            type="checkbox"
-            id="collectionSharedThroughput"
-            data-bind="checked: collectionWithThroughputInShared, attr: {title:collectionWithThroughputInSharedTitle}"
-          />
-          <span for="collectionSharedThroughput" data-bind="text: collectionWithThroughputInSharedTitle"></span>
-          <span class="leftAlignInfoTooltip" role="tooltip" tabindex="0">
-            <img class="infoImg" src="/info-bubble.svg" alt="More information" />
-            <span class="tooltiptext sharedCollectionThroughputTooltipWidth"
-              >You can optionally provision dedicated throughput for a container within a database that has throughput
-              provisioned. This dedicated throughput amount will not be shared with other containers in the database and
-              does not count towards the throughput you provisioned for the database. This throughput amount will be
-              billed in addition to the throughput amount you provisioned at the database level.</span
-            >
-          </span>
-        </div>
-        <!-- Provision collection throughput checkbox - end -->
-
-        <!-- Provision collection throughput spinner - start -->
-        <div data-bind="visible: displayCollectionThroughput" data-test="addCollection-displayCollectionThroughput">
-          <!-- 3 -->
-          <throughput-input-autopilot-v3
-            params="{
-                                              testId: 'collectionThroughputValue',
-                                              value: throughputMultiPartition,
-                                              minimum: minThroughputRU,
-                                              maximum: maxThroughputRU,
-                                              isEnabled: displayCollectionThroughput,
-                                              label: throughputRangeText,
-                                              ariaLabel: throughputRangeText,
-                                              costsVisible: costsVisible,
-                                              requestUnitsUsageCost: dedicatedRequestUnitsUsageCost,
-                                              spendAckChecked: throughputSpendAck,
-                                              spendAckId: 'throughputSpendAckCollection',
-                                              spendAckText: throughputSpendAckText,
-                                              spendAckVisible: throughputSpendAckVisible,
-                                              showAsMandatory: true,
-                                              infoBubbleText: ruToolTipText,
-                                              throughputAutoPilotRadioId: 'newContainer-containerThroughput-autoPilotRadio',
-                                              throughputProvisionedRadioId: 'newContainer-containerThroughput-manualRadio',
-                                              throughputModeRadioName: 'throughputModeRadioName',
-                                              isAutoPilotSelected: isAutoPilotSelected,
-                                              maxAutoPilotThroughputSet: autoPilotThroughput,
-                                              autoPilotUsageCost: autoPilotUsageCost,
-                                              canExceedMaximumValue: canExceedMaximumValue,
-                                              freeTierExceedThroughputTooltip: freeTierExceedThroughputTooltip
-                                            }"
-          >
-          </throughput-input-autopilot-v3>
-        </div>
-        <!-- Provision collection throughput spinner - end -->
-        <!-- /ko -->
-        <!-- Provision collection throughput - end -->
-
-        <!-- Custom indexes for mongo checkbox - start -->
-        <div class="pkPadding" data-bind="visible: isEnableMongoCapabilityEnabled()">
-          <p>
-            <span class="addCollectionLabel">Indexing</span>
-          </p>
-          <input
-            type="checkbox"
-            id="mongoWildcardIndex"
-            title="mongoWildcardIndex"
-            data-bind="checked: shouldCreateMongoWildcardIndex"
-          />
-          <span>Create a Wildcard Index on all fields</span>
-          <span class="infoTooltip" role="tooltip" tabindex="0">
-            <img class="infoImg" src="/info-bubble.svg" alt="More information" />
-            <span class="tooltiptext mongoWildcardIndexTooltipWidth">
-              By default, only the field _id is indexed. Creating a wildcard index on all fields will quickly optimize
-              query performance and is recommended during development.
-            </span>
-          </span>
-        </div>
-        <!-- Custom indexes for mongo checkbox - end -->
-
-        <!-- Enable analytical storage - start -->
-        <div
-          class="enableAnalyticalStorage pkPadding"
-          aria-label="Enable Analytical Store"
-          data-bind="visible: isSynapseLinkSupported"
-        >
-          <div>
-            <span class="mandatoryStar">*</span>
-            <span class="addCollectionLabel">Analytical store</span>
-            <span
-              class="infoTooltip"
-              role="tooltip"
-              tabindex="0"
-              data-bind="event: { focus: function(data, event) { transferFocus('tooltip1', 'link1') } }"
-            >
-              <img class="infoImg" src="/info-bubble.svg" alt="More information" />
-              <span id="tooltip1" class="tooltiptext infoTooltipWidth" data-bind="event: { mouseout: onMouseOut }">
-                Enable analytical store capability to perform near real-time analytics on your operational data, without
-                impacting the performance of transactional workloads. Learn more
-                <a
-                  id="link1"
-                  class="errorLink"
-                  href="https://aka.ms/analytical-store-overview"
-                  target="_blank"
-                  data-bind="event: { focusout: onFocusOut, keydown: onKeyDown.bind($data, 'largePartitionKey') }"
-                  >here</a
-                >
-              </span>
-            </span>
-          </div>
-
-          <div class="paragraph">
-            <input
-              class="enableAnalyticalStorageRadio"
-              id="enableAnalyticalStorageRadioOn"
-              name="analyticalStore"
-              type="radio"
-              role="radio"
-              tabindex="0"
-              data-bind="
-                                                          disable: showEnableSynapseLink,
-                                                          checked: isAnalyticalStorageOn,
-                                                          checkedValue: true,
-                                                          attr: {
-                                                              'aria-checked': isAnalyticalStorageOn() ? 'true' : 'false'
-                                                          }"
-            />
-            <label for="enableAnalyticalStorageRadioOn" class="enableAnalyticalStorageRadioLabel">
-              <span data-bind="disable: showEnableSynapseLink"> On </span>
-            </label>
-
-            <input
-              class="enableAnalyticalStorageRadio"
-              id="enableAnalyticalStorageRadioOff"
-              name="analyticalStore"
-              type="radio"
-              role="radio"
-              tabindex="0"
-              data-bind="
-                                                          disable: showEnableSynapseLink,
-                                                          checked: isAnalyticalStorageOn,
-                                                          checkedValue: false,
-                                                          attr: {
-                                                              'aria-checked': isAnalyticalStorageOn() ? 'false' : 'true'
-                                                          }"
-            />
-            <label for="enableAnalyticalStorageRadioOff" class="enableAnalyticalStorageRadioLabel">
-              <span data-bind="disable: showEnableSynapseLink"> Off </span>
-            </label>
-          </div>
-
-          <div class="paragraph italic" data-bind="visible: ttl90DaysEnabled() && isAnalyticalStorageOn()">
-            By default, Analytical Time-to-Live will be configured to retain 90 days of data in the analytical store.
-            You can configure a custom retention policy in the 'Settings' tab.
-            <span
-              ><a class="errorLink" href="https://aka.ms/cosmosdb-analytical-ttl" target="_blank">Learn more</a></span
-            >
-          </div>
-
-          <div class="paragraph" data-bind="visible: showEnableSynapseLink">
-            Azure Synapse Link is required for creating an analytical store container. Enable Synapse Link for this
-            Cosmos DB account.
-            <span><a class="errorLink" href="https://aka.ms/cosmosdb-synapselink" target="_blank">Learn more</a></span>
-          </div>
-
-          <div class="paragraph" data-bind="visible: showEnableSynapseLink">
-            <button
-              class="button"
-              type="button"
-              data-bind="
-                                                          click: onEnableSynapseLinkButtonClicked,
-                                                          disable: isSynapseLinkUpdating,
-                                                          css: {
-                                                              enabled: !isSynapseLinkUpdating(),
-                                                              disabled: isSynapseLinkUpdating
-                                                          }
-                                                      "
-            >
-              Enable
-            </button>
-          </div>
-        </div>
-        <!-- Enable analytical storage - end -->
-      </div>
-      <!-- Unlimited Button Content - End -->
-    </div>
-    <div class="uniqueIndexesContainer" data-bind="visible: uniqueKeysVisible">
-      <p class="uniqueKeys">
-        <span class="addCollectionLabel">Unique keys</span>
-        <span class="uniqueInfoTooltip" role="tooltip" tabindex="0">
-          <img class="infoImg" src="/info-bubble.svg" alt="More information" />
-          <span class="uniqueTooltiptext infoTooltipWidth"
-            >Unique keys provide developers with the ability to add a layer of data integrity to their database. By
-            creating a unique key policy when a container is created, you ensure the uniqueness of one or more values
-            per partition key.</span
-          >
-        </span>
-      </p>
-      <dynamic-list
-        params="{ listItems: uniqueKeys, placeholder: uniqueKeysPlaceholder(),  ariaLabel: 'Write a comma separated path list of unique keys', buttonText: 'Add unique key' }"
-      >
-      </dynamic-list>
-    </div>
-  </div>
-  <div class="paneFooter">
-    <div class="leftpanel-okbut">
-      <input
-        name="createCollection"
-        id="submitBtnAddCollection"
-        data-test="addCollection-createCollection"
-        type="submit"
-        value="OK"
-        class="btncreatecoll1"
-      />
-    </div>
-  </div>
-  <div data-bind="visible: maxCollectionsReached">
-    <error-display params="{ errorMsg: maxCollectionsReachedMessage }"></error-display>
-  </div>
-  <!-- Add collection inputs - End -->
-</script>
--- a/src/Explorer/Panes/AddCollectionPane.test.ts
+++ b/src/Explorer/Panes/AddCollectionPane.test.ts
@@ -1,108 +0,0 @@
-import * as Constants from "../../Common/Constants";
-import { DatabaseAccount } from "../../Contracts/DataModels";
-import { updateUserContext } from "../../UserContext";
-import Explorer from "../Explorer";
-import AddCollectionPane from "./AddCollectionPane";
-
-const mockDatabaseAccount: DatabaseAccount = {
-  id: "mock",
-  kind: "DocumentDB",
-  location: "",
-  name: "mock",
-  properties: {
-    documentEndpoint: "",
-    cassandraEndpoint: "",
-    gremlinEndpoint: "",
-    tableEndpoint: "",
-    enableFreeTier: false,
-  },
-  type: undefined,
-};
-
-const mockFreeTierDatabaseAccount: DatabaseAccount = {
-  id: "mock",
-  kind: "DocumentDB",
-  location: "",
-  name: "mock",
-  properties: {
-    documentEndpoint: "",
-    cassandraEndpoint: "",
-    gremlinEndpoint: "",
-    tableEndpoint: "",
-    enableFreeTier: true,
-  },
-  type: undefined,
-};
-
-describe("Add Collection Pane", () => {
-  describe("isValid()", () => {
-    it("should be true if graph API and partition key is not /id nor /label", () => {
-      updateUserContext({
-        databaseAccount: {
-          properties: {
-            capabilities: [{ name: "EnableGremlin" }],
-          },
-        } as DatabaseAccount,
-      });
-      const explorer = new Explorer();
-      const addCollectionPane = explorer.addCollectionPane as AddCollectionPane;
-      addCollectionPane.partitionKey("/blah");
-      expect(addCollectionPane.isValid()).toBe(true);
-    });
-
-    it("should be false if graph API and partition key is /id or /label", () => {
-      updateUserContext({
-        databaseAccount: {
-          properties: {
-            capabilities: [{ name: "EnableGremlin" }],
-          },
-        } as DatabaseAccount,
-      });
-      const explorer = new Explorer();
-      const addCollectionPane = explorer.addCollectionPane as AddCollectionPane;
-      addCollectionPane.partitionKey("/id");
-      expect(addCollectionPane.isValid()).toBe(false);
-
-      addCollectionPane.partitionKey("/label");
-      expect(addCollectionPane.isValid()).toBe(false);
-    });
-
-    it("should be true for any non-graph API with /id or /label partition key", () => {
-      updateUserContext({
-        databaseAccount: {
-          properties: {
-            capabilities: [{ name: "EnableCassandra" }],
-          },
-        } as DatabaseAccount,
-      });
-      const explorer = new Explorer();
-      const addCollectionPane = explorer.addCollectionPane as AddCollectionPane;
-
-      addCollectionPane.partitionKey("/id");
-      expect(addCollectionPane.isValid()).toBe(true);
-
-      addCollectionPane.partitionKey("/label");
-      expect(addCollectionPane.isValid()).toBe(true);
-    });
-
-    it("should display free tier text in upsell messaging", () => {
-      updateUserContext({ databaseAccount: mockFreeTierDatabaseAccount });
-      const explorer = new Explorer();
-      const addCollectionPane = explorer.addCollectionPane as AddCollectionPane;
-      expect(addCollectionPane.isFreeTierAccount()).toBe(true);
-      expect(addCollectionPane.upsellMessage()).toContain("With free tier");
-      expect(addCollectionPane.upsellAnchorUrl()).toBe(Constants.Urls.freeTierInformation);
-      expect(addCollectionPane.upsellAnchorText()).toBe("Learn more");
-    });
-
-    it("should display standard texr in upsell messaging", () => {
-      updateUserContext({ databaseAccount: mockDatabaseAccount });
-      const explorer = new Explorer();
-      const addCollectionPane = explorer.addCollectionPane as AddCollectionPane;
-      expect(addCollectionPane.isFreeTierAccount()).toBe(false);
-      expect(addCollectionPane.upsellMessage()).toContain("Start at");
-      expect(addCollectionPane.upsellAnchorUrl()).toBe(Constants.Urls.cosmosPricing);
-      expect(addCollectionPane.upsellAnchorText()).toBe("More details");
-    });
-  });
-});
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
hardiknai-techm	9acf9485cb	host fix	2021-05-11 20:52:54 +05:30
hardiknai-techm	9751f0dd81	resolve merge conflict	2021-05-11 20:37:53 +05:30
victor-meng	4ed8fe9e7d	Remove old add collection pane (#767 )	2021-05-10 20:10:48 -05:00
Srinath Narayanan	4c506da7b9	Added metrics blade link and fixed SelfServe bugs (#764 ) * Added metrics blade link * fixed lint error	2021-05-10 17:36:50 -07:00
Hardikkumar Nai	a81b1a40a3	Use @fluentui/react DocumentCard (#715 ) Co-authored-by: Steve Faulkner <southpolesteve@gmail.com>	2021-05-10 14:17:37 -05:00
Hardikkumar Nai	9d5c9d6296	Migrate Add Database Panel to React (#597 ) Co-authored-by: Steve Faulkner <southpolesteve@gmail.com>	2021-05-10 14:02:14 -05:00
hardiknai-techm	e0c8f32a7e	Merge branch 'move_add_Database_Panel_to_react' of https://github.com/Azure/cosmos-explorer into move_add_Database_Panel_to_react	2021-05-10 23:41:51 +05:30
hardiknai-techm	46eda44fd7	snapshort update	2021-05-10 23:41:13 +05:30
Steve Faulkner	ab0dd728b9	Update snapshot	2021-05-10 13:09:13 -05:00
hardiknai-techm	c50543c341	address comment	2021-05-10 21:56:23 +05:30
hardiknai-techm	a675124bdc	Merge branch 'master' of https://github.com/Azure/cosmos-explorer into move_add_Database_Panel_to_react	2021-05-10 17:56:04 +05:30
hardiknai-techm	05eae478d0	resolve master merge conflict	2021-05-10 17:55:26 +05:30
Steve Faulkner	7efa8ca58f	Remove unused Switch Directory Pane (#766 )	2021-05-09 22:37:18 -05:00
Hardikkumar Nai	487fbf2072	Remove genericRightPaneComponent and create RightPaneWrapper with form (#679 ) Co-authored-by: Steve Faulkner <southpolesteve@gmail.com>	2021-05-09 19:22:44 -05:00
Sunil Kumar Yadav	aa308b3e4d	Enable TypeScript `noImplicitThis` (#761 )	2021-05-07 10:25:19 -05:00
hardiknai-techm	6b0e972564	resolve merge conflict	2021-05-07 12:53:48 +05:30
hardiknai-techm	8075072f76	correct base on some suggestion	2021-05-07 12:51:53 +05:30
Steve Faulkner	0e0e6a2257	more	2021-05-05 19:31:07 -05:00
Steve Faulkner	4299b86c55	Revert "Pane cleanup" This reverts commit `b169fba45b`.	2021-05-05 19:29:56 -05:00
Steve Faulkner	b169fba45b	Pane cleanup	2021-05-05 19:26:23 -05:00
Steve Faulkner	2b576d6b8a	Remove core-js	2021-05-05 19:22:53 -05:00
Steve Faulkner	0c009caea6	Fix test	2021-05-05 19:15:26 -05:00
Steve Faulkner	33048b2c98	Fixes	2021-05-05 19:00:23 -05:00
Steve Faulkner	3d4a24b2fd	rename	2021-05-05 18:42:30 -05:00
Steve Faulkner	2ad0236c73	Fix	2021-05-05 18:41:37 -05:00
Steve Faulkner	c180d6a0cd	Merge with mater	2021-05-05 18:31:54 -05:00
Steve Faulkner	dd747ee1ee	Resolve conflict	2021-05-05 15:23:37 -05:00
hardiknai-techm	5485a0d3c6	resolve merge conflict	2021-05-04 13:03:01 +05:30
hardiknai-techm	7b6975761f	resolve format and compile issue	2021-04-29 08:41:14 +05:30
hardiknai-techm	ed44c8640a	Merge branch 'master' of https://github.com/Azure/cosmos-explorer into move_add_Database_Panel_to_react	2021-04-29 08:36:37 +05:30
hardiknai-techm	ade9049d80	update snapshrot test case	2021-04-28 20:36:04 +05:30
hardiknai-techm	6a3f50651e	marge master conflict	2021-04-28 19:58:09 +05:30
hardiknai-techm	8de3edd0f8	remove div wrapper class	2021-04-24 15:49:10 +05:30
hardiknai-techm	9f0d5658c7	Merge branch 'genericRightPaneComponent' of https://github.com/Azure/cosmos-explorer into move_add_Database_Panel_to_react	2021-04-24 13:41:03 +05:30
hardiknai-techm	28bbba5522	addDatabasePane provide backward compatibility	2021-04-24 13:39:13 +05:30
hardiknai-techm	42552bad07	addDatabasePane provide backward compatibility	2021-04-24 13:32:00 +05:30
hardiknai-techm	0aeb16fb96	resolve master branch conflict	2021-04-24 11:10:38 +05:30
hardiknai-techm	3e011f939d	resolve conflict master branch	2021-04-23 19:13:13 +05:30
hardiknai-techm	43aafde25f	revert knockout component	2021-04-19 18:43:10 +05:30
hardiknai-techm	9aafadf346	resolve master merge conflict	2021-04-19 17:52:28 +05:30
hardiknai-techm	ba25eea41e	update sanpshort test case	2021-04-16 15:59:48 +05:30
hardiknai-techm	e17fe25292	Some panel use GenenricRightPanel and Some panel use RightPanelForm	2021-04-16 15:53:44 +05:30
hardiknai-techm	9494c9cd55	Merge branch 'master' of https://github.com/Azure/cosmos-explorer into genericRightPaneComponent	2021-04-16 14:55:40 +05:30
hardiknai-techm	5c9ab15b3a	remove genericRightPaneComponent and create RightPaneWrapper with form	2021-04-15 11:47:05 +05:30
hardiknai-techm	57d8df6608	npm install perfomr due to error	2021-04-07 10:30:51 +05:30
hardiknai-techm	2dc33c0333	remove AddDatabasePane knowckout.js code	2021-04-07 05:39:29 +05:30
hardiknai-techm	dfa97936ed	resolve master merge conflict	2021-04-07 05:33:29 +05:30
hardiknai-techm	6a12ba27d9	functional component convert and use fluent ui	2021-04-07 05:21:09 +05:30
hardiknai-techm	f9ffff3c11	functional component convert and use fluent ui	2021-04-07 05:17:31 +05:30
hardiknai-techm	538b2700ef	added snapshort test	2021-04-05 15:44:22 +05:30
hardiknai-techm	f468a0c36e	default auto scale selected	2021-04-05 11:28:21 +05:30
hardiknai-techm	fb7526a0d0	api call with string autoPilotMaxThroughput	2021-04-05 09:09:38 +05:30
hardiknai-techm	63afb5dd6c	format and compile	2021-03-31 18:36:12 +05:30
hardiknai-techm	6a1f8ce822	format and compile	2021-03-31 18:24:25 +05:30
hardiknai-techm	3b09a19ce5	resolve merge master conflict	2021-03-31 17:08:50 +05:30
hardiknai-techm	299c765e7b	resolve autoscale save option	2021-03-31 17:02:03 +05:30
hardiknai-techm	8d206c39b1	remove knockout component	2021-03-30 20:16:55 +05:30
hardiknai-techm	b68e601e02	Merge branch 'master' of https://github.com/Azure/cosmos-explorer into move_add_Database_Panel_to_react	2021-03-29 16:21:23 +05:30
Your Name	201310eea4	migrate AddDatabase component	2021-03-24 12:40:20 +05:30