diff --git a/src/Explorer/Panes/CopyNotebookPane.tsx b/src/Explorer/Panes/CopyNotebookPane.tsx
index 8cc0cdafb..3a013849c 100644
--- a/src/Explorer/Panes/CopyNotebookPane.tsx
+++ b/src/Explorer/Panes/CopyNotebookPane.tsx
@@ -1,18 +1,18 @@
 import ko from "knockout";
+import { IDropdownOption } from "office-ui-fabric-react";
 import * as React from "react";
 import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
-import { JunoClient, IPinnedRepo } from "../../Juno/JunoClient";
+import { HttpStatusCodes } from "../../Common/Constants";
+import { getErrorMessage, handleError } from "../../Common/ErrorHandlingUtils";
+import { GitHubOAuthService } from "../../GitHub/GitHubOAuthService";
+import { IPinnedRepo, JunoClient } from "../../Juno/JunoClient";
+import * as GitHubUtils from "../../Utils/GitHubUtils";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "./GenericRightPaneComponent";
-import { CopyNotebookPaneComponent, CopyNotebookPaneProps } from "./CopyNotebookPaneComponent";
-import { IDropdownOption } from "office-ui-fabric-react";
-import { GitHubOAuthService } from "../../GitHub/GitHubOAuthService";
-import { HttpStatusCodes } from "../../Common/Constants";
-import * as GitHubUtils from "../../Utils/GitHubUtils";
-import { NotebookContentItemType, NotebookContentItem } from "../Notebook/NotebookContentItem";
+import { NotebookContentItem, NotebookContentItemType } from "../Notebook/NotebookContentItem";
 import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
-import { handleError, getErrorMessage } from "../../Common/ErrorHandlingUtils";
+import { CopyNotebookPaneComponent, CopyNotebookPaneProps } from "./CopyNotebookPaneComponent";
+import { RightPaneWrapper, RightPaneWrapperProps } from "./RightPaneWrapper/RightPaneWrapper";
 
 interface Location {
   type: "MyNotebooks" | "GitHub";
@@ -51,7 +51,7 @@ export class CopyNotebookPaneAdapter implements ReactAdapter {
       return undefined;
     }
 
-    const genericPaneProps: GenericRightPaneProps = {
+    const genericPaneProps: RightPaneWrapperProps = {
       container: this.container,
       formError: this.formError,
       formErrorDetail: this.formErrorDetail,
@@ -70,9 +70,9 @@ export class CopyNotebookPaneAdapter implements ReactAdapter {
     };
 
     return (
-      <GenericRightPaneComponent {...genericPaneProps}>
+      <RightPaneWrapper {...genericPaneProps}>
         <CopyNotebookPaneComponent {...copyNotebookPaneProps} />
-      </GenericRightPaneComponent>
+      </RightPaneWrapper>
     );
   }
 
diff --git a/src/Explorer/Panes/DeleteCollectionConfirmationPanel/index.tsx b/src/Explorer/Panes/DeleteCollectionConfirmationPanel/index.tsx
index 0daca44fe..2aeb1d98f 100644
--- a/src/Explorer/Panes/DeleteCollectionConfirmationPanel/index.tsx
+++ b/src/Explorer/Panes/DeleteCollectionConfirmationPanel/index.tsx
@@ -11,7 +11,7 @@ import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcesso
 import { userContext } from "../../../UserContext";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
+import { RightPaneWrapper, RightPaneWrapperProps } from "../RightPaneWrapper/RightPaneWrapper";
 export interface DeleteCollectionConfirmationPanelProps {
   explorer: Explorer;
   collectionName: string;
@@ -97,7 +97,7 @@ export const DeleteCollectionConfirmationPanel: FunctionComponent<DeleteCollecti
       );
     }
   };
-  const genericPaneProps: GenericRightPaneProps = {
+  const genericPaneProps: RightPaneWrapperProps = {
     container: explorer,
     formError: formError,
     formErrorDetail: formError,
@@ -109,7 +109,7 @@ export const DeleteCollectionConfirmationPanel: FunctionComponent<DeleteCollecti
     onSubmit: submit,
   };
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneWrapper {...genericPaneProps}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           <div className="confirmDeleteInput">
@@ -147,6 +147,6 @@ export const DeleteCollectionConfirmationPanel: FunctionComponent<DeleteCollecti
           )}
         </div>
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneWrapper>
   );
 };
diff --git a/src/Explorer/Panes/ExecuteSprocParamsPanel/index.tsx b/src/Explorer/Panes/ExecuteSprocParamsPanel/index.tsx
index 1107110a5..cfe7fada5 100644
--- a/src/Explorer/Panes/ExecuteSprocParamsPanel/index.tsx
+++ b/src/Explorer/Panes/ExecuteSprocParamsPanel/index.tsx
@@ -4,7 +4,7 @@ import React, { FunctionComponent, useState } from "react";
 import AddPropertyIcon from "../../../../images/Add-property.svg";
 import Explorer from "../../Explorer";
 import StoredProcedure from "../../Tree/StoredProcedure";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
+import { RightPaneWrapper, RightPaneWrapperProps } from "../RightPaneWrapper/RightPaneWrapper";
 import { InputParameter } from "./InputParameter";
 
 interface ExecuteSprocParamsPaneProps {
@@ -39,7 +39,7 @@ export const ExecuteSprocParamsPanel: FunctionComponent<ExecuteSprocParamsPanePr
     setSelectedKey(item);
   };
 
-  const genericPaneProps: GenericRightPaneProps = {
+  const genericPaneProps: RightPaneWrapperProps = {
     container: explorer,
     formError: formError,
     formErrorDetail: formErrorsDetails,
@@ -120,7 +120,7 @@ export const ExecuteSprocParamsPanel: FunctionComponent<ExecuteSprocParamsPanePr
   };
 
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneWrapper {...genericPaneProps}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           <InputParameter
@@ -160,6 +160,6 @@ export const ExecuteSprocParamsPanel: FunctionComponent<ExecuteSprocParamsPanePr
           </Stack>
         </div>
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneWrapper>
   );
 };
diff --git a/src/Explorer/Panes/LoadQueryPanel/index.tsx b/src/Explorer/Panes/LoadQueryPanel/index.tsx
index 0b2816c04..fbc7c450e 100644
--- a/src/Explorer/Panes/LoadQueryPanel/index.tsx
+++ b/src/Explorer/Panes/LoadQueryPanel/index.tsx
@@ -8,7 +8,7 @@ import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Ut
 import Explorer from "../../Explorer";
 import QueryTab from "../../Tabs/QueryTab";
 import { Collection } from "..//../../Contracts/ViewModels";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
