Migrate Add Database Panel to React (#597)

Co-authored-by: Steve Faulkner <southpolesteve@gmail.com>

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -1,16 +1,13 @@
 import { Checkbox, ChoiceGroup, IChoiceGroupOption, SpinButton } from "@fluentui/react";
 import React, { FunctionComponent, MouseEvent, useState } from "react";
 import * as Constants from "../../../Common/Constants";
-import { Tooltip } from "../../../Common/Tooltip/Tooltip";
+import { InfoTooltip } from "../../../Common/Tooltip/InfoTooltip";
 import { configContext } from "../../../ConfigContext";
 import { LocalStorageUtility, StorageKey } from "../../../Shared/StorageUtility";
 import * as StringUtility from "../../../Shared/StringUtility";
 import { userContext } from "../../../UserContext";
 import { logConsoleInfo } from "../../../Utils/NotificationConsoleUtils";
-import {
-  GenericRightPaneComponent,
-  GenericRightPaneProps,
-} from "../GenericRightPaneComponent/GenericRightPaneComponent";
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 
 export interface SettingsPaneProps {
   expandConsole: () => void;
@@ -105,15 +102,12 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
     setGraphAutoVizDisabled(option.key);
   };
 
-  const genericPaneProps: GenericRightPaneProps = {
+  const genericPaneProps: RightPaneFormProps = {
     expandConsole,
     formError: formErrors,
     formErrorDetail: "",
-    id: "settingspane",
     isExecuting,
-    title: "Setting",
     submitButtonText: "Apply",
-    onClose: () => closePanel(),
     onSubmit: () => handlerOnSubmit(undefined),
   };
   const pageOptionList: IChoiceGroupOption[] = [
@@ -130,17 +124,17 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
     setPageOption(option.key);
   };
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneForm {...genericPaneProps}>
       <div className="paneMainContent">
         {shouldShowQueryPageOptions && (
           <div className="settingsSection">
             <div className="settingsSectionPart pageOptionsPart">
               <div className="settingsSectionLabel">
                 Page options
-                <Tooltip>
+                <InfoTooltip>
                   Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as many
                   query results per page.
-                </Tooltip>
+                </InfoTooltip>
               </div>
               <ChoiceGroup selectedKey={pageOption} options={pageOptionList} onChange={handleOnPageOptionChange} />
             </div>
@@ -149,7 +143,7 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
                 <div className="tabcontent">
                   <div className="settingsSectionLabel">
                     Query results per page
-                    <Tooltip>Enter the number of query results that should be shown per page.</Tooltip>
+                    <InfoTooltip>Enter the number of query results that should be shown per page.</InfoTooltip>
                   </div>
 
                   <SpinButton
@@ -176,10 +170,10 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
             <div className="settingsSectionPart">
               <div className="settingsSectionLabel">
                 Enable cross-partition query
-                <Tooltip>
+                <InfoTooltip>
                   Send more than one request while executing a query. More than one request is necessary if the query is
                   not scoped to single partition key value.
-                </Tooltip>
+                </InfoTooltip>
               </div>
 
               <Checkbox
@@ -199,11 +193,11 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
             <div className="settingsSectionPart">
               <div className="settingsSectionLabel">
                 Max degree of parallelism
-                <Tooltip>
+                <InfoTooltip>
                   Gets or sets the number of concurrent operations run client side during parallel query execution. A
                   positive property value limits the number of concurrent operations to the set value. If it is set to
                   less than 0, the system automatically decides the number of concurrent operations to run.
-                </Tooltip>
+                </InfoTooltip>
               </div>
 
               <SpinButton
@@ -227,10 +221,10 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
             <div className="settingsSectionPart">
               <div className="settingsSectionLabel">
                 Display Gremlin query results as:&nbsp;
-                <Tooltip>
+                <InfoTooltip>
                   Select Graph to automatically visualize the query results as a Graph or JSON to display the results as
                   JSON.
-                </Tooltip>
+                </InfoTooltip>
               </div>
 
               <ChoiceGroup
@@ -249,6 +243,6 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
           </div>
         </div>
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneForm>
   );
 };