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>
   );
 };

src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap

@@ -1,16 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Settings Pane should render Default properly 1`] = `
-<GenericRightPaneComponent
+<RightPaneForm
   expandConsole={[Function]}
   formError=""
   formErrorDetail=""
-  id="settingspane"
   isExecuting={false}
-  onClose={[Function]}
   onSubmit={[Function]}
   submitButtonText="Apply"
-  title="Setting"
 >
   <div
     className="paneMainContent"
@@ -25,9 +22,9 @@ exports[`Settings Pane should render Default properly 1`] = `
           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>
         <StyledChoiceGroup
           onChange={[Function]}
@@ -56,9 +53,9 @@ exports[`Settings Pane should render Default properly 1`] = `
             className="settingsSectionLabel"
           >
             Query results per page
-            <Tooltip>
+            <InfoTooltip>
               Enter the number of query results that should be shown per page.
-            </Tooltip>
+            </InfoTooltip>
           </div>
           <StyledSpinButton
             ariaLabel="Custom query items per page"
@@ -85,9 +82,9 @@ exports[`Settings Pane should render Default properly 1`] = `
           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>
         <StyledCheckboxBase
           ariaLabel="Enable cross partition query"
@@ -114,9 +111,9 @@ exports[`Settings Pane should render Default properly 1`] = `
           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>
         <StyledSpinButton
           ariaLabel="Max degree of parallelism"
@@ -148,20 +145,17 @@ exports[`Settings Pane should render Default properly 1`] = `
       </div>
     </div>
   </div>
-</GenericRightPaneComponent>
+</RightPaneForm>
 `;
 
 exports[`Settings Pane should render Gremlin properly 1`] = `
-<GenericRightPaneComponent
+<RightPaneForm
   expandConsole={[Function]}
   formError=""
   formErrorDetail=""
-  id="settingspane"
   isExecuting={false}
-  onClose={[Function]}
   onSubmit={[Function]}
   submitButtonText="Apply"
-  title="Setting"
 >
   <div
     className="paneMainContent"
@@ -176,9 +170,9 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
           className="settingsSectionLabel"
         >
           Display Gremlin query results as: 
-          <Tooltip>
+          <InfoTooltip>
             Select Graph to automatically visualize the query results as a Graph or JSON to display the results as JSON.
-          </Tooltip>
+          </InfoTooltip>
         </div>
         <StyledChoiceGroup
           aria-label="Graph Auto-visualization"
@@ -214,5 +208,5 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
       </div>
     </div>
   </div>
-</GenericRightPaneComponent>
+</RightPaneForm>
 `;