From 801f268fefba4dd3fcd4741466fc322928b5a676 Mon Sep 17 00:00:00 2001
From: Jeremy Clements <79224539+jeclrsg@users.noreply.github.com>
Date: Wed, 3 Jul 2024 11:36:03 -0400
Subject: [PATCH] HPCC-32128 ECL Watch v9 add ZAP creation indicator

disables the Submit button and displaying a "Loading..." status on form
submission

Signed-off-by: Jeremy Clements <79224539+jeclrsg@users.noreply.github.com>
---
 esp/src/src-react/components/forms/ZAPDialog.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/esp/src/src-react/components/forms/ZAPDialog.tsx b/esp/src/src-react/components/forms/ZAPDialog.tsx
index d43147c8f3c..3d4e3e3c5c7 100644
--- 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