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

2025-12-21 09:51:11 +00:00 · 2021-05-12 17:12:03 -07:00
parent 2f6dbd83f3
commit 14e58e5519
14 changed files with 44 additions and 65 deletions
--- a/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx
+++ b/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,
--- a/src/Explorer/Panes/PanelInfoErrorComponent.tsx
+++ b/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">
-        {icon}
-        <span className="panelWarningErrorDetailsLinkContainer">
-          <Text className="panelWarningErrorMessage" variant="small" aria-label="message">
-            {message}
-            {link && linkText && (
-              <Link target="_blank" href={link}>
-                {linkText}
-              </Link>
-            )}
-          </Text>
-          {showErrorDetails && (
-            <a className="paneErrorLink" role="link" onClick={openNotificationConsole}>
-              More details
-            </a>
+    <Stack className="panelInfoErrorContainer" horizontal verticalAlign="center">
+      {icon}
+      <span className="panelWarningErrorDetailsLinkContainer">
+        <Text className="panelWarningErrorMessage" variant="small" aria-label="message">
+          {message}
+          {link && linkText && (
+            <Link target="_blank" href={link}>
+              {linkText}
+            </Link>
          )}
-        </span>
-      </Stack>
-    )
+        </Text>
+        {showErrorDetails && (
+          <a className="paneErrorLink" role="link" onClick={openNotificationConsole}>
+            More details
+          </a>
+        )}
+      </span>
+    </Stack>
  );
 };
--- a/src/Explorer/Panes/RightPaneForm/RightPaneForm.test.tsx
+++ b/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,
--- a/src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx
+++ b/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>
--- a/src/Explorer/Panes/RightPaneForm/snapshots/RightPaneForm.test.tsx.snap
+++ b/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]}
--- a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
+++ b/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,
-    formErrorDetail: "",
+    formError: "",
    isExecuting,
    submitButtonText: "Apply",
    onSubmit: () => handlerOnSubmit(undefined),
--- a/src/Explorer/Panes/SettingsPane/snapshots/SettingsPane.test.tsx.snap
+++ b/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"
--- a/src/Explorer/Panes/UploadFilePane/UploadFilePane.tsx
+++ b/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");
-      setFormErrorsDetails("No file specified. Please input a file.");
+      setFormErrors("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,
--- a/src/Explorer/Panes/UploadItemsPane/UploadItemsPane.tsx
+++ b/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");
-      setFormErrorDetail("No files were specified. Please input at least one file.");
+      setFormError("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,
--- a/src/Explorer/Panes/UploadItemsPane/snapshots/UploadItemsPane.test.tsx.snap
+++ b/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"
 >