Batch of small fixes for RightPaneForm and AddDatabasePane components (#780)

src/Explorer/Controls/ThroughputInput/ThroughputInput.test.tsx

@@ -19,4 +19,14 @@ describe("ThroughputInput Pane", () => {
   it("should render Default properly", () => {
     expect(wrapper).toMatchSnapshot();
   });
+
+  it("should switch mode properly", () => {
+    wrapper.find('[aria-label="Manual mode"]').simulate("change");
+    expect(wrapper.find('[aria-label="Throughput header"]').at(0).text()).toBe(
+      "Container throughput (400 - unlimited RU/s)"
+    );
+
+    wrapper.find('[aria-label="Autoscale mode"]').simulate("change");
+    expect(wrapper.find('[aria-label="Throughput header"]').at(0).text()).toBe("Container throughput (autoscale)");
+  });
 });

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -101,7 +101,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
     <div className="throughputInputContainer throughputInputSpacing">
       <Stack horizontal>
         <span className="mandatoryStar">*&nbsp;</span>
-        <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
+        <Text aria-label="Throughput header" variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
           {getThroughputLabelText()}
         </Text>
         <InfoTooltip>{PricingUtils.getRuToolTipText()}</InfoTooltip>

src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap

@@ -25,6 +25,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           * 
         </span>
         <Text
+          aria-label="Throughput header"
           key=".0:$.1"
           style={
             Object {
@@ -35,6 +36,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           variant="small"
         >
           <span
+            aria-label="Throughput header"
             className="css-54"
             style={
               Object {

src/Explorer/Explorer.tsx

@@ -1988,7 +1988,7 @@ export default class Explorer {
         "Add " + getDatabaseName(),
         <AddDatabasePanel
           explorer={this}
-          openNotificationConsole={this.expandConsole}
+          openNotificationConsole={() => this.expandConsole()}
           closePanel={this.closeSidePanel}
         />
       );

src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx

@@ -48,7 +48,6 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
   const [databaseCreateNewShared, setDatabaseCreateNewShared] = useState<boolean>(
     subscriptionType !== SubscriptionType.EA && !isServerlessAccount()
   );
-  const [formErrorsDetails, setFormErrorsDetails] = useState<string>();
   const [formErrors, setFormErrors] = useState<string>("");
   const [isExecuting, setIsExecuting] = useState<boolean>(false);
 
@@ -128,7 +127,6 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
     setIsExecuting(false);
     const errorMessage = getErrorMessage(error);
     setFormErrors(errorMessage);
-    setFormErrorsDetails(errorMessage);
     const addDatabasePaneFailedMessage = {
       ...addDatabasePaneMessage,
       offerThroughput,
@@ -167,7 +165,6 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
   const props: RightPaneFormProps = {
     expandConsole: openNotificationConsole,
     formError: formErrors,
-    formErrorDetail: formErrorsDetails,
     isExecuting,
     submitButtonText: "OK",
     onSubmit,

src/Explorer/Panes/PanelInfoErrorComponent.tsx

@@ -8,7 +8,6 @@ export interface PanelInfoErrorProps {
   link?: string;
   linkText?: string;
   openNotificationConsole?: () => void;
-  formError?: boolean;
 }
 
 export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProps> = ({
@@ -18,7 +17,6 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
   link,
   linkText,
   openNotificationConsole,
-  formError = true,
 }: PanelInfoErrorProps): JSX.Element => {
   let icon: JSX.Element;
   if (messageType === "error") {
@@ -30,25 +28,23 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
   }
 
   return (
-    formError && (
+    <Stack className="panelInfoErrorContainer" horizontal verticalAlign="center">
-      <Stack className="panelInfoErrorContainer" horizontal verticalAlign="center">
+      {icon}
-        {icon}
+      <span className="panelWarningErrorDetailsLinkContainer">
-        <span className="panelWarningErrorDetailsLinkContainer">
+        <Text className="panelWarningErrorMessage" variant="small" aria-label="message">
-          <Text className="panelWarningErrorMessage" variant="small" aria-label="message">
+          {message}
-            {message}
+          {link && linkText && (
-            {link && linkText && (
+            <Link target="_blank" href={link}>
-              <Link target="_blank" href={link}>
+              {linkText}
-                {linkText}
+            </Link>
-              </Link>
-            )}
-          </Text>
-          {showErrorDetails && (
-            <a className="paneErrorLink" role="link" onClick={openNotificationConsole}>
-              More details
-            </a>
           )}
-        </span>
+        </Text>
-      </Stack>
+        {showErrorDetails && (
-    )
+          <a className="paneErrorLink" role="link" onClick={openNotificationConsole}>
+            More details
+          </a>
+        )}
+      </span>
+    </Stack>
   );
 };

src/Explorer/Panes/RightPaneForm/RightPaneForm.test.tsx

@@ -9,7 +9,6 @@ const expandConsole = jest.fn();
 const props = {
   expandConsole,
   formError: "",
-  formErrorDetail: "",
   isExecuting: false,
   submitButtonText: "Load",
   onSubmit,

src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx

@@ -1,12 +1,11 @@
 import React, { FunctionComponent, ReactNode } from "react";
 import { PanelFooterComponent } from "../PanelFooterComponent";
-import { PanelInfoErrorComponent, PanelInfoErrorProps } from "../PanelInfoErrorComponent";
+import { PanelInfoErrorComponent } from "../PanelInfoErrorComponent";
 import { PanelLoadingScreen } from "../PanelLoadingScreen";
 
 export interface RightPaneFormProps {
   expandConsole: () => void;
   formError: string;
-  formErrorDetail: string;
   isExecuting: boolean;
   onSubmit: () => void;
   submitButtonText: string;
@@ -17,7 +16,6 @@ export interface RightPaneFormProps {
 export const RightPaneForm: FunctionComponent<RightPaneFormProps> = ({
   expandConsole,
   formError,
-  formErrorDetail,
   isExecuting,
   onSubmit,
   submitButtonText,
@@ -29,18 +27,17 @@ export const RightPaneForm: FunctionComponent<RightPaneFormProps> = ({
     onSubmit();
   };
 
-  const panelInfoErrorProps: PanelInfoErrorProps = {
-    messageType: "error",
-    message: formError,
-    formError: formError !== "",
-    showErrorDetails: formErrorDetail !== "",
-    openNotificationConsole: expandConsole,
-  };
-
   return (
     <>
-      <PanelInfoErrorComponent {...panelInfoErrorProps} />
       <form className="panelFormWrapper" onSubmit={handleOnSubmit}>
+        {formError && (
+          <PanelInfoErrorComponent
+            messageType="error"
+            message={formError}
+            showErrorDetails={true}
+            openNotificationConsole={expandConsole}
+          />
+        )}
         {children}
         {!isSubmitButtonHidden && <PanelFooterComponent buttonLabel={submitButtonText} />}
       </form>

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

@@ -4,18 +4,10 @@ exports[`Right Pane Form should render Default properly 1`] = `
 <RightPaneForm
   expandConsole={[MockFunction]}
   formError=""
-  formErrorDetail=""
   isExecuting={false}
   onSubmit={[MockFunction]}
   submitButtonText="Load"
 >
-  <PanelInfoErrorComponent
-    formError={false}
-    message=""
-    messageType="error"
-    openNotificationConsole={[MockFunction]}
-    showErrorDetails={false}
-  />
   <form
     className="panelFormWrapper"
     onSubmit={[Function]}

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -18,7 +18,6 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
   expandConsole,
   closePanel,
 }: SettingsPaneProps) => {
-  const [formErrors, setFormErrors] = useState<string>("");
   const [isExecuting, setIsExecuting] = useState<boolean>(false);
   const [pageOption, setPageOption] = useState<string>(
     LocalStorageUtility.getEntryNumber(StorageKey.ActualItemPerPage) === Constants.Queries.unlimitedItemsPerPage
@@ -50,7 +49,6 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
   const shouldShowParallelismOption = userContext.apiType !== "Gremlin";
 
   const handlerOnSubmit = (e: MouseEvent<HTMLButtonElement>) => {
-    setFormErrors("");
     setIsExecuting(true);
 
     LocalStorageUtility.setEntryNumber(
@@ -104,8 +102,7 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
 
   const genericPaneProps: RightPaneFormProps = {
     expandConsole,
-    formError: formErrors,
+    formError: "",
-    formErrorDetail: "",
     isExecuting,
     submitButtonText: "Apply",
     onSubmit: () => handlerOnSubmit(undefined),

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

@@ -4,7 +4,6 @@ exports[`Settings Pane should render Default properly 1`] = `
 <RightPaneForm
   expandConsole={[Function]}
   formError=""
-  formErrorDetail=""
   isExecuting={false}
   onSubmit={[Function]}
   submitButtonText="Apply"
@@ -152,7 +151,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
 <RightPaneForm
   expandConsole={[Function]}
   formError=""
-  formErrorDetail=""
   isExecuting={false}
   onSubmit={[Function]}
   submitButtonText="Apply"

src/Explorer/Panes/UploadFilePane/UploadFilePane.tsx

@@ -22,15 +22,12 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
 
   const [files, setFiles] = useState<FileList>();
   const [formErrors, setFormErrors] = useState<string>("");
-  const [formErrorsDetails, setFormErrorsDetails] = useState<string>("");
   const [isExecuting, setIsExecuting] = useState<boolean>(false);
 
   const submit = () => {
     setFormErrors("");
-    setFormErrorsDetails("");
     if (!files || files.length === 0) {
-      setFormErrors("No file specified");
+      setFormErrors("No file specified. Please input a file.");
-      setFormErrorsDetails("No file specified. Please input a file.");
       logConsoleError(`${errorMessage} -- No file specified. Please input a file.`);
       return;
     }
@@ -49,7 +46,6 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
         },
         (error: string) => {
           setFormErrors(errorMessage);
-          setFormErrorsDetails(`${errorMessage}: ${error}`);
           logConsoleError(`${errorMessage} ${file.name}: ${error}`);
         }
       )
@@ -85,7 +81,6 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
   const genericPaneProps: RightPaneFormProps = {
     expandConsole,
     formError: formErrors,
-    formErrorDetail: formErrorsDetails,
     isExecuting: isExecuting,
     submitButtonText: "Upload",
     onSubmit: submit,

src/Explorer/Panes/UploadItemsPane/UploadItemsPane.tsx

@@ -15,15 +15,14 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({ explo
   const [files, setFiles] = useState<FileList>();
   const [uploadFileData, setUploadFileData] = useState<UploadDetailsRecord[]>([]);
   const [formError, setFormError] = useState<string>("");
-  const [formErrorDetail, setFormErrorDetail] = useState<string>("");
   const [isExecuting, setIsExecuting] = useState<boolean>();
 
   const onSubmit = () => {
     setFormError("");
     if (!files || files.length === 0) {
-      setFormError("No files specified");
+      setFormError("No files were specified. Please input at least one file.");
-      setFormErrorDetail("No files were specified. Please input at least one file.");
       logConsoleError("Could not upload items -- No files were specified. Please input at least one file.");
+      return;
     }
 
     const selectedCollection = explorer.findSelectedCollection();
@@ -40,7 +39,6 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({ explo
         (error: Error) => {
           const errorMessage = getErrorMessage(error);
           setFormError(errorMessage);
-          setFormErrorDetail(errorMessage);
         }
       )
       .finally(() => {
@@ -55,7 +53,6 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({ explo
   const genericPaneProps: RightPaneFormProps = {
     expandConsole: () => explorer.expandConsole(),
     formError,
-    formErrorDetail,
     isExecuting: isExecuting,
     submitButtonText: "Upload",
     onSubmit,

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

@@ -4,7 +4,6 @@ exports[`Upload Items Pane should render Default properly 1`] = `
 <RightPaneForm
   expandConsole={[Function]}
   formError=""
-  formErrorDetail=""
   onSubmit={[Function]}
   submitButtonText="Upload"
 >