Move add collection pane to React (#486)

* Move add collection pane to React * Add feature flag * fix unit tests * FIx merge conflicts and address comments * Resolve merge conflicts * Address comments * Fix e2e test failure * Update test snapshots * Update test snapshots
2021-03-18 18:06:13 -07:00 · 2021-03-18 18:06:13 -07:00 · 65c859c835
parent c6090e2663
commit 65c859c835
22 changed files with 1891 additions and 419 deletions
--- a/src/Common/Constants.ts
+++ b/src/Common/Constants.ts
@ -120,6 +120,7 @@ export class Features {
  public static readonly enableDatabaseSettingsTabV1 = "enabledbsettingsv1";
  public static readonly selfServeType = "selfservetype";
  public static readonly enableKOPanel = "enablekopanel";
+  public static readonly enableReactPane = "enablereactpane";
 }

 // flight names returned from the portal are always lowercase
--- a/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.test.tsx
+++ b/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.test.tsx
@ -6,6 +6,7 @@ describe("CollapsibleSectionComponent", () => {
  it("renders", () => {
    const props: CollapsibleSectionProps = {
      title: "Sample title",
+      isExpandedByDefault: true,
    };

    const wrapper = shallow(<CollapsibleSectionComponent {...props} />);
--- a/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
+++ b/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
@ -1,9 +1,10 @@
 import { Icon, Label, Stack } from "office-ui-fabric-react";
 import * as React from "react";
-import { accordionIconStyles, accordionStackTokens } from "../Settings/SettingsRenderUtils";
+import { accordionStackTokens } from "../Settings/SettingsRenderUtils";

 export interface CollapsibleSectionProps {
  title: string;
+  isExpandedByDefault: boolean;
 }

 export interface CollapsibleSectionState {
@ -14,7 +15,7 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
  constructor(props: CollapsibleSectionProps) {
    super(props);
    this.state = {
-      isExpanded: true,
+      isExpanded: this.props.isExpandedByDefault,
    };
  }

@ -25,8 +26,14 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
  public render(): JSX.Element {
    return (
      <>
-        <Stack className="collapsibleSection" horizontal tokens={accordionStackTokens} onClick={this.toggleCollapsed}>
-          <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} styles={accordionIconStyles} />
+        <Stack
+          className="collapsibleSection"
+          horizontal
+          verticalAlign="center"
+          tokens={accordionStackTokens}
+          onClick={this.toggleCollapsed}
+        >
+          <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} />
          <Label>{this.props.title}</Label>
        </Stack>
        {this.state.isExpanded && this.props.children}
--- a/src/Explorer/Controls/CollapsiblePanel/snapshots/CollapsibleSectionComponent.test.tsx.snap
+++ b/src/Explorer/Controls/CollapsiblePanel/snapshots/CollapsibleSectionComponent.test.tsx.snap
@ -11,16 +11,10 @@ exports[`CollapsibleSectionComponent renders 1`] = `
        "childrenGap": 10,
      }
    }
+    verticalAlign="center"
  >
    <Icon
      iconName="ChevronDown"
-      styles={
-        Object {
-          "root": Object {
-            "paddingTop": 7,
-          },
-        }
-      }
    />
    <StyledLabelBase>
      Sample title
--- a/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
+++ b/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
@ -23,7 +23,6 @@ import {
  ITextStyles,
  IDetailsRowStyles,
  IStackStyles,
-  IIconStyles,
  IDetailsListStyles,
  IDropdownStyles,
  ISeparatorStyles,
@ -116,8 +115,6 @@ export const addMongoIndexSubElementsTokens: IStackTokens = {
  childrenGap: 20,
 };

-export const accordionIconStyles: IIconStyles = { root: { paddingTop: 7 } };
-
 export const mediumWidthStackStyles: IStackStyles = { root: { width: 600 } };

 export const shortWidthTextFieldStyles: Partial<ITextFieldStyles> = { root: { paddingLeft: 10, width: 210 } };
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx
@ -239,7 +239,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP

    return (
      <Stack {...createAndAddMongoIndexStackProps} styles={mediumWidthStackStyles}>
-        <CollapsibleSectionComponent title="Current index(es)">
+        <CollapsibleSectionComponent title="Current index(es)" isExpandedByDefault={true}>
          {
            <>
              <DetailsList
@ -266,7 +266,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP

    return (
      <Stack styles={mediumWidthStackStyles}>
-        <CollapsibleSectionComponent title="Index(es) to be dropped">
+        <CollapsibleSectionComponent title="Index(es) to be dropped" isExpandedByDefault={true}>
          {indexesToBeDropped.length > 0 && (
            <DetailsList
              styles={customDetailsListStyles}
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/snapshots/MongoIndexingPolicyComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/snapshots/MongoIndexingPolicyComponent.test.tsx.snap
@ -42,6 +42,7 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
    }
  >
    <CollapsibleSectionComponent
+      isExpandedByDefault={true}
      title="Current index(es)"
    >
      <StyledWithViewportComponent
@ -139,6 +140,7 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
    }
  >
    <CollapsibleSectionComponent
+      isExpandedByDefault={true}
      title="Index(es) to be dropped"
    />
  </Stack>
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.less
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.less
@ -0,0 +1,20 @@
+@import "../../../../less/Common/Constants";
+
+.throughputInputContainer {
+  .throughputInputRadioBtn {
+    margin: 0;
+  }
+}
+
+.throughputInputRadioBtnLabel {
+  font-size: @mediumFontSize;
+  padding: 0 @LargeSpace 0 @SmallSpace;
+}
+
+.throughputInputSpacing {
+  margin-bottom: @SmallSpace;
+
+  & > * {
+    margin-bottom: @SmallSpace;
+  }
+}
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
@ -0,0 +1,302 @@
+import { Checkbox, DirectionalHint, Icon, Link, Stack, Text, TextField, TooltipHost } from "office-ui-fabric-react";
+import React from "react";
+import * as Constants from "../../../Common/Constants";
+import * as SharedConstants from "../../../Shared/Constants";
+import { userContext } from "../../../UserContext";
+import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
+import * as PricingUtils from "../../../Utils/PricingUtils";
+
+export interface ThroughputInputProps {
+  isDatabase: boolean;
+  showFreeTierExceedThroughputTooltip: boolean;
+  setThroughputValue: (throughput: number) => void;
+  setIsAutoscale: (isAutoscale: boolean) => void;
+  onCostAcknowledgeChange: (isAcknowledged: boolean) => void;
+}
+
+export interface ThroughputInputState {
+  isAutoscaleSelected: boolean;
+  throughput: number;
+  isCostAcknowledged: boolean;
+}
+
+export class ThroughputInput extends React.Component<ThroughputInputProps, ThroughputInputState> {
+  constructor(props: ThroughputInputProps) {
+    super(props);
+
+    this.state = {
+      isAutoscaleSelected: true,
+      throughput: AutoPilotUtils.minAutoPilotThroughput,
+      isCostAcknowledged: false,
+    };
+
+    this.props.setThroughputValue(AutoPilotUtils.minAutoPilotThroughput);
+    this.props.setIsAutoscale(true);
+  }
+
+  render(): JSX.Element {
+    return (
+      <div className="throughputInputContainer throughputInputSpacing">
+        <Stack horizontal>
+          <span className="mandatoryStar">*&nbsp;</span>
+          <Text variant="small" style={{ lineHeight: "20px" }}>
+            {this.getThroughputLabelText()}
+          </Text>
+          <TooltipHost directionalHint={DirectionalHint.bottomLeftEdge} content={PricingUtils.getRuToolTipText()}>
+            <Icon iconName="InfoSolid" 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">
+              Provision maximum RU/s required by this resource. 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" }}>
+                Max RU/s
+              </Text>
+              <TooltipHost directionalHint={DirectionalHint.bottomLeftEdge} content={this.getAutoScaleTooltip()}>
+                <Icon iconName="InfoSolid" 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"
+              required={true}
+            />
+
+            <Text variant="small">
+              Your {this.props.isDatabase ? "database" : "container"} 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}
+              />
+            </TooltipHost>
+          </Stack>
+        )}
+
+        <CostEstimateText requestUnits={this.state.throughput} isAutoscale={this.state.isAutoscaleSelected} />
+
+        {this.state.throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K && (
+          <Stack horizontal verticalAlign="start">
+            <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 {
+    if (this.state.isAutoscaleSelected) {
+      return AutoPilotUtils.getAutoPilotHeaderText();
+    }
+
+    const minRU: string = SharedConstants.CollectionCreation.DefaultCollectionRUs400.toLocaleString();
+    const maxRU: string = userContext.isTryCosmosDBSubscription
+      ? Constants.TryCosmosExperience.maxRU.toLocaleString()
+      : "unlimited";
+    return this.state.isAutoscaleSelected
+      ? AutoPilotUtils.getAutoPilotHeaderText()
+      : `Throughput (${minRU} - ${maxRU} RU/s)`;
+  }
+
+  private onThroughputValueChange(newInput: string): void {
+    const newThroughput = parseInt(newInput);
+    this.setState({ throughput: newThroughput });
+    this.props.setThroughputValue(newThroughput);
+  }
+
+  private getAutoScaleTooltip(): string {
+    return `After the first ${AutoPilotUtils.getStorageBasedOnUserInput(
+      this.state.throughput
+    )} GB of data stored, the max
+    RU/s will be automatically upgraded based on the new storage value.`;
+  }
+
+  private getCostAcknowledgeText(): string {
+    const databaseAccount = userContext.databaseAccount;
+    if (!databaseAccount || !databaseAccount.properties) {
+      return "";
+    }
+
+    const numberOfRegions: number = databaseAccount.properties.readLocations?.length || 1;
+    const multimasterEnabled: boolean = databaseAccount.properties.enableMultipleWriteLocations;
+
+    return PricingUtils.getEstimatedSpendAcknowledgeString(
+      this.state.throughput,
+      userContext.portalEnv,
+      numberOfRegions,
+      multimasterEnabled,
+      this.state.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);
+    }
+  }
+
+  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.databaseAccount;
+  if (!databaseAccount || !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;
+
+  if (isAutoscale) {
+    return (
+      <Text variant="small">
+        Estimated monthly cost ({currency}):{" "}
+        <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">
+      Cost ({currency}):{" "}
+      <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)
+      <br />
+      <em>{PricingUtils.estimatedCostDisclaimer}</em>
+    </Text>
+  );
+};
--- a/src/Explorer/Explorer.tsx
+++ b/src/Explorer/Explorer.tsx
@ -48,6 +48,7 @@ import { FileSystemUtil } from "./Notebook/FileSystemUtil";
 import { NotebookContentItem, NotebookContentItemType } from "./Notebook/NotebookContentItem";
 import { NotebookUtil } from "./Notebook/NotebookUtil";
 import AddCollectionPane from "./Panes/AddCollectionPane";
+import { AddCollectionPanel } from "./Panes/AddCollectionPanel";
 import AddDatabasePane from "./Panes/AddDatabasePane";
 import { BrowseQueriesPane } from "./Panes/BrowseQueriesPane";
 import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
@ -2392,10 +2393,12 @@ export default class Explorer {
  public onNewCollectionClicked(): void {
    if (this.isPreferredApiCassandra()) {
      this.cassandraAddCollectionPane.open();
+    } else if (this.isFeatureEnabled(Constants.Features.enableReactPane)) {
+      this.openAddCollectionPanel();
    } else {
      this.addCollectionPane.open(this.selectedDatabaseId());
+      document.getElementById("linkAddCollection").focus();
    }
-    document.getElementById("linkAddCollection").focus();
  }

  private refreshCommandBarButtons(): void {
@ -2535,4 +2538,16 @@ export default class Explorer {
          />
        );
  }
+
+  public async openAddCollectionPanel(): Promise<void> {
+    await this.loadDatabaseOffers();
+    this.openSidePanel(
+      "New Collection",
+      <AddCollectionPanel
+        explorer={this}
+        closePanel={() => this.closeSidePanel()}
+        openNotificationConsole={() => this.expandConsole()}
+      />
+    );
+  }
 }
--- a/src/Explorer/Panes/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel.tsx
--- a/src/Explorer/Panes/DeleteCollectionConfirmationPane.test.tsx
+++ b/src/Explorer/Panes/DeleteCollectionConfirmationPane.test.tsx
@ -133,7 +133,7 @@ describe("Delete Collection Confirmation Pane", () => {
        .simulate("change", { target: { value: selectedCollectionId } });

      expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
-      wrapper.find("#sidePanelOkButton").hostNodes().simulate("click");
+      wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
      expect(deleteCollection).toHaveBeenCalledWith(databaseId, selectedCollectionId);

      wrapper.unmount();
@ -154,7 +154,7 @@ describe("Delete Collection Confirmation Pane", () => {
        .simulate("change", { target: { value: feedbackText } });

      expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
-      wrapper.find("#sidePanelOkButton").hostNodes().simulate("click");
+      wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
      expect(deleteCollection).toHaveBeenCalledWith(databaseId, selectedCollectionId);

      const deleteFeedback = new DeleteFeedback(
--- a/src/Explorer/Panes/DeleteCollectionConfirmationPanel.tsx
+++ b/src/Explorer/Panes/DeleteCollectionConfirmationPanel.tsx
@ -1,20 +1,19 @@
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import * as React from "react";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import { PanelFooterComponent } from "./PanelFooterComponent";
-import { Collection } from "../../Contracts/ViewModels";
 import { Text, TextField } from "office-ui-fabric-react";
-import { userContext } from "../../UserContext";
+import * as React from "react";
 import { Areas } from "../../Common/Constants";
 import { deleteCollection } from "../../Common/dataAccess/deleteCollection";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
-import { PanelErrorComponent, PanelErrorProps } from "./PanelErrorComponent";
 import DeleteFeedback from "../../Common/DeleteFeedback";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import { Collection } from "../../Contracts/ViewModels";
+import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { userContext } from "../../UserContext";
+import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
-import LoadingIndicator_3Squares from "../../../images/LoadingIndicator_3Squares.gif";
-
+import { PanelFooterComponent } from "./PanelFooterComponent";
+import { PanelInfoErrorComponent, PanelInfoErrorProps } from "./PanelInfoErrorComponent";
+import { PanelLoadingScreen } from "./PanelLoadingScreen";
 export interface DeleteCollectionConfirmationPanelProps {
  explorer: Explorer;
  closePanel: () => void;
@ -44,8 +43,8 @@ export class DeleteCollectionConfirmationPanel extends React.Component<

  render(): JSX.Element {
    return (
-      <div className="panelContentContainer">
-        <PanelErrorComponent {...this.getPanelErrorProps()} />
+      <form className="panelFormWrapper" onSubmit={this.submit.bind(this)}>
+        <PanelInfoErrorComponent {...this.getPanelErrorProps()} />
        <div className="panelMainContent">
          <div className="confirmDeleteInput">
            <span className="mandatoryStar">* </span>
@ -79,18 +78,16 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
            </div>
          )}
        </div>
-        <PanelFooterComponent buttonLabel="OK" onOKButtonClicked={() => this.submit()} />
-        <div className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" hidden={!this.state.isExecuting}>
-          <img className="dataExplorerLoader" src={LoadingIndicator_3Squares} />
-        </div>
-      </div>
+        <PanelFooterComponent buttonLabel="OK" />
+        {this.state.isExecuting && <PanelLoadingScreen />}
+      </form>
    );
  }

-  private getPanelErrorProps(): PanelErrorProps {
+  private getPanelErrorProps(): PanelInfoErrorProps {
    if (this.state.formError) {
      return {
-        isWarning: false,
+        messageType: "error",
        message: this.state.formError,
        showErrorDetails: true,
        openNotificationConsole: this.props.openNotificationConsole,
@ -98,7 +95,7 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
    }

    return {
-      isWarning: true,
+      messageType: "warning",
      showErrorDetails: false,
      message:
        "Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.",
@ -109,9 +106,10 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
    return this.props.explorer.isLastCollection() && !this.props.explorer.isSelectedDatabaseShared();
  }

-  public async submit(): Promise<void> {
-    const collection = this.props.explorer.findSelectedCollection();
+  public async submit(event: React.FormEvent<HTMLFormElement>): Promise<void> {
+    event.preventDefault();

+    const collection = this.props.explorer.findSelectedCollection();
    if (!collection || this.inputCollectionName !== collection.id()) {
      const errorMessage = "Input collection name does not match the selected collection";
      this.setState({ formError: errorMessage });
--- a/src/Explorer/Panes/PanelComponent.less
+++ b/src/Explorer/Panes/PanelComponent.less
@ -1,12 +1,58 @@
@import "../../../less/Common/Constants";

-.panelContentContainer {
+.panelFormWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;

  .panelMainContent {
    flex-grow: 1;
+    padding: 0 34px;
+    margin: 20px 0;
+    overflow: auto;
+
+    & > * {
+      margin-bottom: @DefaultSpace;
+
+      & > * {
+        margin-bottom: @SmallSpace;
+      }
+    }
+
+    .panelInfoIcon {
+      font-size: @mediumFontSize;
+      width: @mediumFontSize;
+      margin: auto 0 auto @SmallSpace;
+      color: @InfoIconColor;
+      cursor: default;
+      vertical-align: middle;
+    }
+
+    .panelTextBold {
+      font-weight: 600;
+      line-height: 20px;
+    }
+
+    .panelTextField {
+      font-size: @mediumFontSize;
+      border: 1px solid #605e5c;
+      color: #000;
+      padding: 4px 10px;
+      width: @newCollectionPaneInputWidth;
+    }
+
+    .panelRadioBtn {
+      margin: 0;
+    }
+
+    .panelRadioBtnLabel {
+      font-size: @mediumFontSize;
+      padding: 0 @LargeSpace 0 @SmallSpace;
+    }
+
+    .collapsibleSection {
+      margin-bottom: 0;
+    }
  }
 }

@ -16,26 +62,30 @@
  font-weight: 400;
 }

-.panelWarningErrorContainer {
+.panelInfoErrorContainer {
  background-color: @BaseLow;
  padding: @DefaultSpace;
  display: inline-flex;
-  margin-bottom: 24px;
+  margin: 20px 34px 0 34px;

-  .panelWarningIcon {
+  i {
    font-size: @WarningErrorIconSize;
    width: @WarningErrorIconSize;
-    margin: auto 0 auto @SmallSpace;
+    margin-left: @SmallSpace;
+  }
+
+  .panelWarningIcon {
    color: @WarningIconColor;
  }

  .panelErrorIcon {
-    font-size: @WarningErrorIconSize;
-    width: @WarningErrorIconSize;
-    margin: auto 0 auto @SmallSpace;
    color: @ErrorIconColor;
  }

+  .panelLargeInfoIcon {
+    color: @InfoIconColor;
+  }
+
  .panelWarningErrorDetailsLinkContainer {
    display: flex;
    flex-direction: column;
@ -48,10 +98,19 @@
  }
 }

-.panelFooter button {
-  height: 30px;
+.panelFooter {
+  padding: 20px 34px;
+  border-top: solid 1px #bbbbbb;
+
+  & button {
+    height: 30px;
+  }
 }

 .deleteCollectionFeedback {
  margin-top: 12px;
 }
+
+.panelGroupSpacing > * {
+  margin-bottom: @SmallSpace;
+}
--- a/src/Explorer/Panes/PanelContainerComponent.tsx
+++ b/src/Explorer/Panes/PanelContainerComponent.tsx
@ -9,10 +9,30 @@ export interface PanelContainerProps {
  closePanel: () => void;
 }

-export class PanelContainerComponent extends React.Component<PanelContainerProps> {
+export interface PanelContainerState {
+  height: string;
+}
+
+export class PanelContainerComponent extends React.Component<PanelContainerProps, PanelContainerState> {
  private static readonly consoleHeaderHeight = 32;
  private static readonly consoleContentHeight = 220;

+  constructor(props: PanelContainerProps) {
+    super(props);
+
+    this.state = {
+      height: this.getPanelHeight(),
+    };
+  }
+
+  componentDidMount(): void {
+    window.addEventListener("resize", () => this.setState({ height: this.getPanelHeight() }));
+  }
+
+  componentWillUnmount(): void {
+    window.removeEventListener("resize", () => this.setState({ height: this.getPanelHeight() }));
+  }
+
  render(): JSX.Element {
    if (!this.props.panelContent) {
      return <></>;
@ -30,8 +50,10 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
        headerClassName="panelHeader"
        styles={{
          navigation: { borderBottom: "1px solid #cccccc" },
-          content: { padding: "24px 34px 20px 34px", height: "100%" },
+          content: { padding: 0, height: "100%" },
          scrollableContent: { height: "100%" },
+          header: { padding: "0 0 8px 34px" },
+          commands: { marginTop: 8 },
        }}
        style={{ height: this.getPanelHeight() }}
      >
--- a/src/Explorer/Panes/PanelErrorComponent.tsx
+++ b/src/Explorer/Panes/PanelErrorComponent.tsx
@ -1,29 +0,0 @@
-import React from "react";
-import { Icon, Text } from "office-ui-fabric-react";
-
-export interface PanelErrorProps {
-  message: string;
-  isWarning: boolean;
-  showErrorDetails: boolean;
-  openNotificationConsole?: () => void;
-}
-
-export const PanelErrorComponent: React.FunctionComponent<PanelErrorProps> = (props: PanelErrorProps): JSX.Element => (
-  <div className="panelWarningErrorContainer">
-    {props.isWarning ? (
-      <Icon iconName="WarningSolid" className="panelWarningIcon" />
-    ) : (
-      <Icon iconName="StatusErrorFull" className="panelErrorIcon" />
-    )}
-    <span className="panelWarningErrorDetailsLinkContainer">
-      <Text className="panelWarningErrorMessage" variant="small">
-        {props.message}
-      </Text>
-      {props.showErrorDetails && (
-        <a className="paneErrorLink" role="link" onClick={props.openNotificationConsole}>
-          More details
-        </a>
-      )}
-    </span>
-  </div>
-);
--- a/src/Explorer/Panes/PanelFooterComponent.tsx
+++ b/src/Explorer/Panes/PanelFooterComponent.tsx
@ -3,13 +3,12 @@ import { PrimaryButton } from "office-ui-fabric-react";

 export interface PanelFooterProps {
  buttonLabel: string;
-  onOKButtonClicked: () => void;
 }

 export const PanelFooterComponent: React.FunctionComponent<PanelFooterProps> = (
  props: PanelFooterProps
 ): JSX.Element => (
  <div className="panelFooter">
-    <PrimaryButton id="sidePanelOkButton" text={props.buttonLabel} onClick={() => props.onOKButtonClicked()} />
+    <PrimaryButton type="submit" id="sidePanelOkButton" text={props.buttonLabel} />
  </div>
 );
--- a/src/Explorer/Panes/PanelInfoErrorComponent.tsx
+++ b/src/Explorer/Panes/PanelInfoErrorComponent.tsx
@ -0,0 +1,45 @@
+import React from "react";
+import { Icon, Link, Stack, Text } from "office-ui-fabric-react";
+
+export interface PanelInfoErrorProps {
+  message: string;
+  messageType: string;
+  showErrorDetails: boolean;
+  link?: string;
+  linkText?: string;
+  openNotificationConsole?: () => void;
+}
+
+export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProps> = (
+  props: PanelInfoErrorProps
+): JSX.Element => {
+  let icon: JSX.Element;
+  if (props.messageType === "error") {
+    icon = <Icon iconName="StatusErrorFull" className="panelErrorIcon" />;
+  } else if (props.messageType === "warning") {
+    icon = <Icon iconName="WarningSolid" className="panelWarningIcon" />;
+  } else if (props.messageType === "info") {
+    icon = <Icon iconName="InfoSolid" className="panelLargeInfoIcon" />;
+  }
+
+  return (
+    <Stack className="panelInfoErrorContainer" horizontal verticalAlign="start">
+      {icon}
+      <span className="panelWarningErrorDetailsLinkContainer">
+        <Text className="panelWarningErrorMessage" variant="small">
+          {props.message}{" "}
+          {props.link && props.linkText && (
+            <Link target="_blank" href={props.link}>
+              {props.linkText}
+            </Link>
+          )}
+        </Text>
+        {props.showErrorDetails && (
+          <a className="paneErrorLink" role="link" onClick={props.openNotificationConsole}>
+            More details
+          </a>
+        )}
+      </span>
+    </Stack>
+  );
+};
--- a/src/Explorer/Panes/PanelLoadingScreen.tsx
+++ b/src/Explorer/Panes/PanelLoadingScreen.tsx
@ -0,0 +1,8 @@
+import React from "react";
+import LoadingIndicator_3Squares from "../../../images/LoadingIndicator_3Squares.gif";
+
+export const PanelLoadingScreen: React.FunctionComponent = () => (
+  <div className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer">
+    <img className="dataExplorerLoader" src={LoadingIndicator_3Squares} />
+  </div>
+);
--- a/src/Explorer/Panes/snapshots/DeleteCollectionConfirmationPane.test.tsx.snap
+++ b/src/Explorer/Panes/snapshots/DeleteCollectionConfirmationPane.test.tsx.snap
@ -15,324 +15,334 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
  }
  openNotificationConsole={[Function]}
 >
-  <div
-    className="panelContentContainer"
+  <form
+    className="panelFormWrapper"
+    onSubmit={[Function]}
  >
-    <PanelErrorComponent
-      isWarning={true}
+    <PanelInfoErrorComponent
      message="Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources."
+      messageType="warning"
      showErrorDetails={false}
    >
-      <div
-        className="panelWarningErrorContainer"
+      <Stack
+        className="panelInfoErrorContainer"
+        horizontal={true}
+        verticalAlign="start"
      >
-        <StyledIconBase
-          className="panelWarningIcon"
-          iconName="WarningSolid"
+        <div
+          className="ms-Stack panelInfoErrorContainer css-140"
        >
-          <IconBase
+          <StyledIconBase
            className="panelWarningIcon"
            iconName="WarningSolid"
-            styles={[Function]}
-            theme={
-              Object {
-                "disableGlobalClassNames": false,
-                "effects": Object {
-                  "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                  "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                  "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                  "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                  "roundedCorner2": "2px",
-                  "roundedCorner4": "4px",
-                  "roundedCorner6": "6px",
-                },
-                "fonts": Object {
-                  "large": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "18px",
-                    "fontWeight": 400,
+            key=".0:$.0"
+          >
+            <IconBase
+              className="panelWarningIcon"
+              iconName="WarningSolid"
+              styles={[Function]}
+              theme={
+                Object {
+                  "disableGlobalClassNames": false,
+                  "effects": Object {
+                    "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                    "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                    "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                    "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                    "roundedCorner2": "2px",
+                    "roundedCorner4": "4px",
+                    "roundedCorner6": "6px",
                  },
-                  "medium": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "14px",
-                    "fontWeight": 400,
+                  "fonts": Object {
+                    "large": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "18px",
+                      "fontWeight": 400,
+                    },
+                    "medium": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "14px",
+                      "fontWeight": 400,
+                    },
+                    "mediumPlus": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "16px",
+                      "fontWeight": 400,
+                    },
+                    "mega": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "68px",
+                      "fontWeight": 600,
+                    },
+                    "small": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "12px",
+                      "fontWeight": 400,
+                    },
+                    "smallPlus": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "12px",
+                      "fontWeight": 400,
+                    },
+                    "superLarge": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "42px",
+                      "fontWeight": 600,
+                    },
+                    "tiny": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "10px",
+                      "fontWeight": 400,
+                    },
+                    "xLarge": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "20px",
+                      "fontWeight": 600,
+                    },
+                    "xLargePlus": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "24px",
+                      "fontWeight": 600,
+                    },
+                    "xSmall": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "10px",
+                      "fontWeight": 400,
+                    },
+                    "xxLarge": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "28px",
+                      "fontWeight": 600,
+                    },
+                    "xxLargePlus": Object {
+                      "MozOsxFontSmoothing": "grayscale",
+                      "WebkitFontSmoothing": "antialiased",
+                      "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                      "fontSize": "32px",
+                      "fontWeight": 600,
+                    },
                  },
-                  "mediumPlus": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "16px",
-                    "fontWeight": 400,
+                  "isInverted": false,
+                  "palette": Object {
+                    "accent": "#0078d4",
+                    "black": "#000000",
+                    "blackTranslucent40": "rgba(0,0,0,.4)",
+                    "blue": "#0078d4",
+                    "blueDark": "#002050",
+                    "blueLight": "#00bcf2",
+                    "blueMid": "#00188f",
+                    "green": "#107c10",
+                    "greenDark": "#004b1c",
+                    "greenLight": "#bad80a",
+                    "magenta": "#b4009e",
+                    "magentaDark": "#5c005c",
+                    "magentaLight": "#e3008c",
+                    "neutralDark": "#201f1e",
+                    "neutralLight": "#edebe9",
+                    "neutralLighter": "#f3f2f1",
+                    "neutralLighterAlt": "#faf9f8",
+                    "neutralPrimary": "#323130",
+                    "neutralPrimaryAlt": "#3b3a39",
+                    "neutralQuaternary": "#d2d0ce",
+                    "neutralQuaternaryAlt": "#e1dfdd",
+                    "neutralSecondary": "#605e5c",
+                    "neutralSecondaryAlt": "#8a8886",
+                    "neutralTertiary": "#a19f9d",
+                    "neutralTertiaryAlt": "#c8c6c4",
+                    "orange": "#d83b01",
+                    "orangeLight": "#ea4300",
+                    "orangeLighter": "#ff8c00",
+                    "purple": "#5c2d91",
+                    "purpleDark": "#32145a",
+                    "purpleLight": "#b4a0ff",
+                    "red": "#e81123",
+                    "redDark": "#a4262c",
+                    "teal": "#008272",
+                    "tealDark": "#004b50",
+                    "tealLight": "#00b294",
+                    "themeDark": "#005a9e",
+                    "themeDarkAlt": "#106ebe",
+                    "themeDarker": "#004578",
+                    "themeLight": "#c7e0f4",
+                    "themeLighter": "#deecf9",
+                    "themeLighterAlt": "#eff6fc",
+                    "themePrimary": "#0078d4",
+                    "themeSecondary": "#2b88d8",
+                    "themeTertiary": "#71afe5",
+                    "white": "#ffffff",
+                    "whiteTranslucent40": "rgba(255,255,255,.4)",
+                    "yellow": "#ffb900",
+                    "yellowDark": "#d29200",
+                    "yellowLight": "#fff100",
                  },
-                  "mega": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "68px",
-                    "fontWeight": 600,
+                  "rtl": undefined,
+                  "semanticColors": Object {
+                    "accentButtonBackground": "#0078d4",
+                    "accentButtonText": "#ffffff",
+                    "actionLink": "#323130",
+                    "actionLinkHovered": "#201f1e",
+                    "blockingBackground": "#FDE7E9",
+                    "blockingIcon": "#FDE7E9",
+                    "bodyBackground": "#ffffff",
+                    "bodyBackgroundChecked": "#edebe9",
+                    "bodyBackgroundHovered": "#f3f2f1",
+                    "bodyDivider": "#edebe9",
+                    "bodyFrameBackground": "#ffffff",
+                    "bodyFrameDivider": "#edebe9",
+                    "bodyStandoutBackground": "#faf9f8",
+                    "bodySubtext": "#605e5c",
+                    "bodyText": "#323130",
+                    "bodyTextChecked": "#000000",
+                    "buttonBackground": "#ffffff",
+                    "buttonBackgroundChecked": "#c8c6c4",
+                    "buttonBackgroundCheckedHovered": "#edebe9",
+                    "buttonBackgroundDisabled": "#f3f2f1",
+                    "buttonBackgroundHovered": "#f3f2f1",
+                    "buttonBackgroundPressed": "#edebe9",
+                    "buttonBorder": "#8a8886",
+                    "buttonBorderDisabled": "#f3f2f1",
+                    "buttonText": "#323130",
+                    "buttonTextChecked": "#201f1e",
+                    "buttonTextCheckedHovered": "#000000",
+                    "buttonTextDisabled": "#a19f9d",
+                    "buttonTextHovered": "#201f1e",
+                    "buttonTextPressed": "#201f1e",
+                    "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                    "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                    "cardStandoutBackground": "#ffffff",
+                    "defaultStateBackground": "#faf9f8",
+                    "disabledBackground": "#f3f2f1",
+                    "disabledBodySubtext": "#c8c6c4",
+                    "disabledBodyText": "#a19f9d",
+                    "disabledBorder": "#c8c6c4",
+                    "disabledSubtext": "#d2d0ce",
+                    "disabledText": "#a19f9d",
+                    "errorBackground": "#FDE7E9",
+                    "errorIcon": "#A80000",
+                    "errorText": "#a4262c",
+                    "focusBorder": "#605e5c",
+                    "infoBackground": "#f3f2f1",
+                    "infoIcon": "#605e5c",
+                    "inputBackground": "#ffffff",
+                    "inputBackgroundChecked": "#0078d4",
+                    "inputBackgroundCheckedHovered": "#005a9e",
+                    "inputBorder": "#605e5c",
+                    "inputBorderHovered": "#323130",
+                    "inputFocusBorderAlt": "#0078d4",
+                    "inputForegroundChecked": "#ffffff",
+                    "inputIcon": "#0078d4",
+                    "inputIconDisabled": "#a19f9d",
+                    "inputIconHovered": "#005a9e",
+                    "inputPlaceholderBackgroundChecked": "#deecf9",
+                    "inputPlaceholderText": "#605e5c",
+                    "inputText": "#323130",
+                    "inputTextHovered": "#201f1e",
+                    "link": "#0078d4",
+                    "linkHovered": "#004578",
+                    "listBackground": "#ffffff",
+                    "listHeaderBackgroundHovered": "#f3f2f1",
+                    "listHeaderBackgroundPressed": "#edebe9",
+                    "listItemBackgroundChecked": "#edebe9",
+                    "listItemBackgroundCheckedHovered": "#e1dfdd",
+                    "listItemBackgroundHovered": "#f3f2f1",
+                    "listText": "#323130",
+                    "listTextColor": "#323130",
+                    "menuBackground": "#ffffff",
+                    "menuDivider": "#c8c6c4",
+                    "menuHeader": "#0078d4",
+                    "menuIcon": "#0078d4",
+                    "menuItemBackgroundChecked": "#edebe9",
+                    "menuItemBackgroundHovered": "#f3f2f1",
+                    "menuItemBackgroundPressed": "#edebe9",
+                    "menuItemText": "#323130",
+                    "menuItemTextHovered": "#201f1e",
+                    "messageLink": "#005A9E",
+                    "messageLinkHovered": "#004578",
+                    "messageText": "#323130",
+                    "primaryButtonBackground": "#0078d4",
+                    "primaryButtonBackgroundDisabled": "#f3f2f1",
+                    "primaryButtonBackgroundHovered": "#106ebe",
+                    "primaryButtonBackgroundPressed": "#005a9e",
+                    "primaryButtonBorder": "transparent",
+                    "primaryButtonText": "#ffffff",
+                    "primaryButtonTextDisabled": "#d2d0ce",
+                    "primaryButtonTextHovered": "#ffffff",
+                    "primaryButtonTextPressed": "#ffffff",
+                    "severeWarningBackground": "#FED9CC",
+                    "severeWarningIcon": "#D83B01",
+                    "smallInputBorder": "#605e5c",
+                    "successBackground": "#DFF6DD",
+                    "successIcon": "#107C10",
+                    "successText": "#107C10",
+                    "variantBorder": "#edebe9",
+                    "variantBorderHovered": "#a19f9d",
+                    "warningBackground": "#FFF4CE",
+                    "warningHighlight": "#ffb900",
+                    "warningIcon": "#797775",
+                    "warningText": "#323130",
                  },
-                  "small": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "12px",
-                    "fontWeight": 400,
+                  "spacing": Object {
+                    "l1": "20px",
+                    "l2": "32px",
+                    "m": "16px",
+                    "s1": "8px",
+                    "s2": "4px",
                  },
-                  "smallPlus": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "12px",
-                    "fontWeight": 400,
-                  },
-                  "superLarge": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "42px",
-                    "fontWeight": 600,
-                  },
-                  "tiny": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "10px",
-                    "fontWeight": 400,
-                  },
-                  "xLarge": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "20px",
-                    "fontWeight": 600,
-                  },
-                  "xLargePlus": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "24px",
-                    "fontWeight": 600,
-                  },
-                  "xSmall": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "10px",
-                    "fontWeight": 400,
-                  },
-                  "xxLarge": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "28px",
-                    "fontWeight": 600,
-                  },
-                  "xxLargePlus": Object {
-                    "MozOsxFontSmoothing": "grayscale",
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                    "fontSize": "32px",
-                    "fontWeight": 600,
-                  },
-                },
-                "isInverted": false,
-                "palette": Object {
-                  "accent": "#0078d4",
-                  "black": "#000000",
-                  "blackTranslucent40": "rgba(0,0,0,.4)",
-                  "blue": "#0078d4",
-                  "blueDark": "#002050",
-                  "blueLight": "#00bcf2",
-                  "blueMid": "#00188f",
-                  "green": "#107c10",
-                  "greenDark": "#004b1c",
-                  "greenLight": "#bad80a",
-                  "magenta": "#b4009e",
-                  "magentaDark": "#5c005c",
-                  "magentaLight": "#e3008c",
-                  "neutralDark": "#201f1e",
-                  "neutralLight": "#edebe9",
-                  "neutralLighter": "#f3f2f1",
-                  "neutralLighterAlt": "#faf9f8",
-                  "neutralPrimary": "#323130",
-                  "neutralPrimaryAlt": "#3b3a39",
-                  "neutralQuaternary": "#d2d0ce",
-                  "neutralQuaternaryAlt": "#e1dfdd",
-                  "neutralSecondary": "#605e5c",
-                  "neutralSecondaryAlt": "#8a8886",
-                  "neutralTertiary": "#a19f9d",
-                  "neutralTertiaryAlt": "#c8c6c4",
-                  "orange": "#d83b01",
-                  "orangeLight": "#ea4300",
-                  "orangeLighter": "#ff8c00",
-                  "purple": "#5c2d91",
-                  "purpleDark": "#32145a",
-                  "purpleLight": "#b4a0ff",
-                  "red": "#e81123",
-                  "redDark": "#a4262c",
-                  "teal": "#008272",
-                  "tealDark": "#004b50",
-                  "tealLight": "#00b294",
-                  "themeDark": "#005a9e",
-                  "themeDarkAlt": "#106ebe",
-                  "themeDarker": "#004578",
-                  "themeLight": "#c7e0f4",
-                  "themeLighter": "#deecf9",
-                  "themeLighterAlt": "#eff6fc",
-                  "themePrimary": "#0078d4",
-                  "themeSecondary": "#2b88d8",
-                  "themeTertiary": "#71afe5",
-                  "white": "#ffffff",
-                  "whiteTranslucent40": "rgba(255,255,255,.4)",
-                  "yellow": "#ffb900",
-                  "yellowDark": "#d29200",
-                  "yellowLight": "#fff100",
-                },
-                "rtl": undefined,
-                "semanticColors": Object {
-                  "accentButtonBackground": "#0078d4",
-                  "accentButtonText": "#ffffff",
-                  "actionLink": "#323130",
-                  "actionLinkHovered": "#201f1e",
-                  "blockingBackground": "#FDE7E9",
-                  "blockingIcon": "#FDE7E9",
-                  "bodyBackground": "#ffffff",
-                  "bodyBackgroundChecked": "#edebe9",
-                  "bodyBackgroundHovered": "#f3f2f1",
-                  "bodyDivider": "#edebe9",
-                  "bodyFrameBackground": "#ffffff",
-                  "bodyFrameDivider": "#edebe9",
-                  "bodyStandoutBackground": "#faf9f8",
-                  "bodySubtext": "#605e5c",
-                  "bodyText": "#323130",
-                  "bodyTextChecked": "#000000",
-                  "buttonBackground": "#ffffff",
-                  "buttonBackgroundChecked": "#c8c6c4",
-                  "buttonBackgroundCheckedHovered": "#edebe9",
-                  "buttonBackgroundDisabled": "#f3f2f1",
-                  "buttonBackgroundHovered": "#f3f2f1",
-                  "buttonBackgroundPressed": "#edebe9",
-                  "buttonBorder": "#8a8886",
-                  "buttonBorderDisabled": "#f3f2f1",
-                  "buttonText": "#323130",
-                  "buttonTextChecked": "#201f1e",
-                  "buttonTextCheckedHovered": "#000000",
-                  "buttonTextDisabled": "#a19f9d",
-                  "buttonTextHovered": "#201f1e",
-                  "buttonTextPressed": "#201f1e",
-                  "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                  "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                  "cardStandoutBackground": "#ffffff",
-                  "defaultStateBackground": "#faf9f8",
-                  "disabledBackground": "#f3f2f1",
-                  "disabledBodySubtext": "#c8c6c4",
-                  "disabledBodyText": "#a19f9d",
-                  "disabledBorder": "#c8c6c4",
-                  "disabledSubtext": "#d2d0ce",
-                  "disabledText": "#a19f9d",
-                  "errorBackground": "#FDE7E9",
-                  "errorIcon": "#A80000",
-                  "errorText": "#a4262c",
-                  "focusBorder": "#605e5c",
-                  "infoBackground": "#f3f2f1",
-                  "infoIcon": "#605e5c",
-                  "inputBackground": "#ffffff",
-                  "inputBackgroundChecked": "#0078d4",
-                  "inputBackgroundCheckedHovered": "#005a9e",
-                  "inputBorder": "#605e5c",
-                  "inputBorderHovered": "#323130",
-                  "inputFocusBorderAlt": "#0078d4",
-                  "inputForegroundChecked": "#ffffff",
-                  "inputIcon": "#0078d4",
-                  "inputIconDisabled": "#a19f9d",
-                  "inputIconHovered": "#005a9e",
-                  "inputPlaceholderBackgroundChecked": "#deecf9",
-                  "inputPlaceholderText": "#605e5c",
-                  "inputText": "#323130",
-                  "inputTextHovered": "#201f1e",
-                  "link": "#0078d4",
-                  "linkHovered": "#004578",
-                  "listBackground": "#ffffff",
-                  "listHeaderBackgroundHovered": "#f3f2f1",
-                  "listHeaderBackgroundPressed": "#edebe9",
-                  "listItemBackgroundChecked": "#edebe9",
-                  "listItemBackgroundCheckedHovered": "#e1dfdd",
-                  "listItemBackgroundHovered": "#f3f2f1",
-                  "listText": "#323130",
-                  "listTextColor": "#323130",
-                  "menuBackground": "#ffffff",
-                  "menuDivider": "#c8c6c4",
-                  "menuHeader": "#0078d4",
-                  "menuIcon": "#0078d4",
-                  "menuItemBackgroundChecked": "#edebe9",
-                  "menuItemBackgroundHovered": "#f3f2f1",
-                  "menuItemBackgroundPressed": "#edebe9",
-                  "menuItemText": "#323130",
-                  "menuItemTextHovered": "#201f1e",
-                  "messageLink": "#005A9E",
-                  "messageLinkHovered": "#004578",
-                  "messageText": "#323130",
-                  "primaryButtonBackground": "#0078d4",
-                  "primaryButtonBackgroundDisabled": "#f3f2f1",
-                  "primaryButtonBackgroundHovered": "#106ebe",
-                  "primaryButtonBackgroundPressed": "#005a9e",
-                  "primaryButtonBorder": "transparent",
-                  "primaryButtonText": "#ffffff",
-                  "primaryButtonTextDisabled": "#d2d0ce",
-                  "primaryButtonTextHovered": "#ffffff",
-                  "primaryButtonTextPressed": "#ffffff",
-                  "severeWarningBackground": "#FED9CC",
-                  "severeWarningIcon": "#D83B01",
-                  "smallInputBorder": "#605e5c",
-                  "successBackground": "#DFF6DD",
-                  "successIcon": "#107C10",
-                  "successText": "#107C10",
-                  "variantBorder": "#edebe9",
-                  "variantBorderHovered": "#a19f9d",
-                  "warningBackground": "#FFF4CE",
-                  "warningHighlight": "#ffb900",
-                  "warningIcon": "#797775",
-                  "warningText": "#323130",
-                },
-                "spacing": Object {
-                  "l1": "20px",
-                  "l2": "32px",
-                  "m": "16px",
-                  "s1": "8px",
-                  "s2": "4px",
-                },
+                }
              }
-            }
-          >
-            <i
-              aria-hidden={true}
-              className="panelWarningIcon root-141"
-              data-icon-name="WarningSolid"
            >
-              
-            </i>
-          </IconBase>
-        </StyledIconBase>
-        <span
-          className="panelWarningErrorDetailsLinkContainer"
-        >
-          <Text
-            className="panelWarningErrorMessage"
-            variant="small"
+              <i
+                aria-hidden={true}
+                className="panelWarningIcon root-142"
+                data-icon-name="WarningSolid"
+              >
+                
+              </i>
+            </IconBase>
+          </StyledIconBase>
+          <span
+            className="panelWarningErrorDetailsLinkContainer"
+            key=".0:$.1"
          >
-            <span
-              className="panelWarningErrorMessage css-142"
+            <Text
+              className="panelWarningErrorMessage"
+              variant="small"
            >
-              Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
-            </span>
-          </Text>
-        </span>
-      </div>
-    </PanelErrorComponent>
+              <span
+                className="panelWarningErrorMessage css-143"
+              >
+                Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
+                 
+              </span>
+            </Text>
+          </span>
+        </div>
+      </Stack>
+    </PanelInfoErrorComponent>
    <div
      className="panelMainContent"
    >
@ -348,7 +358,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
          variant="small"
        >
          <span
-            className="css-142"
+            className="css-143"
          >
            Confirm by typing the collection id
          </span>
@ -649,18 +659,18 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
            validateOnLoad={true}
          >
            <div
-              className="ms-TextField root-144"
+              className="ms-TextField root-145"
            >
              <div
                className="ms-TextField-wrapper"
              >
                <div
-                  className="ms-TextField-fieldGroup fieldGroup-145"
+                  className="ms-TextField-fieldGroup fieldGroup-146"
                >
                  <input
                    aria-invalid={false}
                    autoFocus={true}
-                    className="ms-TextField-field field-146"
+                    className="ms-TextField-field field-147"
                    id="confirmCollectionId"
                    onBlur={[Function]}
                    onChange={[Function]}
@ -683,7 +693,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
          variant="small"
        >
          <span
-            className="css-155"
+            className="css-156"
          >
            Help us improve Azure Cosmos DB!
          </span>
@ -693,7 +703,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
          variant="small"
        >
          <span
-            className="css-155"
+            className="css-156"
          >
            What is the reason why you are deleting this container?
          </span>
@ -996,17 +1006,17 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
            validateOnLoad={true}
          >
            <div
-              className="ms-TextField ms-TextField--multiline root-144"
+              className="ms-TextField ms-TextField--multiline root-145"
            >
              <div
                className="ms-TextField-wrapper"
              >
                <div
-                  className="ms-TextField-fieldGroup fieldGroup-156"
+                  className="ms-TextField-fieldGroup fieldGroup-157"
                >
                  <textarea
                    aria-invalid={false}
-                    className="ms-TextField-field field-157"
+                    className="ms-TextField-field field-158"
                    id="deleteCollectionFeedbackInput"
                    onBlur={[Function]}
                    onChange={[Function]}
@ -1024,19 +1034,17 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
    </div>
    <PanelFooterComponent
      buttonLabel="OK"
-      onOKButtonClicked={[Function]}
    >
      <div
        className="panelFooter"
      >
        <CustomizedPrimaryButton
          id="sidePanelOkButton"
-          onClick={[Function]}
          text="OK"
+          type="submit"
        >
          <PrimaryButton
            id="sidePanelOkButton"
-            onClick={[Function]}
            text="OK"
            theme={
              Object {
@ -1311,10 +1319,10 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                },
              }
            }
+            type="submit"
          >
            <CustomizedDefaultButton
              id="sidePanelOkButton"
-              onClick={[Function]}
              onRenderDescription={[Function]}
              primary={true}
              text="OK"
@ -1591,10 +1599,10 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                  },
                }
              }
+              type="submit"
            >
              <DefaultButton
                id="sidePanelOkButton"
-                onClick={[Function]}
                onRenderDescription={[Function]}
                primary={true}
                text="OK"
@ -1871,11 +1879,11 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                    },
                  }
                }
+                type="submit"
              >
                <BaseButton
                  baseClassName="ms-Button"
                  id="sidePanelOkButton"
-                  onClick={[Function]}
                  onRenderDescription={[Function]}
                  primary={true}
                  split={false}
@ -2696,10 +2704,11 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                      },
                    }
                  }
+                  type="submit"
                  variantClassName="ms-Button--primary"
                >
                  <button
-                    className="ms-Button ms-Button--primary root-159"
+                    className="ms-Button ms-Button--primary root-160"
                    data-is-focusable={true}
                    id="sidePanelOkButton"
                    onClick={[Function]}
@ -2708,17 +2717,17 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                    onKeyUp={[Function]}
                    onMouseDown={[Function]}
                    onMouseUp={[Function]}
-                    type="button"
+                    type="submit"
                  >
                    <span
-                      className="ms-Button-flexContainer flexContainer-160"
+                      className="ms-Button-flexContainer flexContainer-161"
                      data-automationid="splitbuttonprimary"
                    >
                      <span
-                        className="ms-Button-textContainer textContainer-161"
+                        className="ms-Button-textContainer textContainer-162"
                      >
                        <span
-                          className="ms-Button-label label-163"
+                          className="ms-Button-label label-164"
                          id="id__6"
                          key="id__6"
                        >
@ -2735,15 +2744,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
        </CustomizedPrimaryButton>
      </div>
    </PanelFooterComponent>
-    <div
-      className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer"
-      hidden={true}
-    >
-      <img
-        className="dataExplorerLoader"
-        src=""
-      />
-    </div>
-  </div>
+  </form>
 </DeleteCollectionConfirmationPanel>
 `;
--- a/src/Explorer/Panes/snapshots/PanelContainerComponent.test.tsx.snap
+++ b/src/Explorer/Panes/snapshots/PanelContainerComponent.test.tsx.snap
@ -16,9 +16,15 @@ exports[`PaneContainerComponent test should be resize if notification console is
  }
  styles={
    Object {
+      "commands": Object {
+        "marginTop": 8,
+      },
      "content": Object {
        "height": "100%",
-        "padding": "24px 34px 20px 34px",
+        "padding": 0,
+      },
+      "header": Object {
+        "padding": "0 0 8px 34px",
      },
      "navigation": Object {
        "borderBottom": "1px solid #cccccc",
@ -52,9 +58,15 @@ exports[`PaneContainerComponent test should render with panel content and header
  }
  styles={
    Object {
+      "commands": Object {
+        "marginTop": 8,
+      },
      "content": Object {
        "height": "100%",
-        "padding": "24px 34px 20px 34px",
+        "padding": 0,
+      },
+      "header": Object {
+        "padding": "0 0 8px 34px",
      },
      "navigation": Object {
        "borderBottom": "1px solid #cccccc",
--- a/src/Main.tsx
+++ b/src/Main.tsx
@ -45,6 +45,7 @@ import "./Explorer/Controls/DynamicList/DynamicListComponent.less";
 import "./Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.less";
 import "./Explorer/Controls/JsonEditor/JsonEditorComponent.less";
 import "./Explorer/Controls/Notebook/NotebookTerminalComponent.less";
+import "./Explorer/Controls/ThroughputInput/ThroughputInput.less";
 import "./Explorer/Controls/TreeComponent/treeComponent.less";
 import { ExplorerParams } from "./Explorer/Explorer";
 import "./Explorer/Graph/GraphExplorerComponent/graphExplorer.less";