+import { RightPaneWrapper, RightPaneWrapperProps } from "../RightPaneWrapper/RightPaneWrapper";
 
 interface LoadQueryPanelProps {
   explorer: Explorer;
@@ -33,7 +33,7 @@ export const LoadQueryPanel: FunctionComponent<LoadQueryPanelProps> = ({
   };
 
   const title = "Load Query";
-  const genericPaneProps: GenericRightPaneProps = {
+  const genericPaneProps: RightPaneWrapperProps = {
     container: explorer,
     formError: formError,
     formErrorDetail: formErrorsDetails,
@@ -104,7 +104,7 @@ export const LoadQueryPanel: FunctionComponent<LoadQueryPanelProps> = ({
   };
 
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneWrapper {...genericPaneProps}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           <Stack horizontal>
@@ -129,6 +129,6 @@ export const LoadQueryPanel: FunctionComponent<LoadQueryPanelProps> = ({
           </Stack>
         </div>
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneWrapper>
   );
 };
diff --git a/src/Explorer/Panes/PanelFooterComponent.tsx b/src/Explorer/Panes/PanelFooterComponent.tsx
index b6c2cb255..9678da2dd 100644
--- a/src/Explorer/Panes/PanelFooterComponent.tsx
+++ b/src/Explorer/Panes/PanelFooterComponent.tsx
@@ -1,14 +1,20 @@
-import React from "react";
 import { PrimaryButton } from "office-ui-fabric-react";
+import React from "react";
 
 export interface PanelFooterProps {
   buttonLabel: string;
 }
 
-export const PanelFooterComponent: React.FunctionComponent<PanelFooterProps> = (
-  props: PanelFooterProps
-): JSX.Element => (
+export const PanelFooterComponent: React.FunctionComponent<PanelFooterProps> = ({
+  buttonLabel,
+}: PanelFooterProps): JSX.Element => (
   <div className="panelFooter">
-    <PrimaryButton type="submit" id="sidePanelOkButton" text={props.buttonLabel} />
+    <PrimaryButton
+      type="submit"
+      id="sidePanelOkButton"
+      text={buttonLabel}
+      ariaLabel={buttonLabel}
+      data-testid="submit"
+    />
   </div>
 );
diff --git a/src/Explorer/Panes/PanelInfoErrorComponent.tsx b/src/Explorer/Panes/PanelInfoErrorComponent.tsx
index 97282b12e..5618560e0 100644
--- a/src/Explorer/Panes/PanelInfoErrorComponent.tsx
+++ b/src/Explorer/Panes/PanelInfoErrorComponent.tsx
@@ -1,5 +1,5 @@
-import React from "react";
 import { Icon, Link, Stack, Text } from "office-ui-fabric-react";
+import React from "react";
 
 export interface PanelInfoErrorProps {
   message: string;
@@ -8,38 +8,47 @@ export interface PanelInfoErrorProps {
   link?: string;
   linkText?: string;
   openNotificationConsole?: () => void;
+  formError?: boolean;
 }
 
-export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProps> = (
-  props: PanelInfoErrorProps
-): JSX.Element => {
+export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProps> = ({
+  message,
+  messageType,
+  showErrorDetails,
+  link,
+  linkText,
+  openNotificationConsole,
+  formError = true,
+}: 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" />;
+  if (messageType === "error") {
+    icon = <Icon iconName="StatusErrorFull" className="panelErrorIcon" data-testid="errorIcon" />;
+  } else if (messageType === "warning") {
+    icon = <Icon iconName="WarningSolid" className="panelWarningIcon" data-testid="warningIcon" />;
+  } else if (messageType === "info") {
+    icon = <Icon iconName="InfoSolid" className="panelLargeInfoIcon" data-testid="InfoIcon" />;
   }
 
   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>
+    formError && (
+      <Stack className="panelInfoErrorContainer" horizontal verticalAlign="start">
+        {icon}
+        <span className="panelWarningErrorDetailsLinkContainer">
+          <Text className="panelWarningErrorMessage" variant="small" data-testid="panelmessage">
+            {message}
+            {link && linkText && (
+              <Link target="_blank" href={link}>
+                {linkText}
+              </Link>
+            )}
+          </Text>
+          {showErrorDetails && (
+            <a className="paneErrorLink" role="link" onClick={openNotificationConsole}>
+              More details
+            </a>
           )}
-        </Text>
-        {props.showErrorDetails && (
-          <a className="paneErrorLink" role="link" onClick={props.openNotificationConsole}>
-            More details
-          </a>
-        )}
-      </span>
-    </Stack>
+        </span>
+      </Stack>
+    )
   );
 };
diff --git a/src/Explorer/Panes/PublishNotebookPaneAdapter.tsx b/src/Explorer/Panes/PublishNotebookPaneAdapter.tsx
index e6028b29e..9c4bcf22a 100644
--- a/src/Explorer/Panes/PublishNotebookPaneAdapter.tsx
+++ b/src/Explorer/Panes/PublishNotebookPaneAdapter.tsx
@@ -1,20 +1,20 @@
+import { toJS } from "@nteract/commutable";
+import { ImmutableNotebook } from "@nteract/commutable/src";
 import ko from "knockout";
 import * as React from "react";
 import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
-import Explorer from "../Explorer";
-import { JunoClient } from "../../Juno/JunoClient";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "./GenericRightPaneComponent";
-import { PublishNotebookPaneComponent, PublishNotebookPaneProps } from "./PublishNotebookPaneComponent";
-import { ImmutableNotebook } from "@nteract/commutable/src";
-import { toJS } from "@nteract/commutable";
-import { CodeOfConductComponent } from "../Controls/NotebookGallery/CodeOfConductComponent";
 import { HttpStatusCodes } from "../../Common/Constants";
-import { handleError, getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { GalleryTab } from "../Controls/NotebookGallery/GalleryViewerComponent";
-import { traceFailure, traceStart, traceSuccess } from "../../Shared/Telemetry/TelemetryProcessor";
+import { getErrorMessage, getErrorStack, handleError } from "../../Common/ErrorHandlingUtils";
+import { JunoClient } from "../../Juno/JunoClient";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
+import { traceFailure, traceStart, traceSuccess } from "../../Shared/Telemetry/TelemetryProcessor";
+import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import { CodeOfConductComponent } from "../Controls/NotebookGallery/CodeOfConductComponent";
+import { GalleryTab } from "../Controls/NotebookGallery/GalleryViewerComponent";
+import Explorer from "../Explorer";
 import * as FileSystemUtil from "../Notebook/FileSystemUtil";
+import { PublishNotebookPaneComponent, PublishNotebookPaneProps } from "./PublishNotebookPaneComponent";
+import { RightPaneWrapper, RightPaneWrapperProps } from "./RightPaneWrapper/RightPaneWrapper";
 
 export class PublishNotebookPaneAdapter implements ReactAdapter {
   parameters: ko.Observable<number>;
@@ -44,7 +44,7 @@ export class PublishNotebookPaneAdapter implements ReactAdapter {
       return undefined;
     }
 
-    const props: GenericRightPaneProps = {
+    const props: RightPaneWrapperProps = {
       container: this.container,
       formError: this.formError,
       formErrorDetail: this.formErrorDetail,
@@ -74,7 +74,7 @@ export class PublishNotebookPaneAdapter implements ReactAdapter {
     };
 
     return (
-      <GenericRightPaneComponent {...props}>
+      <RightPaneWrapper {...props}>
         {!this.isCodeOfConductAccepted ? (
           <div style={{ padding: "15px", marginTop: "10px" }}>
             <CodeOfConductComponent
@@ -88,7 +88,7 @@ export class PublishNotebookPaneAdapter implements ReactAdapter {
         ) : (
           <PublishNotebookPaneComponent {...publishNotebookPaneProps} />
         )}
-      </GenericRightPaneComponent>
+      </RightPaneWrapper>
     );
   }
 
diff --git a/src/Explorer/Panes/RightPaneWrapper/RightPaneWrapper.test.tsx b/src/Explorer/Panes/RightPaneWrapper/RightPaneWrapper.test.tsx
new file mode 100644
index 000000000..de7ca9f1f
--- /dev/null
+++ b/src/Explorer/Panes/RightPaneWrapper/RightPaneWrapper.test.tsx
@@ -0,0 +1,50 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { mount, ReactWrapper } from "enzyme";
+import React from "react";
+import Explorer from "../../Explorer";
+import { RightPaneWrapper } from "./RightPaneWrapper";
+
+const onClose = jest.fn();
+const onSubmit = jest.fn();
+
+const props = {
+  closePanel: (): void => undefined,
+  container: new Explorer(),
+  formError: "",
+  formErrorDetail: "",
+  id: "loadQueryPane",
+  isExecuting: false,
+  title: "Load Query Pane",
+  submitButtonText: "Load",
+  onClose,
+  onSubmit,
+};
+
+describe("Load Query Pane", () => {
+  let wrapper: ReactWrapper;
+
+  it("should render Default properly", () => {
+    wrapper = mount(<RightPaneWrapper {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+  it("should call close method click cancel icon", () => {
+    render(<RightPaneWrapper {...props} />);
+    fireEvent.click(screen.getByTestId("closePaneBtn"));
+    expect(onClose).toHaveBeenCalled();
+  });
+  it("should call submit method enter in form", () => {
+    render(<RightPaneWrapper {...props} />);
+    fireEvent.click(screen.getByTestId("submit"));
+    expect(onSubmit).toHaveBeenCalled();
+  });
+  it("should call submit method click on submit button", () => {
+    render(<RightPaneWrapper {...props} />);
+    fireEvent.click(screen.getByTestId("submit"));
+    expect(onSubmit).toHaveBeenCalled();
+  });
+  it("should render error in header", () => {
+    render(<RightPaneWrapper {...props} formError="file already Exist" />);
+    expect(screen.getByTestId("errorIcon")).toBeDefined();
+    expect(screen.getByTestId("panelmessage").innerHTML).toEqual("file already Exist");
+  });
+});
diff --git a/src/Explorer/Panes/GenericRightPaneComponent/index.tsx b/src/Explorer/Panes/RightPaneWrapper/RightPaneWrapper.tsx
similarity index 50%
rename from src/Explorer/Panes/GenericRightPaneComponent/index.tsx
rename to src/Explorer/Panes/RightPaneWrapper/RightPaneWrapper.tsx
index 409711e8a..ee79e91bc 100644
--- a/src/Explorer/Panes/GenericRightPaneComponent/index.tsx
+++ b/src/Explorer/Panes/RightPaneWrapper/RightPaneWrapper.tsx
@@ -1,11 +1,12 @@
-import { IconButton, PrimaryButton } from "office-ui-fabric-react/lib/Button";
+import { IconButton } from "office-ui-fabric-react/lib/Button";
 import React, { FunctionComponent, ReactNode } from "react";
-import ErrorRedIcon from "../../../../images/error_red.svg";
-import LoadingIndicatorIcon from "../../../../images/LoadingIndicator_3Squares.gif";
 import { KeyCodes } from "../../../Common/Constants";
 import Explorer from "../../Explorer";
+import { PanelFooterComponent } from "../PanelFooterComponent";
+import { PanelInfoErrorComponent, PanelInfoErrorProps } from "../PanelInfoErrorComponent";
+import { PanelLoadingScreen } from "../PanelLoadingScreen";
 
-export interface GenericRightPaneProps {
+export interface RightPaneWrapperProps {
   container: Explorer;
   formError: string;
   formErrorDetail: string;
@@ -23,7 +24,7 @@ export interface GenericRightPaneState {
   panelHeight: number;
 }
 
-export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps> = ({
+export const RightPaneWrapper: FunctionComponent<RightPaneWrapperProps> = ({
   container,
   formError,
   formErrorDetail,
@@ -33,9 +34,9 @@ export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps>
   onSubmit,
   submitButtonText,
   title,
-  isSubmitButtonHidden,
+  isSubmitButtonHidden = false,
   children,
-}: GenericRightPaneProps) => {
+}: RightPaneWrapperProps) => {
   const getPanelHeight = (): number => {
     const notificationConsoleElement: HTMLElement = document.getElementById("explorerNotificationConsole");
     return window.innerHeight - $(notificationConsoleElement).height();
@@ -43,6 +44,10 @@ export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps>
 
   const panelHeight: number = getPanelHeight();
 
+  const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    onSubmit();
+  };
   const renderPanelHeader = (): JSX.Element => {
     return (
       <div className="firstdivbg headerline">
@@ -52,6 +57,7 @@ export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps>
         <IconButton
           ariaLabel="Close pane"
           title="Close pane"
+          data-testid="closePaneBtn"
           onClick={onClose}
           tabIndex={0}
           className="closePaneBtn"
@@ -61,52 +67,6 @@ export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps>
     );
   };
 
-  const renderErrorSection = (): JSX.Element => {
-    return (
-      <div className="warningErrorContainer" aria-live="assertive" hidden={!formError}>
-        <div className="warningErrorContent">
-          <span>
-            <img className="paneErrorIcon" src={ErrorRedIcon} alt="Error" />
-          </span>
-          <span className="warningErrorDetailsLinkContainer">
-            <span className="formErrors" title={formError}>
-              {formError}
-            </span>
-            <a className="errorLink" role="link" hidden={!formErrorDetail} onClick={showErrorDetail}>
-              More details
-            </a>
-          </span>
-        </div>
-      </div>
-    );
-  };
-
-  const renderPanelFooter = (): JSX.Element => {
-    return (
-      <div className="paneFooter">
-        <div className="leftpanel-okbut">
-          <PrimaryButton
-            style={{ visibility: isSubmitButtonHidden ? "hidden" : "visible" }}
-            ariaLabel="Submit"
-            title="Submit"
-            onClick={onSubmit}
-            tabIndex={0}
-            className="genericPaneSubmitBtn"
-            text={submitButtonText}
-          />
-        </div>
-      </div>
-    );
-  };
-
-  const renderLoadingScreen = (): JSX.Element => {
-    return (
-      <div className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" hidden={!isExecuting}>
-        <img className="dataExplorerLoader" src={LoadingIndicatorIcon} />
-      </div>
-    );
-  };
-
   const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
     if (event.keyCode === KeyCodes.Escape) {
       onClose();
@@ -118,17 +78,27 @@ export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps>
     container.expandConsole();
   };
 
+  const panelInfoErrorProps: PanelInfoErrorProps = {
+    messageType: "error",
+    message: formError,
+    formError: formError !== "",
+    showErrorDetails: formErrorDetail !== "",
+    openNotificationConsole: showErrorDetail,
+  };
+
   return (
     <div tabIndex={-1} onKeyDown={onKeyDown}>
       <div className="contextual-pane-out" onClick={onClose}></div>
       <div className="contextual-pane" id={id} style={{ height: panelHeight }} onKeyDown={onKeyDown}>
         <div className="panelContentWrapper">
           {renderPanelHeader()}
-          {renderErrorSection()}
-          {children}
-          {renderPanelFooter()}
+          <PanelInfoErrorComponent {...panelInfoErrorProps} />
+          <form className="panelFormWrapper" onSubmit={handleOnSubmit}>
+            {children}
+            {!isSubmitButtonHidden && <PanelFooterComponent buttonLabel={submitButtonText} />}
+          </form>
         </div>
-        {renderLoadingScreen()}
+        {isExecuting && <PanelLoadingScreen />}
       </div>
     </div>
   );
diff --git a/src/Explorer/Panes/RightPaneWrapper/__snapshots__/RightPaneWrapper.test.tsx.snap b/src/Explorer/Panes/RightPaneWrapper/__snapshots__/RightPaneWrapper.test.tsx.snap
new file mode 100644
index 000000000..cfdce4395
--- /dev/null
+++ b/src/Explorer/Panes/RightPaneWrapper/__snapshots__/RightPaneWrapper.test.tsx.snap
@@ -0,0 +1,3592 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Load Query Pane should render Default properly 1`] = `
+<RightPaneWrapper
+  closePanel={[Function]}
+  container={
+    Explorer {
+      "_closeModalDialog": [Function],
+      "_closeSynapseLinkModalDialog": [Function],
+      "_isAfecFeatureRegistered": [Function],
+      "_isInitializingNotebooks": false,
+      "_panes": Array [
+        AddDatabasePane {
+          "autoPilotUsageCost": [Function],
+          "canConfigureThroughput": [Function],
+          "canExceedMaximumValue": [Function],
+          "canRequestSupport": [Function],
+          "container": [Circular],
+          "costsVisible": [Function],
+          "databaseCreateNewShared": [Function],
+          "databaseId": [Function],
+          "databaseIdLabel": [Function],
+          "databaseIdPlaceHolder": [Function],
+          "databaseIdTooltipText": [Function],
+          "databaseLevelThroughputTooltipText": [Function],
+          "firstFieldHasFocus": [Function],
+          "formErrors": [Function],
+          "formErrorsDetails": [Function],
+          "freeTierExceedThroughputTooltip": [Function],
+          "id": "adddatabasepane",
+          "isAutoPilotSelected": [Function],
+          "isExecuting": [Function],
+          "isFreeTierAccount": [Function],
+          "isTemplateReady": [Function],
+          "maxAutoPilotThroughputSet": [Function],
+          "maxThroughputRU": [Function],
+          "maxThroughputRUText": [Function],
+          "minThroughputRU": [Function],
+          "onMoreDetailsKeyPress": [Function],
+          "requestUnitsUsageCost": [Function],
+          "ruToolTipText": [Function],
+          "showUpsellMessage": [Function],
+          "throughput": [Function],
+          "throughputRangeText": [Function],
+          "throughputSpendAck": [Function],
+          "throughputSpendAckText": [Function],
+          "throughputSpendAckVisible": [Function],
+          "title": [Function],
+          "upsellAnchorText": [Function],
+          "upsellAnchorUrl": [Function],
+          "upsellMessage": [Function],
+          "upsellMessageAriaLabel": [Function],
+          "visible": [Function],
+        },
+        AddCollectionPane {
+          "_isSynapseLinkEnabled": [Function],
+          "autoPilotThroughput": [Function],
+          "autoPilotUsageCost": [Function],
+          "canConfigureThroughput": [Function],
+          "canExceedMaximumValue": [Function],
+          "canRequestSupport": [Function],
+          "collectionId": [Function],
+          "collectionIdTitle": [Function],
+          "collectionWithThroughputInShared": [Function],
+          "collectionWithThroughputInSharedTitle": [Function],
+          "container": [Circular],
+          "costsVisible": [Function],
+          "databaseCreateNew": [Function],
+          "databaseCreateNewShared": [Function],
+          "databaseHasSharedOffer": [Function],
+          "databaseId": [Function],
+          "databaseIds": [Function],
+          "dedicatedRequestUnitsUsageCost": [Function],
+          "displayCollectionThroughput": [Function],
+          "firstFieldHasFocus": [Function],
+          "formErrors": [Function],
+          "formErrorsDetails": [Function],
+          "formWarnings": [Function],
+          "freeTierExceedThroughputTooltip": [Function],
+          "id": "addcollectionpane",
+          "isAnalyticalStorageOn": [Function],
+          "isAutoPilotSelected": [Function],
+          "isExecuting": [Function],
+          "isFixedStorageSelected": [Function],
+          "isFreeTierAccount": [Function],
+          "isNonTableApi": [Function],
+          "isPreferredApiTable": [Function],
+          "isSharedAutoPilotSelected": [Function],
+          "isSynapseLinkSupported": [Function],
+          "isSynapseLinkUpdating": [Function],
+          "isTemplateReady": [Function],
+          "isTryCosmosDBSubscription": [Function],
+          "isUnlimitedStorageSelected": [Function],
+          "largePartitionKey": [Function],
+          "lowerCasePartitionKeyName": [Function],
+          "maxCollectionsReached": [Function],
+          "maxCollectionsReachedMessage": [Function],
+          "maxThroughputRU": [Function],
+          "minThroughputRU": [Function],
+          "onMoreDetailsKeyPress": [Function],
+          "partitionKey": [Function],
+          "partitionKeyName": [Function],
+          "partitionKeyPattern": [Function],
+          "partitionKeyPlaceholder": [Function],
+          "partitionKeyTitle": [Function],
+          "partitionKeyVisible": [Function],
+          "requestUnitsUsageCost": [Function],
+          "ruToolTipText": [Function],
+          "sharedAutoPilotThroughput": [Function],
+          "sharedThroughputRangeText": [Function],
+          "shouldCreateMongoWildcardIndex": [Function],
+          "shouldUseDatabaseThroughput": [Function],
+          "showAnalyticalStore": [Function],
+          "showEnableSynapseLink": [Function],
+          "showIndexingOptionsForSharedThroughput": [Function],
+          "showUpsellMessage": [Function],
+          "storage": [Function],
+          "throughputDatabase": [Function],
+          "throughputMultiPartition": [Function],
+          "throughputRangeText": [Function],
+          "throughputSinglePartition": [Function],
+          "throughputSpendAck": [Function],
+          "throughputSpendAckText": [Function],
+          "throughputSpendAckVisible": [Function],
+          "title": [Function],
+          "ttl90DaysEnabled": [Function],
+          "uniqueKeys": [Function],
+          "uniqueKeysPlaceholder": [Function],
+          "uniqueKeysVisible": [Function],
+          "upsellAnchorText": [Function],
+          "upsellAnchorUrl": [Function],
+          "upsellMessage": [Function],
+          "upsellMessageAriaLabel": [Function],
+          "useIndexingForSharedThroughput": [Function],
+          "visible": [Function],
+        },
+        GraphStylingPane {
+          "container": [Circular],
+          "firstFieldHasFocus": [Function],
+          "formErrors": [Function],
+          "formErrorsDetails": [Function],
+          "graphConfigUIData": Object {
+            "nodeCaptionChoice": [Function],
+            "nodeColorKeyChoice": [Function],
+            "nodeIconChoice": [Function],
+            "nodeIconSet": [Function],
+            "nodeProperties": [Function],
+            "nodePropertiesWithNone": [Function],
+            "showNeighborType": [Function],
+          },
+          "id": "graphstylingpane",
+          "isExecuting": [Function],
+          "isTemplateReady": [Function],
+          "title": [Function],
+          "visible": [Function],
+        },
+        AddTableEntityPane {
+          "addButtonLabel": "Add Property",
+          "attributeNameLabel": "Property Name",
+          "attributeValueLabel": "Value",
+          "canAdd": [Function],
+          "canApply": [Function],
+          "container": [Circular],
+          "dataTypeLabel": "Type",
+          "displayedAttributes": [Function],
+          "editAttribute": [Function],
+          "editButtonLabel": "Edit",
+          "editingProperty": [Function],
+          "edmTypes": [Function],
+          "enterRequiredValueLabel": "Enter identifier value.",
+          "enterValueLabel": "Enter value to keep property.",
+          "finishEditingAttribute": [Function],
+          "firstFieldHasFocus": [Function],
+          "formErrors": [Function],
+          "formErrorsDetails": [Function],
+          "id": "addtableentitypane",
+          "insertAttribute": [Function],
+          "isEditing": [Function],
+          "isExecuting": [Function],
+          "isTemplateReady": [Function],
+          "onAddPropertyKeyDown": [Function],
+          "onBackButtonKeyDown": [Function],
+          "onDeletePropertyKeyDown": [Function],
+          "onEditPropertyKeyDown": [Function],
+          "onKeyUp": [Function],
+          "removeAttribute": [Function],
+          "removeButtonLabel": "Remove",
+          "scrollId": [Function],
+          "submitButtonText": [Function],
+          "title": [Function],
+          "visible": [Function],
+        },
+        EditTableEntityPane {
+          "addButtonLabel": "Add Property",
+          "attributeNameLabel": "Property Name",
+          "attributeValueLabel": "Value",
+          "canAdd": [Function],
+          "canApply": [Function],
+          "container": [Circular],
+          "dataTypeLabel": "Type",
+          "displayedAttributes": [Function],
+          "editAttribute": [Function],
+          "editButtonLabel": "Edit",
+          "editingProperty": [Function],
+          "edmTypes": [Function],
+          "finishEditingAttribute": [Function],
+          "firstFieldHasFocus": [Function],
+          "formErrors": [Function],
+          "formErrorsDetails": [Function],
+          "id": "edittableentitypane",
+          "insertAttribute": [Function],
+          "isEditing": [Function],
+          "isExecuting": [Function],
+          "isTemplateReady": [Function],
+          "onAddPropertyKeyDown": [Function],
+          "onBackButtonKeyDown": [Function],
+          "onDeletePropertyKeyDown": [Function],
+          "onEditPropertyKeyDown": [Function],
+          "onKeyUp": [Function],
+          "removeAttribute": [Function],
+          "removeButtonLabel": "Remove",
+          "scrollId": [Function],
+          "submitButtonText": [Function],
+          "title": [Function],
+          "visible": [Function],
+        },
+        NewVertexPane {
+          "buildString": [Function],
+          "container": [Circular],
+          "firstFieldHasFocus": [Function],
+          "formErrors": [Function],
+          "formErrorsDetails": [Function],
+          "id": "newvertexpane",
+          "isExecuting": [Function],
+          "isTemplateReady": [Function],
+          "onMoreDetailsKeyPress": [Function],
+          "onSubmitCreateCallback": null,
+          "partitionKeyProperty": [Function],
+          "tempVertexData": [Function],
+          "title": [Function],
+          "visible": [Function],
+        },
+        CassandraAddCollectionPane {
+          "autoPilotUsageCost": [Function],
+          "canConfigureThroughput": [Function],
+          "canExceedMaximumValue": [Function],
+          "canRequestSupport": [Function],
+          "container": [Circular],
+          "costsVisible": [Function],
+          "createTableQuery": [Function],
+          "dedicateTableThroughput": [Function],
+          "firstFieldHasFocus": [Function],
+          "formErrors": [Function],
+          "formErrorsDetails": [Function],
+          "id": "cassandraaddcollectionpane",
+          "isAutoPilotSelected": [Function],
+          "isExecuting": [Function],
+          "isFreeTierAccount": [Function],
+          "isSharedAutoPilotSelected": [Function],
+          "isTemplateReady": [Function],
+          "keyspaceCreateNew": [Function],
+          "keyspaceHasSharedOffer": [Function],
+          "keyspaceId": [Function],
+          "keyspaceIds": [Function],
+          "keyspaceOffers": HashMap {
+            "container": Object {},
+          },
+          "keyspaceThroughput": [Function],
+          "maxThroughputRU": [Function],
+          "minThroughputRU": [Function],
+          "requestUnitsUsageCostDedicated": [Function],
+          "requestUnitsUsageCostShared": [Function],
+          "ruToolTipText": [Function],
+          "selectedAutoPilotThroughput": [Function],
+          "sharedAutoPilotThroughput": [Function],
+          "sharedThroughputRangeText": [Function],
+          "sharedThroughputSpendAck": [Function],
+          "sharedThroughputSpendAckText": [Function],
+          "sharedThroughputSpendAckVisible": [Function],
+          "tableId": [Function],
+          "throughput": [Function],
+          "throughputRangeText": [Function],
+          "throughputSpendAck": [Function],
+          "throughputSpendAckText": [Function],
+          "throughputSpendAckVisible": [Function],
+          "title": [Function],
+          "userTableQuery": [Function],
+          "visible": [Function],
+        },
+        StringInputPane {
+          "container": [Circular],
+          "firstFieldHasFocus": [Function],
+          "formErrors": [Function],
+          "formErrorsDetails": [Function],
+          "id": "stringinputpane",
+          "inputLabel": [Function],
+          "isExecuting": [Function],
+          "isTemplateReady": [Function],
+          "stringInput": [Function],
+          "submitButtonLabel": [Function],
+          "title": [Function],
+          "visible": [Function],
+        },
+        SetupNotebooksPane {
+          "container": [Circular],
+          "description": [Function],
+          "firstFieldHasFocus": [Function],
+          "formErrors": [Function],
+          "formErrorsDetails": [Function],
+          "id": "setupnotebookspane",
+          "isExecuting": [Function],
+          "isTemplateReady": [Function],
+          "onCompleteSetupClick": [Function],
+          "onCompleteSetupKeyPress": [Function],
+          "title": [Function],
+          "visible": [Function],
+        },
+      ],
+      "_refreshSparkEnabledStateForAccount": [Function],
+      "_resetNotebookWorkspace": [Function],
+      "addCollectionPane": AddCollectionPane {
+        "_isSynapseLinkEnabled": [Function],
+        "autoPilotThroughput": [Function],
+        "autoPilotUsageCost": [Function],
+        "canConfigureThroughput": [Function],
+        "canExceedMaximumValue": [Function],
+        "canRequestSupport": [Function],
+        "collectionId": [Function],
+        "collectionIdTitle": [Function],
+        "collectionWithThroughputInShared": [Function],
+        "collectionWithThroughputInSharedTitle": [Function],
+        "container": [Circular],
+        "costsVisible": [Function],
+        "databaseCreateNew": [Function],
+        "databaseCreateNewShared": [Function],
+        "databaseHasSharedOffer": [Function],
+        "databaseId": [Function],
+        "databaseIds": [Function],
+        "dedicatedRequestUnitsUsageCost": [Function],
+        "displayCollectionThroughput": [Function],
+        "firstFieldHasFocus": [Function],
+        "formErrors": [Function],
+        "formErrorsDetails": [Function],
+        "formWarnings": [Function],
+        "freeTierExceedThroughputTooltip": [Function],
+        "id": "addcollectionpane",
+        "isAnalyticalStorageOn": [Function],
+        "isAutoPilotSelected": [Function],
+        "isExecuting": [Function],
+        "isFixedStorageSelected": [Function],
+        "isFreeTierAccount": [Function],
+        "isNonTableApi": [Function],
+        "isPreferredApiTable": [Function],
+        "isSharedAutoPilotSelected": [Function],
+        "isSynapseLinkSupported": [Function],
+        "isSynapseLinkUpdating": [Function],
+        "isTemplateReady": [Function],
+        "isTryCosmosDBSubscription": [Function],
+        "isUnlimitedStorageSelected": [Function],
+        "largePartitionKey": [Function],
+        "lowerCasePartitionKeyName": [Function],
+        "maxCollectionsReached": [Function],
+        "maxCollectionsReachedMessage": [Function],
+        "maxThroughputRU": [Function],
+        "minThroughputRU": [Function],
+        "onMoreDetailsKeyPress": [Function],
+        "partitionKey": [Function],
+        "partitionKeyName": [Function],
+        "partitionKeyPattern": [Function],
+        "partitionKeyPlaceholder": [Function],
+        "partitionKeyTitle": [Function],
+        "partitionKeyVisible": [Function],
+        "requestUnitsUsageCost": [Function],
+        "ruToolTipText": [Function],
+        "sharedAutoPilotThroughput": [Function],
+        "sharedThroughputRangeText": [Function],
+        "shouldCreateMongoWildcardIndex": [Function],
+        "shouldUseDatabaseThroughput": [Function],
+        "showAnalyticalStore": [Function],
+        "showEnableSynapseLink": [Function],
+        "showIndexingOptionsForSharedThroughput": [Function],
+        "showUpsellMessage": [Function],
+        "storage": [Function],
+        "throughputDatabase": [Function],
+        "throughputMultiPartition": [Function],
+        "throughputRangeText": [Function],
+        "throughputSinglePartition": [Function],
+        "throughputSpendAck": [Function],
+        "throughputSpendAckText": [Function],
+        "throughputSpendAckVisible": [Function],
+        "title": [Function],
+        "ttl90DaysEnabled": [Function],
+        "uniqueKeys": [Function],
+        "uniqueKeysPlaceholder": [Function],
+        "uniqueKeysVisible": [Function],
+        "upsellAnchorText": [Function],
+        "upsellAnchorUrl": [Function],
+        "upsellMessage": [Function],
+        "upsellMessageAriaLabel": [Function],
+        "useIndexingForSharedThroughput": [Function],
+        "visible": [Function],
+      },
+      "addCollectionText": [Function],
+      "addDatabasePane": AddDatabasePane {
+        "autoPilotUsageCost": [Function],
+        "canConfigureThroughput": [Function],
+        "canExceedMaximumValue": [Function],
+        "canRequestSupport": [Function],
+        "container": [Circular],
+        "costsVisible": [Function],
+        "databaseCreateNewShared": [Function],
+        "databaseId": [Function],
+        "databaseIdLabel": [Function],
+        "databaseIdPlaceHolder": [Function],
+        "databaseIdTooltipText": [Function],
+        "databaseLevelThroughputTooltipText": [Function],
+        "firstFieldHasFocus": [Function],
+        "formErrors": [Function],
+        "formErrorsDetails": [Function],
+        "freeTierExceedThroughputTooltip": [Function],
+        "id": "adddatabasepane",
+        "isAutoPilotSelected": [Function],
+        "isExecuting": [Function],
+        "isFreeTierAccount": [Function],
+        "isTemplateReady": [Function],
+        "maxAutoPilotThroughputSet": [Function],
+        "maxThroughputRU": [Function],
+        "maxThroughputRUText": [Function],
+        "minThroughputRU": [Function],
+        "onMoreDetailsKeyPress": [Function],
+        "requestUnitsUsageCost": [Function],
+        "ruToolTipText": [Function],
+        "showUpsellMessage": [Function],
+        "throughput": [Function],
+        "throughputRangeText": [Function],
+        "throughputSpendAck": [Function],
+        "throughputSpendAckText": [Function],
+        "throughputSpendAckVisible": [Function],
+        "title": [Function],
+        "upsellAnchorText": [Function],
+        "upsellAnchorUrl": [Function],
+        "upsellMessage": [Function],
+        "upsellMessageAriaLabel": [Function],
+        "visible": [Function],
+      },
+      "addDatabaseText": [Function],
+      "addTableEntityPane": AddTableEntityPane {
+        "addButtonLabel": "Add Property",
+        "attributeNameLabel": "Property Name",
+        "attributeValueLabel": "Value",
+        "canAdd": [Function],
+        "canApply": [Function],
+        "container": [Circular],
+        "dataTypeLabel": "Type",
+        "displayedAttributes": [Function],
+        "editAttribute": [Function],
+        "editButtonLabel": "Edit",
+        "editingProperty": [Function],
+        "edmTypes": [Function],
+        "enterRequiredValueLabel": "Enter identifier value.",
+        "enterValueLabel": "Enter value to keep property.",
+        "finishEditingAttribute": [Function],
+        "firstFieldHasFocus": [Function],
+        "formErrors": [Function],
+        "formErrorsDetails": [Function],
+        "id": "addtableentitypane",
+        "insertAttribute": [Function],
+        "isEditing": [Function],
+        "isExecuting": [Function],
+        "isTemplateReady": [Function],
+        "onAddPropertyKeyDown": [Function],
+        "onBackButtonKeyDown": [Function],
+        "onDeletePropertyKeyDown": [Function],
+        "onEditPropertyKeyDown": [Function],
+        "onKeyUp": [Function],
+        "removeAttribute": [Function],
+        "removeButtonLabel": "Remove",
+        "scrollId": [Function],
+        "submitButtonText": [Function],
+        "title": [Function],
+        "visible": [Function],
+      },
+      "arcadiaToken": [Function],
+      "canExceedMaximumValue": [Function],
+      "canSaveQueries": [Function],
+      "cassandraAddCollectionPane": CassandraAddCollectionPane {
+        "autoPilotUsageCost": [Function],
+        "canConfigureThroughput": [Function],
+        "canExceedMaximumValue": [Function],
+        "canRequestSupport": [Function],
+        "container": [Circular],
+        "costsVisible": [Function],
+        "createTableQuery": [Function],
+        "dedicateTableThroughput": [Function],
+        "firstFieldHasFocus": [Function],
+        "formErrors": [Function],
+        "formErrorsDetails": [Function],
+        "id": "cassandraaddcollectionpane",
+        "isAutoPilotSelected": [Function],
+        "isExecuting": [Function],
+        "isFreeTierAccount": [Function],
+        "isSharedAutoPilotSelected": [Function],
+        "isTemplateReady": [Function],
+        "keyspaceCreateNew": [Function],
+        "keyspaceHasSharedOffer": [Function],
+        "keyspaceId": [Function],
+        "keyspaceIds": [Function],
+        "keyspaceOffers": HashMap {
+          "container": Object {},
+        },
+        "keyspaceThroughput": [Function],
+        "maxThroughputRU": [Function],
+        "minThroughputRU": [Function],
+        "requestUnitsUsageCostDedicated": [Function],
+        "requestUnitsUsageCostShared": [Function],
+        "ruToolTipText": [Function],
+        "selectedAutoPilotThroughput": [Function],
+        "sharedAutoPilotThroughput": [Function],
+        "sharedThroughputRangeText": [Function],
+        "sharedThroughputSpendAck": [Function],
+        "sharedThroughputSpendAckText": [Function],
+        "sharedThroughputSpendAckVisible": [Function],
+        "tableId": [Function],
+        "throughput": [Function],
+        "throughputRangeText": [Function],
+        "throughputSpendAck": [Function],
+        "throughputSpendAckText": [Function],
+        "throughputSpendAckVisible": [Function],
+        "title": [Function],
+        "userTableQuery": [Function],
+        "visible": [Function],
+      },
+      "clickHostedAccountSwitch": [Function],
+      "clickHostedDirectorySwitch": [Function],
+      "closeDialog": undefined,
+      "closeSidePanel": undefined,
+      "collapsedResourceTreeWidth": 36,
+      "collectionCreationDefaults": Object {
+        "storage": "100",
+        "throughput": Object {
+          "fixed": 400,
+          "shared": 400,
+          "unlimited": 400,
+          "unlimitedmax": 1000000,
+          "unlimitedmin": 400,
+        },
+      },
+      "collectionTitle": [Function],
+      "collectionTreeNodeAltText": [Function],
+      "commandBarComponentAdapter": CommandBarComponentAdapter {
+        "container": [Circular],
+        "isNotebookTabActive": [Function],
+        "parameters": [Function],
+        "tabsButtons": Array [],
+      },
+      "databaseAccount": [Function],
+      "databases": [Function],
+      "defaultExperience": [Function],
+      "deleteCollectionText": [Function],
+      "deleteDatabaseText": [Function],
+      "editTableEntityPane": EditTableEntityPane {
+        "addButtonLabel": "Add Property",
+        "attributeNameLabel": "Property Name",
+        "attributeValueLabel": "Value",
+        "canAdd": [Function],
+        "canApply": [Function],
+        "container": [Circular],
+        "dataTypeLabel": "Type",
+        "displayedAttributes": [Function],
+        "editAttribute": [Function],
+        "editButtonLabel": "Edit",
+        "editingProperty": [Function],
+        "edmTypes": [Function],
+        "finishEditingAttribute": [Function],
+        "firstFieldHasFocus": [Function],
+        "formErrors": [Function],
+        "formErrorsDetails": [Function],
+        "id": "edittableentitypane",
+        "insertAttribute": [Function],
+        "isEditing": [Function],
+        "isExecuting": [Function],
+        "isTemplateReady": [Function],
+        "onAddPropertyKeyDown": [Function],
+        "onBackButtonKeyDown": [Function],
+        "onDeletePropertyKeyDown": [Function],
+        "onEditPropertyKeyDown": [Function],
+        "onKeyUp": [Function],
+        "removeAttribute": [Function],
+        "removeButtonLabel": "Remove",
+        "scrollId": [Function],
+        "submitButtonText": [Function],
+        "title": [Function],
+        "visible": [Function],
+      },
+      "graphStylingPane": GraphStylingPane {
+        "container": [Circular],
+        "firstFieldHasFocus": [Function],
+        "formErrors": [Function],
+        "formErrorsDetails": [Function],
+        "graphConfigUIData": Object {
+          "nodeCaptionChoice": [Function],
+          "nodeColorKeyChoice": [Function],
+          "nodeIconChoice": [Function],
+          "nodeIconSet": [Function],
+          "nodeProperties": [Function],
+          "nodePropertiesWithNone": [Function],
+          "showNeighborType": [Function],
+        },
+        "id": "graphstylingpane",
+        "isExecuting": [Function],
+        "isTemplateReady": [Function],
+        "title": [Function],
+        "visible": [Function],
+      },
+      "hasStorageAnalyticsAfecFeature": [Function],
+      "isAccountReady": [Function],
+      "isAutoscaleDefaultEnabled": [Function],
+      "isCopyNotebookPaneEnabled": [Function],
+      "isEnableMongoCapabilityPresent": [Function],
+      "isFixedCollectionWithSharedThroughputSupported": [Function],
+      "isGitHubPaneEnabled": [Function],
+      "isHostedDataExplorerEnabled": [Function],
+      "isLeftPaneExpanded": [Function],
+      "isMongoIndexingEnabled": [Function],
+      "isNotebookEnabled": [Function],
+      "isNotebooksEnabledForAccount": [Function],
+      "isPreferredApiCassandra": [Function],
+      "isPreferredApiGraph": [Function],
+      "isPreferredApiMongoDB": [Function],
+      "isPreferredApiTable": [Function],
+      "isPublishNotebookPaneEnabled": [Function],
+      "isResourceTokenCollectionNodeSelected": [Function],
+      "isRightPanelV2Enabled": [Function],
+      "isSchemaEnabled": [Function],
+      "isServerlessEnabled": [Function],
+      "isSparkEnabled": [Function],
+      "isSparkEnabledForAccount": [Function],
+      "isSynapseLinkUpdating": [Function],
+      "isTabsContentExpanded": [Function],
+      "memoryUsageInfo": [Function],
+      "newVertexPane": NewVertexPane {
+        "buildString": [Function],
+        "container": [Circular],
+        "firstFieldHasFocus": [Function],
+        "formErrors": [Function],
+        "formErrorsDetails": [Function],
+        "id": "newvertexpane",
+        "isExecuting": [Function],
+        "isTemplateReady": [Function],
+        "onMoreDetailsKeyPress": [Function],
+        "onSubmitCreateCallback": null,
+        "partitionKeyProperty": [Function],
+        "tempVertexData": [Function],
+        "title": [Function],
+        "visible": [Function],
+      },
+      "notebookBasePath": [Function],
+      "notebookServerInfo": [Function],
+      "onRefreshDatabasesKeyPress": [Function],
+      "onRefreshResourcesClick": [Function],
+      "onSwitchToConnectionString": [Function],
+      "openDialog": undefined,
+      "openSidePanel": undefined,
+      "provideFeedbackEmail": [Function],
+      "queriesClient": QueriesClient {
+        "container": [Circular],
+      },
+      "refreshDatabaseAccount": [Function],
+      "refreshNotebookList": [Function],
+      "refreshTreeTitle": [Function],
+      "resourceTokenCollection": [Function],
+      "resourceTokenCollectionId": [Function],
+      "resourceTokenDatabaseId": [Function],
+      "resourceTokenPartitionKey": [Function],
+      "resourceTree": ResourceTreeAdapter {
+        "container": [Circular],
+        "copyNotebook": [Function],
+        "databaseCollectionIdMap": ArrayHashMap {
+          "store": HashMap {
+            "container": Object {},
+          },
+        },
+        "koSubsCollectionIdMap": ArrayHashMap {
+          "store": HashMap {
+            "container": Object {},
+          },
+        },
+        "koSubsDatabaseIdMap": ArrayHashMap {
+          "store": HashMap {
+            "container": Object {},
+          },
+        },
+        "parameters": [Function],
+      },
+      "resourceTreeForResourceToken": ResourceTreeAdapterForResourceToken {
+        "container": [Circular],
+        "parameters": [Function],
+      },
+      "selectedDatabaseId": [Function],
+      "selectedNode": [Function],
+      "setInProgressConsoleDataIdToBeDeleted": undefined,
+      "setIsNotificationConsoleExpanded": undefined,
+      "setNotificationConsoleData": undefined,
+      "setupNotebooksPane": SetupNotebooksPane {
+        "container": [Circular],
+        "description": [Function],
+        "firstFieldHasFocus": [Function],
+        "formErrors": [Function],
+        "formErrorsDetails": [Function],
+        "id": "setupnotebookspane",
+        "isExecuting": [Function],
+        "isTemplateReady": [Function],
+        "onCompleteSetupClick": [Function],
+        "onCompleteSetupKeyPress": [Function],
+        "title": [Function],
+        "visible": [Function],
+      },
+      "signInAad": [Function],
+      "sparkClusterConnectionInfo": [Function],
+      "splitter": Splitter {
+        "bounds": Object {
+          "max": 400,
+          "min": 240,
+        },
+        "direction": "vertical",
+        "isCollapsed": [Function],
+        "leftSideId": "resourcetree",
+        "onResizeStart": [Function],
+        "onResizeStop": [Function],
+        "splitterId": "h_splitter1",
+      },
+      "stringInputPane": StringInputPane {
+        "container": [Circular],
+        "firstFieldHasFocus": [Function],
+        "formErrors": [Function],
+        "formErrorsDetails": [Function],
+        "id": "stringinputpane",
+        "inputLabel": [Function],
+        "isExecuting": [Function],
+        "isTemplateReady": [Function],
+        "stringInput": [Function],
+        "submitButtonLabel": [Function],
+        "title": [Function],
+        "visible": [Function],
+      },
+      "tabsManager": TabsManager {
+        "activeTab": [Function],
+        "openedTabs": [Function],
+      },
+      "toggleLeftPaneExpandedKeyPress": [Function],
+    }
+  }
+  formError=""
+  formErrorDetail=""
+  id="loadQueryPane"
+  isExecuting={false}
+  onClose={[MockFunction]}
+  onSubmit={[MockFunction]}
+  submitButtonText="Load"
+  title="Load Query Pane"
+>
+  <div
+    onKeyDown={[Function]}
+    tabIndex={-1}
+  >
+    <div
+      className="contextual-pane-out"
+      onClick={[MockFunction]}
+    />
+    <div
+      className="contextual-pane"
+      id="loadQueryPane"
+      onKeyDown={[Function]}
+      style={
+        Object {
+          "height": NaN,
+        }
+      }
+    >
+      <div
+        className="panelContentWrapper"
+      >
+        <div
+          className="firstdivbg headerline"
+        >
+          <span
+            aria-level={2}
+            id="databaseTitle"
+            role="heading"
+          >
+            Load Query Pane
+          </span>
+          <CustomizedIconButton
+            ariaLabel="Close pane"
+            className="closePaneBtn"
+            data-testid="closePaneBtn"
+            iconProps={
+              Object {
+                "iconName": "Cancel",
+              }
+            }
+            onClick={[MockFunction]}
+            tabIndex={0}
+            title="Close pane"
+          >
+            <IconButton
+              ariaLabel="Close pane"
+              className="closePaneBtn"
+              data-testid="closePaneBtn"
+              iconProps={
+                Object {
+                  "iconName": "Cancel",
+                }
+              }
+              onClick={[MockFunction]}
+              tabIndex={0}
+              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,
+                    },
+                    "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,
+                    },
+                  },
+                  "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",
+                  },
+                }
+              }
+              title="Close pane"
+            >
+              <BaseButton
+                ariaLabel="Close pane"
+                baseClassName="ms-Button"
+                className="closePaneBtn"
+                data-testid="closePaneBtn"
+                iconProps={
+                  Object {
+                    "iconName": "Cancel",
+                  }
+                }
+                onClick={[MockFunction]}
+                onRenderDescription={[Function]}
+                onRenderText={[Function]}
+                split={false}
+                styles={
+                  Object {
+                    "description": Object {
+                      "display": "block",
+                    },
+                    "flexContainer": Object {
+                      "alignItems": "center",
+                      "display": "flex",
+                      "flexWrap": "nowrap",
+                      "height": "100%",
+                      "justifyContent": "center",
+                    },
+                    "icon": Object {
+                      "flexShrink": 0,
+                      "fontSize": "16px",
+                      "height": "16px",
+                      "lineHeight": "16px",
+                      "margin": "0 4px",
+                      "textAlign": "center",
+                    },
+                    "iconDisabled": Object {
+                      "color": "#a19f9d",
+                      "selectors": Object {
+                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                          "color": "GrayText",
+                        },
+                      },
+                    },
+                    "label": Object {
+                      "display": "block",
+                      "lineHeight": "100%",
+                      "margin": "0 4px",
+                    },
+                    "menuIcon": Object {
+                      "flexShrink": 0,
+                      "fontSize": "12px",
+                      "height": "16px",
+                      "lineHeight": "16px",
+                      "margin": "0 4px",
+                      "textAlign": "center",
+                    },
+                    "menuIconDisabled": Object {
+                      "color": "#a19f9d",
+                      "selectors": Object {
+                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                          "color": "GrayText",
+                        },
+                      },
+                    },
+                    "root": Array [
+                      Object {
+                        "outline": "transparent",
+                        "position": "relative",
+                        "selectors": Object {
+                          ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                            "border": "1px solid transparent",
+                            "bottom": 2,
+                            "content": "\\"\\"",
+                            "left": 2,
+                            "outline": "1px solid #605e5c",
+                            "position": "absolute",
+                            "right": 2,
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "bottom": -2,
+                                "left": -2,
+                                "outlineColor": "ButtonText",
+                                "right": -2,
+                                "top": -2,
+                              },
+                            },
+                            "top": 2,
+                            "zIndex": 1,
+                          },
+                          "::-moz-focus-inner": Object {
+                            "border": "0",
+                          },
+                        },
+                      },
+                      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,
+                      },
+                      Object {
+                        "border": "1px solid #8a8886",
+                        "borderRadius": "2px",
+                        "boxSizing": "border-box",
+                        "cursor": "pointer",
+                        "display": "inline-block",
+                        "padding": "0 16px",
+                        "selectors": Object {
+                          ":active > *": Object {
+                            "left": 0,
+                            "position": "relative",
+                            "top": 0,
+                          },
+                        },
+                        "textAlign": "center",
+                        "textDecoration": "none",
+                        "userSelect": "none",
+                      },
+                      Object {
+                        "backgroundColor": "transparent",
+                        "border": "none",
+                        "color": "#0078d4",
+                        "height": "32px",
+                        "padding": "0 4px",
+                        "width": "32px",
+                      },
+                    ],
+                    "rootChecked": Object {
+                      "backgroundColor": "#edebe9",
+                      "color": "#005a9e",
+                    },
+                    "rootCheckedHovered": Object {
+                      "backgroundColor": "#e1dfdd",
+                      "color": "#005a9e",
+                    },
+                    "rootDisabled": Array [
+                      Object {
+                        "outline": "transparent",
+                        "position": "relative",
+                        "selectors": Object {
+                          ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                            "border": "1px solid transparent",
+                            "bottom": 2,
+                            "content": "\\"\\"",
+                            "left": 2,
+                            "outline": "1px solid #605e5c",
+                            "position": "absolute",
+                            "right": 2,
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "bottom": -2,
+                                "left": -2,
+                                "outlineColor": "ButtonText",
+                                "right": -2,
+                                "top": -2,
+                              },
+                            },
+                            "top": 2,
+                            "zIndex": 1,
+                          },
+                          "::-moz-focus-inner": Object {
+                            "border": "0",
+                          },
+                        },
+                      },
+                      Object {
+                        "backgroundColor": "#f3f2f1",
+                        "borderColor": "#f3f2f1",
+                        "color": "#a19f9d",
+                        "cursor": "default",
+                        "pointerEvents": "none",
+                        "selectors": Object {
+                          ":focus": Object {
+                            "outline": 0,
+                          },
+                          ":hover": Object {
+                            "outline": 0,
+                          },
+                        },
+                      },
+                      Object {
+                        "color": "#c8c6c4",
+                      },
+                    ],
+                    "rootExpanded": Object {
+                      "backgroundColor": "#edebe9",
+                      "color": "#005a9e",
+                    },
+                    "rootHasMenu": Object {
+                      "width": "auto",
+                    },
+                    "rootHovered": Object {
+                      "backgroundColor": "#f3f2f1",
+                      "color": "#106ebe",
+                      "selectors": Object {
+                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                          "borderColor": "Highlight",
+                          "color": "Highlight",
+                        },
+                      },
+                    },
+                    "rootPressed": Object {
+                      "backgroundColor": "#edebe9",
+                      "color": "#005a9e",
+                    },
+                    "screenReaderText": Object {
+                      "border": 0,
+                      "height": 1,
+                      "margin": -1,
+                      "overflow": "hidden",
+                      "padding": 0,
+                      "position": "absolute",
+                      "width": 1,
+                    },
+                    "splitButtonContainer": Array [
+                      Object {
+                        "outline": "transparent",
+                        "position": "relative",
+                        "selectors": Object {
+                          ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                            "border": "1px solid #ffffff",
+                            "bottom": 3,
+                            "content": "\\"\\"",
+                            "left": 3,
+                            "outline": "1px solid #605e5c",
+                            "position": "absolute",
+                            "right": 3,
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "border": "none",
+                                "bottom": -2,
+                                "left": -2,
+                                "right": -2,
+                                "top": -2,
+                              },
+                            },
+                            "top": 3,
+                            "zIndex": 1,
+                          },
+                          "::-moz-focus-inner": Object {
+                            "border": "0",
+                          },
+                        },
+                      },
+                      Object {
+                        "display": "inline-flex",
+                        "selectors": Object {
+                          ".ms-Button--default": Object {
+                            "borderBottomRightRadius": "0",
+                            "borderRight": "none",
+                            "borderTopRightRadius": "0",
+                          },
+                          ".ms-Button--primary": Object {
+                            "border": "none",
+                            "borderBottomRightRadius": "0",
+                            "borderTopRightRadius": "0",
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "MsHighContrastAdjust": "none",
+                                "backgroundColor": "Window",
+                                "border": "1px solid WindowText",
+                                "borderRightWidth": "0",
+                                "color": "WindowText",
+                                "forcedColorAdjust": "none",
+                              },
+                            },
+                          },
+                          ".ms-Button--primary + .ms-Button": Object {
+                            "border": "none",
+                            "selectors": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                "border": "1px solid WindowText",
+                                "borderLeftWidth": "0",
+                              },
+                            },
+                          },
+                        },
+                      },
+                    ],
+                    "splitButtonContainerChecked": Object {
+                      "selectors": Object {
+                        ".ms-Button--primary": Object {
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "MsHighContrastAdjust": "none",
+                              "backgroundColor": "WindowText",
+                              "color": "Window",
+                              "forcedColorAdjust": "none",
+                            },
+                          },
+                        },
+                      },
+                    },
+                    "splitButtonContainerCheckedHovered": Object {
+                      "selectors": Object {
+                        ".ms-Button--primary": Object {
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "MsHighContrastAdjust": "none",
+                              "backgroundColor": "WindowText",
+                              "color": "Window",
+                              "forcedColorAdjust": "none",
+                            },
+                          },
+                        },
+                      },
+                    },
+                    "splitButtonContainerDisabled": Object {
+                      "border": "none",
+                      "outline": "none",
+                      "selectors": Object {
+                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                          "MsHighContrastAdjust": "none",
+                          "backgroundColor": "Window",
+                          "borderColor": "GrayText",
+                          "color": "GrayText",
+                          "forcedColorAdjust": "none",
+                        },
+                      },
+                    },
+                    "splitButtonContainerFocused": Object {
+                      "outline": "none!important",
+                    },
+                    "splitButtonContainerHovered": Object {
+                      "selectors": Object {
+                        ".ms-Button--primary": Object {
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "backgroundColor": "Highlight",
+                              "color": "Window",
+                            },
+                          },
+                        },
+                        ".ms-Button.is-disabled": Object {
+                          "color": "#a19f9d",
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "backgroundColor": "Window",
+                              "borderColor": "GrayText",
+                              "color": "GrayText",
+                            },
+                          },
+                        },
+                      },
+                    },
+                    "splitButtonDivider": Object {
+                      "bottom": 8,
+                      "position": "absolute",
+                      "right": 31,
+                      "selectors": Object {
+                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                          "backgroundColor": "WindowText",
+                        },
+                      },
+                      "top": 8,
+                      "width": 1,
+                    },
+                    "splitButtonDividerDisabled": Object {
+                      "bottom": 8,
+                      "position": "absolute",
+                      "right": 31,
+                      "selectors": Object {
+                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                          "backgroundColor": "GrayText",
+                        },
+                      },
+                      "top": 8,
+                      "width": 1,
+                    },
+                    "splitButtonFlexContainer": Object {
+                      "alignItems": "center",
+                      "display": "flex",
+                      "flexWrap": "nowrap",
+                      "height": "100%",
+                      "justifyContent": "center",
+                    },
+                    "splitButtonMenuButton": Object {
+                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                        ".ms-Button-menuIcon": Object {
+                          "color": "WindowText",
+                        },
+                      },
+                      "border": "1px solid #8a8886",
+                      "borderBottomRightRadius": "2px",
+                      "borderLeft": "none",
+                      "borderRadius": 0,
+                      "borderTopRightRadius": "2px",
+                      "boxSizing": "border-box",
+                      "cursor": "pointer",
+                      "display": "inline-block",
+                      "height": "auto",
+                      "marginBottom": 0,
+                      "marginLeft": -1,
+                      "marginRight": 0,
+                      "marginTop": 0,
+                      "outline": "transparent",
+                      "padding": 6,
+                      "textAlign": "center",
+                      "textDecoration": "none",
+                      "userSelect": "none",
+                      "verticalAlign": "top",
+                      "width": 32,
+                    },
+                    "splitButtonMenuButtonDisabled": Object {
+                      "border": "none",
+                      "pointerEvents": "none",
+                      "selectors": Object {
+                        ".ms-Button--primary": Object {
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "backgroundColor": "Window",
+                              "borderColor": "GrayText",
+                              "color": "GrayText",
+                            },
+                          },
+                        },
+                        ".ms-Button-menuIcon": Object {
+                          "selectors": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                              "color": "GrayText",
+                            },
+                          },
+                        },
+                        ":hover": Object {
+                          "cursor": "default",
+                        },
+                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                          "backgroundColor": "Window",
+                          "border": "1px solid GrayText",
+                          "color": "GrayText",
+                        },
+                      },
+                    },
+                    "textContainer": Object {
+                      "display": "block",
+                      "flexGrow": 1,
+                    },
+                  }
+                }
+                tabIndex={0}
+                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,
+                      },
+                      "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,
+                      },
+                    },
+                    "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",
+                    },
+                  }
+                }
+                title="Close pane"
+                variantClassName="ms-Button--icon"
+              >
+                <button
+                  aria-label="Close pane"
+                  className="ms-Button ms-Button--icon closePaneBtn root-104"
+                  data-is-focusable={true}
+                  data-testid="closePaneBtn"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  onKeyPress={[Function]}
+                  onKeyUp={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseUp={[Function]}
+                  tabIndex={0}
+                  title="Close pane"
+                  type="button"
+                >
+                  <span
+                    className="ms-Button-flexContainer flexContainer-105"
+                    data-automationid="splitbuttonprimary"
+                  >
+                    <Component
+                      className="ms-Button-icon icon-107"
+                      iconName="Cancel"
+                    >
+                      <i
+                        aria-hidden={true}
+                        className="ms-Icon root-37 css-112 ms-Button-icon icon-107"
+                        data-icon-name="Cancel"
+                        role="presentation"
+                        style={
+                          Object {
+                            "fontFamily": "\\"FabricMDL2Icons\\"",
+                          }
+                        }
+                      >
+                        
+                      </i>
+                    </Component>
+                  </span>
+                </button>
+                <Component />
+              </BaseButton>
+            </IconButton>
+          </CustomizedIconButton>
+        </div>
+        <PanelInfoErrorComponent
+          formError={false}
+          message=""
+          messageType="error"
+          openNotificationConsole={[Function]}
+          showErrorDetails={false}
+        />
+        <form
+          className="panelFormWrapper"
+          onSubmit={[Function]}
+        >
+          <PanelFooterComponent
+            buttonLabel="Load"
+          >
+            <div
+              className="panelFooter"
+            >
+              <CustomizedPrimaryButton
+                ariaLabel="Load"
+                data-testid="submit"
+                id="sidePanelOkButton"
+                text="Load"
+                type="submit"
+              >
+                <PrimaryButton
+                  ariaLabel="Load"
+                  data-testid="submit"
+                  id="sidePanelOkButton"
+                  text="Load"
+                  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,
+                        },
+                        "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,
+                        },
+                      },
+                      "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",
+                      },
+                    }
+                  }
+                  type="submit"
+                >
+                  <CustomizedDefaultButton
+                    ariaLabel="Load"
+                    data-testid="submit"
+                    id="sidePanelOkButton"
+                    onRenderDescription={[Function]}
+                    primary={true}
+                    text="Load"
+                    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,
+                          },
+                          "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,
+                          },
+                        },
+                        "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",
+                        },
+                      }
+                    }
+                    type="submit"
+                  >
+                    <DefaultButton
+                      ariaLabel="Load"
+                      data-testid="submit"
+                      id="sidePanelOkButton"
+                      onRenderDescription={[Function]}
+                      primary={true}
+                      text="Load"
+                      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,
+                            },
+                            "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,
+                            },
+                          },
+                          "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",
+                          },
+                        }
+                      }
+                      type="submit"
+                    >
+                      <BaseButton
+                        ariaLabel="Load"
+                        baseClassName="ms-Button"
+                        data-testid="submit"
+                        id="sidePanelOkButton"
+                        onRenderDescription={[Function]}
+                        primary={true}
+                        split={false}
+                        styles={
+                          Object {
+                            "description": Object {
+                              "display": "block",
+                            },
+                            "flexContainer": Object {
+                              "alignItems": "center",
+                              "display": "flex",
+                              "flexWrap": "nowrap",
+                              "height": "100%",
+                              "justifyContent": "center",
+                            },
+                            "icon": Object {
+                              "flexShrink": 0,
+                              "fontSize": "16px",
+                              "height": "16px",
+                              "lineHeight": "16px",
+                              "margin": "0 4px",
+                              "textAlign": "center",
+                            },
+                            "iconDisabled": Object {
+                              "color": "#a19f9d",
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "color": "GrayText",
+                                },
+                              },
+                            },
+                            "label": Array [
+                              Object {
+                                "display": "block",
+                                "lineHeight": "100%",
+                                "margin": "0 4px",
+                              },
+                              Object {
+                                "fontWeight": 600,
+                              },
+                            ],
+                            "menuIcon": Object {
+                              "flexShrink": 0,
+                              "fontSize": "12px",
+                              "height": "16px",
+                              "lineHeight": "16px",
+                              "margin": "0 4px",
+                              "textAlign": "center",
+                            },
+                            "menuIconDisabled": Object {
+                              "color": "#a19f9d",
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "color": "GrayText",
+                                },
+                              },
+                            },
+                            "root": Array [
+                              Object {
+                                "outline": "transparent",
+                                "position": "relative",
+                                "selectors": Object {
+                                  ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                                    "border": "1px solid transparent",
+                                    "bottom": 2,
+                                    "content": "\\"\\"",
+                                    "left": 2,
+                                    "outline": "1px solid #605e5c",
+                                    "position": "absolute",
+                                    "right": 2,
+                                    "selectors": Object {
+                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "bottom": -2,
+                                        "left": -2,
+                                        "outlineColor": "ButtonText",
+                                        "right": -2,
+                                        "top": -2,
+                                      },
+                                    },
+                                    "top": 2,
+                                    "zIndex": 1,
+                                  },
+                                  "::-moz-focus-inner": Object {
+                                    "border": "0",
+                                  },
+                                },
+                              },
+                              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,
+                              },
+                              Object {
+                                "border": "1px solid #8a8886",
+                                "borderRadius": "2px",
+                                "boxSizing": "border-box",
+                                "cursor": "pointer",
+                                "display": "inline-block",
+                                "padding": "0 16px",
+                                "selectors": Object {
+                                  ":active > *": Object {
+                                    "left": 0,
+                                    "position": "relative",
+                                    "top": 0,
+                                  },
+                                },
+                                "textAlign": "center",
+                                "textDecoration": "none",
+                                "userSelect": "none",
+                              },
+                              Object {
+                                "height": "32px",
+                                "minWidth": "80px",
+                              },
+                              Object {
+                                "backgroundColor": "#0078d4",
+                                "border": "1px solid #0078d4",
+                                "color": "#ffffff",
+                                "selectors": Object {
+                                  ".ms-Fabric--isFocusVisible &:focus": Object {
+                                    "selectors": Object {
+                                      ":after": Object {
+                                        "border": "none",
+                                        "outlineColor": "#ffffff",
+                                      },
+                                    },
+                                  },
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "MsHighContrastAdjust": "none",
+                                    "backgroundColor": "WindowText",
+                                    "borderColor": "WindowText",
+                                    "color": "Window",
+                                    "forcedColorAdjust": "none",
+                                  },
+                                },
+                              },
+                            ],
+                            "rootChecked": Object {
+                              "backgroundColor": "#005a9e",
+                              "color": "#ffffff",
+                            },
+                            "rootCheckedHovered": Object {
+                              "backgroundColor": "#005a9e",
+                              "color": "#ffffff",
+                            },
+                            "rootDisabled": Array [
+                              Object {
+                                "outline": "transparent",
+                                "position": "relative",
+                                "selectors": Object {
+                                  ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                                    "border": "1px solid transparent",
+                                    "bottom": 2,
+                                    "content": "\\"\\"",
+                                    "left": 2,
+                                    "outline": "1px solid #605e5c",
+                                    "position": "absolute",
+                                    "right": 2,
+                                    "selectors": Object {
+                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "bottom": -2,
+                                        "left": -2,
+                                        "outlineColor": "ButtonText",
+                                        "right": -2,
+                                        "top": -2,
+                                      },
+                                    },
+                                    "top": 2,
+                                    "zIndex": 1,
+                                  },
+                                  "::-moz-focus-inner": Object {
+                                    "border": "0",
+                                  },
+                                },
+                              },
+                              Object {
+                                "backgroundColor": "#f3f2f1",
+                                "borderColor": "#f3f2f1",
+                                "color": "#a19f9d",
+                                "cursor": "default",
+                                "pointerEvents": "none",
+                                "selectors": Object {
+                                  ":focus": Object {
+                                    "outline": 0,
+                                  },
+                                  ":hover": Object {
+                                    "outline": 0,
+                                  },
+                                },
+                              },
+                              Object {
+                                "backgroundColor": "#f3f2f1",
+                                "color": "#d2d0ce",
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "backgroundColor": "Window",
+                                    "borderColor": "GrayText",
+                                    "color": "GrayText",
+                                  },
+                                },
+                              },
+                            ],
+                            "rootExpanded": Object {
+                              "backgroundColor": "#005a9e",
+                              "color": "#ffffff",
+                            },
+                            "rootHovered": Object {
+                              "backgroundColor": "#106ebe",
+                              "border": "1px solid #106ebe",
+                              "color": "#ffffff",
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "backgroundColor": "Highlight",
+                                  "borderColor": "Highlight",
+                                  "color": "Window",
+                                },
+                              },
+                            },
+                            "rootPressed": Object {
+                              "backgroundColor": "#005a9e",
+                              "border": "1px solid #005a9e",
+                              "color": "#ffffff",
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "MsHighContrastAdjust": "none",
+                                  "backgroundColor": "WindowText",
+                                  "borderColor": "WindowText",
+                                  "color": "Window",
+                                  "forcedColorAdjust": "none",
+                                },
+                              },
+                            },
+                            "screenReaderText": Object {
+                              "border": 0,
+                              "height": 1,
+                              "margin": -1,
+                              "overflow": "hidden",
+                              "padding": 0,
+                              "position": "absolute",
+                              "width": 1,
+                            },
+                            "splitButtonContainer": Array [
+                              Object {
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "border": "none",
+                                  },
+                                },
+                              },
+                              Object {
+                                "outline": "transparent",
+                                "position": "relative",
+                                "selectors": Object {
+                                  ".ms-Fabric--isFocusVisible &:focus:after": Object {
+                                    "border": "1px solid #ffffff",
+                                    "bottom": 3,
+                                    "content": "\\"\\"",
+                                    "left": 3,
+                                    "outline": "1px solid #605e5c",
+                                    "position": "absolute",
+                                    "right": 3,
+                                    "selectors": Object {
+                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "border": "none",
+                                        "bottom": -2,
+                                        "left": -2,
+                                        "right": -2,
+                                        "top": -2,
+                                      },
+                                    },
+                                    "top": 3,
+                                    "zIndex": 1,
+                                  },
+                                  "::-moz-focus-inner": Object {
+                                    "border": "0",
+                                  },
+                                },
+                              },
+                              Object {
+                                "display": "inline-flex",
+                                "selectors": Object {
+                                  ".ms-Button--default": Object {
+                                    "borderBottomRightRadius": "0",
+                                    "borderRight": "none",
+                                    "borderTopRightRadius": "0",
+                                  },
+                                  ".ms-Button--primary": Object {
+                                    "border": "none",
+                                    "borderBottomRightRadius": "0",
+                                    "borderTopRightRadius": "0",
+                                    "selectors": Object {
+                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "MsHighContrastAdjust": "none",
+                                        "backgroundColor": "Window",
+                                        "border": "1px solid WindowText",
+                                        "borderRightWidth": "0",
+                                        "color": "WindowText",
+                                        "forcedColorAdjust": "none",
+                                      },
+                                    },
+                                  },
+                                  ".ms-Button--primary + .ms-Button": Object {
+                                    "border": "none",
+                                    "selectors": Object {
+                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "border": "1px solid WindowText",
+                                        "borderLeftWidth": "0",
+                                      },
+                                    },
+                                  },
+                                },
+                              },
+                            ],
+                            "splitButtonContainerChecked": Object {
+                              "selectors": Object {
+                                ".ms-Button--primary": Object {
+                                  "selectors": Object {
+                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                      "MsHighContrastAdjust": "none",
+                                      "backgroundColor": "WindowText",
+                                      "color": "Window",
+                                      "forcedColorAdjust": "none",
+                                    },
+                                  },
+                                },
+                              },
+                            },
+                            "splitButtonContainerCheckedHovered": Object {
+                              "selectors": Object {
+                                ".ms-Button--primary": Object {
+                                  "selectors": Object {
+                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                      "MsHighContrastAdjust": "none",
+                                      "backgroundColor": "WindowText",
+                                      "color": "Window",
+                                      "forcedColorAdjust": "none",
+                                    },
+                                  },
+                                },
+                              },
+                            },
+                            "splitButtonContainerDisabled": Object {
+                              "border": "none",
+                              "outline": "none",
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "MsHighContrastAdjust": "none",
+                                  "backgroundColor": "Window",
+                                  "borderColor": "GrayText",
+                                  "color": "GrayText",
+                                  "forcedColorAdjust": "none",
+                                },
+                              },
+                            },
+                            "splitButtonContainerFocused": Object {
+                              "outline": "none!important",
+                            },
+                            "splitButtonContainerHovered": Object {
+                              "selectors": Object {
+                                ".ms-Button--primary": Object {
+                                  "selectors": Object {
+                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                      "backgroundColor": "Highlight",
+                                      "color": "Window",
+                                    },
+                                  },
+                                },
+                                ".ms-Button.is-disabled": Object {
+                                  "color": "#a19f9d",
+                                  "selectors": Object {
+                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                      "backgroundColor": "Window",
+                                      "borderColor": "GrayText",
+                                      "color": "GrayText",
+                                    },
+                                  },
+                                },
+                              },
+                            },
+                            "splitButtonDivider": Array [
+                              Object {
+                                "backgroundColor": "#ffffff",
+                                "bottom": 8,
+                                "position": "absolute",
+                                "right": 31,
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "backgroundColor": "Window",
+                                  },
+                                },
+                                "top": 8,
+                                "width": 1,
+                              },
+                              Object {
+                                "bottom": 8,
+                                "position": "absolute",
+                                "right": 31,
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "backgroundColor": "WindowText",
+                                  },
+                                },
+                                "top": 8,
+                                "width": 1,
+                              },
+                            ],
+                            "splitButtonDividerDisabled": Object {
+                              "bottom": 8,
+                              "position": "absolute",
+                              "right": 31,
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "backgroundColor": "GrayText",
+                                },
+                              },
+                              "top": 8,
+                              "width": 1,
+                            },
+                            "splitButtonFlexContainer": Object {
+                              "alignItems": "center",
+                              "display": "flex",
+                              "flexWrap": "nowrap",
+                              "height": "100%",
+                              "justifyContent": "center",
+                            },
+                            "splitButtonMenuButton": Array [
+                              Object {
+                                "backgroundColor": "#0078d4",
+                                "color": "#ffffff",
+                                "selectors": Object {
+                                  ":hover": Object {
+                                    "backgroundColor": "#106ebe",
+                                    "selectors": Object {
+                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "color": "Highlight",
+                                      },
+                                    },
+                                  },
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "backgroundColor": "WindowText",
+                                  },
+                                },
+                              },
+                              Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  ".ms-Button-menuIcon": Object {
+                                    "color": "WindowText",
+                                  },
+                                },
+                                "border": "1px solid #8a8886",
+                                "borderBottomRightRadius": "2px",
+                                "borderLeft": "none",
+                                "borderRadius": 0,
+                                "borderTopRightRadius": "2px",
+                                "boxSizing": "border-box",
+                                "cursor": "pointer",
+                                "display": "inline-block",
+                                "height": "auto",
+                                "marginBottom": 0,
+                                "marginLeft": -1,
+                                "marginRight": 0,
+                                "marginTop": 0,
+                                "outline": "transparent",
+                                "padding": 6,
+                                "textAlign": "center",
+                                "textDecoration": "none",
+                                "userSelect": "none",
+                                "verticalAlign": "top",
+                                "width": 32,
+                              },
+                            ],
+                            "splitButtonMenuButtonChecked": Object {
+                              "backgroundColor": "#005a9e",
+                              "selectors": Object {
+                                ":hover": Object {
+                                  "backgroundColor": "#005a9e",
+                                },
+                              },
+                            },
+                            "splitButtonMenuButtonDisabled": Array [
+                              Object {
+                                "backgroundColor": "#f3f2f1",
+                                "selectors": Object {
+                                  ":hover": Object {
+                                    "backgroundColor": "#f3f2f1",
+                                  },
+                                },
+                              },
+                              Object {
+                                "border": "none",
+                                "pointerEvents": "none",
+                                "selectors": Object {
+                                  ".ms-Button--primary": Object {
+                                    "selectors": Object {
+                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "backgroundColor": "Window",
+                                        "borderColor": "GrayText",
+                                        "color": "GrayText",
+                                      },
+                                    },
+                                  },
+                                  ".ms-Button-menuIcon": Object {
+                                    "selectors": Object {
+                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "color": "GrayText",
+                                      },
+                                    },
+                                  },
+                                  ":hover": Object {
+                                    "cursor": "default",
+                                  },
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "backgroundColor": "Window",
+                                    "border": "1px solid GrayText",
+                                    "color": "GrayText",
+                                  },
+                                },
+                              },
+                            ],
+                            "splitButtonMenuButtonExpanded": Object {
+                              "backgroundColor": "#005a9e",
+                              "selectors": Object {
+                                ":hover": Object {
+                                  "backgroundColor": "#005a9e",
+                                },
+                              },
+                            },
+                            "splitButtonMenuIcon": Object {
+                              "color": "#ffffff",
+                            },
+                            "splitButtonMenuIconDisabled": Object {
+                              "color": "#a19f9d",
+                              "selectors": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "color": "GrayText",
+                                },
+                              },
+                            },
+                            "textContainer": Object {
+                              "display": "block",
+                              "flexGrow": 1,
+                            },
+                          }
+                        }
+                        text="Load"
+                        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,
+                              },
+                              "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,
+                              },
+                            },
+                            "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",
+                            },
+                          }
+                        }
+                        type="submit"
+                        variantClassName="ms-Button--primary"
+                      >
+                        <button
+                          aria-label="Load"
+                          className="ms-Button ms-Button--primary root-113"
+                          data-is-focusable={true}
+                          data-testid="submit"
+                          id="sidePanelOkButton"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyPress={[Function]}
+                          onKeyUp={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseUp={[Function]}
+                          type="submit"
+                        >
+                          <span
+                            className="ms-Button-flexContainer flexContainer-105"
+                            data-automationid="splitbuttonprimary"
+                          >
+                            <span
+                              className="ms-Button-textContainer textContainer-106"
+                            >
+                              <span
+                                className="ms-Button-label label-114"
+                                id="id__3"
+                                key="id__3"
+                              >
+                                Load
+                              </span>
+                            </span>
+                          </span>
+                        </button>
+                        <Component />
+                      </BaseButton>
+                    </DefaultButton>
+                  </CustomizedDefaultButton>
+                </PrimaryButton>
+              </CustomizedPrimaryButton>
+            </div>
+          </PanelFooterComponent>
+        </form>
+      </div>
+    </div>
+  </div>
+</RightPaneWrapper>
+`;
diff --git a/src/Explorer/Panes/SaveQueryPanel/index.tsx b/src/Explorer/Panes/SaveQueryPanel/index.tsx
index a4e5bc559..9fd209675 100644
--- a/src/Explorer/Panes/SaveQueryPanel/index.tsx
+++ b/src/Explorer/Panes/SaveQueryPanel/index.tsx
@@ -9,7 +9,7 @@ import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetr
 import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
 import QueryTab from "../../Tabs/QueryTab";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
+import { RightPaneWrapper, RightPaneWrapperProps } from "../RightPaneWrapper/RightPaneWrapper";
 
 interface SaveQueryPanelProps {
   explorer: Explorer;
@@ -28,7 +28,7 @@ export const SaveQueryPanel: FunctionComponent<SaveQueryPanelProps> = ({
   const setupSaveQueriesText = `For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “${SavedQueries.DatabaseName}”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.`;
   const title = "Save Query";
   const { canSaveQueries } = explorer;
-  const genericPaneProps: GenericRightPaneProps = {
+  const genericPaneProps: RightPaneWrapperProps = {
     container: explorer,
     formError: formError,
     formErrorDetail: formErrorsDetails,
@@ -146,7 +146,7 @@ export const SaveQueryPanel: FunctionComponent<SaveQueryPanelProps> = ({
   };
 
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneWrapper {...genericPaneProps}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           {!canSaveQueries() ? (
@@ -163,6 +163,6 @@ export const SaveQueryPanel: FunctionComponent<SaveQueryPanelProps> = ({
           )}
         </div>
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneWrapper>
   );
 };
diff --git a/src/Explorer/Panes/SettingsPane/index.tsx b/src/Explorer/Panes/SettingsPane/index.tsx
index fa561dd19..816a0577b 100644
--- a/src/Explorer/Panes/SettingsPane/index.tsx
+++ b/src/Explorer/Panes/SettingsPane/index.tsx
@@ -8,7 +8,7 @@ import * as StringUtility from "../../../Shared/StringUtility";
 import { userContext } from "../../../UserContext";
 import { logConsoleInfo } from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
+import { RightPaneWrapper, RightPaneWrapperProps } from "../RightPaneWrapper/RightPaneWrapper";
 
 export interface SettingsPaneProps {
   explorer: Explorer;
@@ -103,7 +103,7 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
     setGraphAutoVizDisabled(option.key);
   };
 
-  const genericPaneProps: GenericRightPaneProps = {
+  const genericPaneProps: RightPaneWrapperProps = {
     container,
     formError: formErrors,
     formErrorDetail: "",
@@ -128,7 +128,7 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
     setPageOption(option.key);
   };
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneWrapper {...genericPaneProps}>
       <div className="paneMainContent">
         {shouldShowQueryPageOptions && (
           <div className="settingsSection">
@@ -248,6 +248,6 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
           </div>
         </div>
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneWrapper>
   );
 };
diff --git a/src/Explorer/Panes/Tables/TableQuerySelectPanel/index.tsx b/src/Explorer/Panes/Tables/TableQuerySelectPanel/index.tsx
index 76a54db6c..23653f2af 100644
--- a/src/Explorer/Panes/Tables/TableQuerySelectPanel/index.tsx
+++ b/src/Explorer/Panes/Tables/TableQuerySelectPanel/index.tsx
@@ -4,7 +4,7 @@ import { userContext } from "../../../../UserContext";
 import Explorer from "../../../Explorer";
 import * as Constants from "../../../Tables/Constants";
 import QueryViewModel from "../../../Tables/QueryBuilder/QueryViewModel";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "../../GenericRightPaneComponent";
+import { RightPaneWrapper, RightPaneWrapperProps } from "../../RightPaneWrapper/RightPaneWrapper";
 
 interface TableQuerySelectPanelProps {
   explorer: Explorer;
@@ -28,7 +28,7 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
   ]);
   const [isAvailableColumnChecked, setIsAvailableColumnChecked] = useState<boolean>(true);
 
-  const genericPaneProps: GenericRightPaneProps = {
+  const genericPaneProps: RightPaneWrapperProps = {
     container: explorer,
     formError: "",
     formErrorDetail: "",
@@ -125,7 +125,7 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
   };
 
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneWrapper {...genericPaneProps}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           <Text>Select the columns that you want to query.</Text>
@@ -150,6 +150,6 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
           </div>
         </div>
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneWrapper>
   );
 };
diff --git a/src/Explorer/Panes/UploadFilePane/index.tsx b/src/Explorer/Panes/UploadFilePane/index.tsx
index 68fd4b80e..b76792c68 100644
--- a/src/Explorer/Panes/UploadFilePane/index.tsx
+++ b/src/Explorer/Panes/UploadFilePane/index.tsx
@@ -3,7 +3,7 @@ import { Upload } from "../../../Common/Upload";
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
 import { NotebookContentItem } from "../../Notebook/NotebookContentItem";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
+import { RightPaneWrapper, RightPaneWrapperProps } from "../RightPaneWrapper/RightPaneWrapper";
 
 export interface UploadFilePanelProps {
   explorer: Explorer;
@@ -89,7 +89,7 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
     return uploadFile(file.name, fileContent);
   };
 
-  const genericPaneProps: GenericRightPaneProps = {
+  const genericPaneProps: RightPaneWrapperProps = {
     container: container,
     formError: formErrors,
     formErrorDetail: formErrorsDetails,
@@ -102,10 +102,10 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
   };
 
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneWrapper {...genericPaneProps}>
       <div className="paneMainContent">
         <Upload label={selectFileInputLabel} accept={extensions} onUpload={updateSelectedFiles} />
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneWrapper>
   );
 };
diff --git a/src/Explorer/Panes/UploadItemsPane/index.tsx b/src/Explorer/Panes/UploadItemsPane/index.tsx
index 1b2fee0ba..816deffa2 100644
--- a/src/Explorer/Panes/UploadItemsPane/index.tsx
+++ b/src/Explorer/Panes/UploadItemsPane/index.tsx
@@ -6,7 +6,7 @@ import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
 import { UploadDetails, UploadDetailsRecord } from "../../../workers/upload/definitions";
 import Explorer from "../../Explorer";
 import { getErrorMessage } from "../../Tables/Utilities";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
+import { RightPaneWrapper, RightPaneWrapperProps } from "../RightPaneWrapper/RightPaneWrapper";
 
 export interface UploadItemsPaneProps {
   explorer: Explorer;
@@ -73,7 +73,7 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({
     setFiles(event.target.files);
   };
 
-  const genericPaneProps: GenericRightPaneProps = {
+  const genericPaneProps: RightPaneWrapperProps = {
     container: explorer,
     formError,
     formErrorDetail,
@@ -115,7 +115,7 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({
   };
 
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneWrapper {...genericPaneProps}>
       <div className="paneMainContent">
         <Upload
           label="Select JSON Files"
@@ -141,6 +141,6 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({
           </div>
         )}
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneWrapper>
   );
 };