Merge pull request #18851 from jeclrsg/hpcc-32128-zap-dialog-loading-…

…status-indicator HPCC-32128 ECL Watch v9 add ZAP creation indicator
hpcc-systems · Jul 4, 2024 · e29c866 · e29c866
2 parents fd8b43c + 801f268
commit e29c866
Showing 1 changed file with 9 additions and 2 deletions.
diff --git a/esp/src/src-react/components/forms/ZAPDialog.tsx b/esp/src/src-react/components/forms/ZAPDialog.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Checkbox, DefaultButton, Dropdown, Icon, IDropdownProps, IOnRenderComboBoxLabelProps, IStackTokens, ITextFieldProps, mergeStyleSets, PrimaryButton, Stack, TextField, TooltipHost } from "@fluentui/react";
+import { Checkbox, DefaultButton, Dropdown, Icon, IDropdownProps, IOnRenderComboBoxLabelProps, IStackTokens, ITextFieldProps, mergeStyleSets, PrimaryButton, Spinner, Stack, TextField, TooltipHost } from "@fluentui/react";
 import { useForm, Controller } from "react-hook-form";
 import { LogType } from "@hpcc-js/comms";
 import { scopedLogger } from "@hpcc-js/util";
@@ -164,6 +164,8 @@ export const ZAPDialog: React.FunctionComponent<ZAPDialogProps> = ({
     }), [theme]);
 
     const [emailDisabled, setEmailDisabled] = React.useState(true);
+    const [submitDisabled, setSubmitDisabled] = React.useState(false);
+    const [spinnerHidden, setSpinnerHidden] = React.useState(true);
     const [columnMode, setColumnMode] = React.useState(ColumnMode.DEFAULT);
     const [logFormat, setLogFormat] = React.useState(LogFormat.CSV);
     const [showCustomColumns, setShowCustomColumns] = React.useState(false);
@@ -184,6 +186,8 @@ export const ZAPDialog: React.FunctionComponent<ZAPDialogProps> = ({
                 const logFilter = data.LogFilter;
 
                 delete data.LogFilter;
+                setSubmitDisabled(true);
+                setSpinnerHidden(false);
 
                 for (const key in data) {
                     formData.append(key, data[key]);
@@ -223,6 +227,8 @@ export const ZAPDialog: React.FunctionComponent<ZAPDialogProps> = ({
                         link.click();
                         link.remove();
 
+                        setSubmitDisabled(false);
+                        setSpinnerHidden(true);
                         closeForm();
 
                         if (logAccessorMessage !== "") {
@@ -253,7 +259,8 @@ export const ZAPDialog: React.FunctionComponent<ZAPDialogProps> = ({
 
     return <MessageBox title={nlsHPCC.ZippedAnalysisPackage} minWidth={440} show={showForm} setShow={closeForm}
         footer={<>
-            <PrimaryButton text={nlsHPCC.Submit} onClick={handleSubmit(onSubmit)} />
+            <Spinner label={nlsHPCC.LoadingData} labelPosition="right" style={{ display: spinnerHidden ? "none" : "inherit" }} />
+            <PrimaryButton text={nlsHPCC.Submit} disabled={submitDisabled} onClick={handleSubmit(onSubmit)} />
             <DefaultButton text={nlsHPCC.Cancel} onClick={() => closeForm()} />
         </>}>
         <Controller