Remove generic right pane component (#790)

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

src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx

@@ -1,5 +1,5 @@
-import { useBoolean } from "@fluentui/react-hooks";
 import { Text, TextField } from "@fluentui/react";
+import { useBoolean } from "@fluentui/react-hooks";
 import React, { FunctionComponent, useState } from "react";
 import { Areas, SavedQueries } from "../../../Common/Constants";
 import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
@@ -9,10 +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/GenericRightPaneComponent";
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 
 interface SaveQueryPaneProps {
   explorer: Explorer;
@@ -25,32 +22,16 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({
 }: SaveQueryPaneProps): JSX.Element => {
   const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false);
   const [formError, setFormError] = useState<string>("");
-  const [formErrorsDetails, setFormErrorsDetails] = useState<string>("");
   const [queryName, setQueryName] = useState<string>("");
 
   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 = {
-    expandConsole: () => explorer.expandConsole(),
-    formError: formError,
-    formErrorDetail: formErrorsDetails,
-    id: "saveQueryPane",
-    isExecuting: isLoading,
-    title,
-    submitButtonText: canSaveQueries() ? "Save" : "Complete setup",
-    onClose: () => closePanel(),
-    onSubmit: () => {
-      canSaveQueries() ? submit() : setupQueries();
-    },
-  };
 
   const submit = async (): Promise<void> => {
     setFormError("");
-    setFormErrorsDetails("");
     if (!canSaveQueries()) {
       setFormError("Cannot save query");
-      setFormErrorsDetails("Failed to save query: account not set up to save queries");
       logConsoleError("Failed to save query: account not setup to save queries");
     }
 
@@ -58,12 +39,10 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({
     const query: string = queryTab && queryTab.sqlQueryEditorContent();
     if (!queryName || queryName.length === 0) {
       setFormError("No query name specified");
-      setFormErrorsDetails("No query name specified. Please specify a query name.");
       logConsoleError("Could not save query -- No query name specified. Please specify a query name.");
       return;
     } else if (!query || query.length === 0) {
       setFormError("Invalid query content specified");
-      setFormErrorsDetails("Invalid query content specified. Please enter query content.");
       logConsoleError("Could not save query -- Invalid query content specified. Please enter query content.");
       return;
     }
@@ -97,7 +76,7 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({
       setLoadingFalse();
       const errorMessage = getErrorMessage(error);
       setFormError("Failed to save query");
-      setFormErrorsDetails(`Failed to save query: ${errorMessage}`);
+      logConsoleError(`Failed to save query: ${errorMessage}`);
       traceFailure(
         Action.SaveQuery,
         {
@@ -142,14 +121,23 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({
         startKey
       );
       setFormError("Failed to setup a container for saved queries");
-      setFormErrorsDetails(`Failed to setup a container for saved queries: ${errorMessage}`);
+      logConsoleError(`Failed to setup a container for saved queries: ${errorMessage}`);
     } finally {
       setLoadingFalse();
     }
   };
 
+  const props: RightPaneFormProps = {
+    expandConsole: () => explorer.expandConsole(),
+    formError: formError,
+    isExecuting: isLoading,
+    submitButtonText: canSaveQueries() ? "Save" : "Complete setup",
+    onSubmit: () => {
+      canSaveQueries() ? submit() : setupQueries();
+    },
+  };
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneForm {...props}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           {!canSaveQueries() ? (
@@ -158,6 +146,7 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({
             <TextField
               id="saveQueryInput"
               label="Name"
+              autoFocus
               styles={{ fieldGroup: { width: 300 } }}
               onChange={(event, newInput?: string) => {
                 setQueryName(newInput);
@@ -166,6 +155,6 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({
           )}
         </div>
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneForm>
   );
 };

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

@@ -1,16 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Save Query Pane should render Default properly 1`] = `
-<GenericRightPaneComponent
+<RightPaneForm
   expandConsole={[Function]}
   formError=""
-  formErrorDetail=""
-  id="saveQueryPane"
   isExecuting={false}
-  onClose={[Function]}
   onSubmit={[Function]}
   submitButtonText="Complete setup"
-  title="Save Query"
 >
   <div
     className="panelFormWrapper"
@@ -25,5 +21,5 @@ exports[`Save Query Pane should render Default properly 1`] = `
       </Text>
     </div>
   </div>
-</GenericRightPaneComponent>
+</RightPaneForm>
 `;