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
2025-12-21 18:01:39 +00:00 · 2021-03-18 18:06:13 -07:00
parent c6090e2663
commit 65c859c835
22 changed files with 1891 additions and 419 deletions
--- 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",