From dd5cd459cea6c706c6038a0bfe56d7f66299cded Mon Sep 17 00:00:00 2001
From: Darin Kelkhoff <darin.kelkhoff@gmail.com>
Date: Mon, 13 May 2024 08:46:11 -0500
Subject: [PATCH] CE-1180 reset formik form values (to latest values from
 backend) after each backend step

---
 src/qqq/pages/processes/ProcessRun.tsx | 201 +++++++++++++++----------
 1 file changed, 125 insertions(+), 76 deletions(-)

diff --git a/src/qqq/pages/processes/ProcessRun.tsx b/src/qqq/pages/processes/ProcessRun.tsx
index f248624..b55b755 100644
--- a/src/qqq/pages/processes/ProcessRun.tsx
+++ b/src/qqq/pages/processes/ProcessRun.tsx
@@ -47,12 +47,14 @@ import FormData from "form-data";
 import {Form, Formik} from "formik";
 import parse from "html-react-parser";
 import QContext from "QContext";
+import colors from "qqq/assets/theme/base/colors";
 import {QCancelButton, QSubmitButton} from "qqq/components/buttons/DefaultButtons";
 import QDynamicForm from "qqq/components/forms/DynamicForm";
 import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
 import MDButton from "qqq/components/legacy/MDButton";
 import MDProgress from "qqq/components/legacy/MDProgress";
 import MDTypography from "qqq/components/legacy/MDTypography";
+import HelpContent from "qqq/components/misc/HelpContent";
 import QRecordSidebar from "qqq/components/misc/RecordSidebar";
 import {GoogleDriveFolderPickerWrapper} from "qqq/components/processes/GoogleDriveFolderPickerWrapper";
 import ProcessSummaryResults from "qqq/components/processes/ProcessSummaryResults";
@@ -86,6 +88,14 @@ const INITIAL_RETRY_MILLIS = 1_500;
 const RETRY_MAX_MILLIS = 12_000;
 const BACKOFF_AMOUNT = 1.5;
 
+////////////////////////////////////////////////////////////////////////////
+// define a function that we can make referenes to, which we'll overwrite //
+// with formik's setFieldValue function, once we're inside formik.        //
+////////////////////////////////////////////////////////////////////////////
+let formikSetFieldValueFunction = (field: string, value: any, shouldValidate?: boolean): void =>
+{
+}
+
 function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, isReport, recordIds, closeModalHandler, forceReInit, overrideLabel}: Props): JSX.Element
 {
    const processNameParam = useParams().processName;
@@ -445,6 +455,15 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
          });
       }
 
+      // todo not commit - not ready - need process (or screen) meta-data to have helpContents...
+      /*
+      ///////////////////////////////
+      // screen-level help content //
+      ///////////////////////////////
+      let helpRoles = ["PROCESS_SCREEN", "ALL_SCREENS"];
+      const formattedHelpContent = <HelpContent helpContents={process.helpContents} roles={helpRoles} helpContentKey={`table:${tableName};section:${section.name}`} />;
+       */
+
       return (
          <>
             {
@@ -459,6 +478,16 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
                </MDTypography>
             }
 
+            {
+               /*
+               // todo not commit - not ready - need process (or screen) meta-data to have helpContents...
+               formattedHelpContent &&
+               <Box px={"1.5rem"} fontSize={"0.875rem"} color={colors.blueGray.main}>
+                  {formattedHelpContent}
+               </Box>
+               */
+            }
+
             {
                //////////////////////////////////////////////////
                // render all of the components for this screen //
@@ -1055,6 +1084,17 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
             setProcessValues(qJobComplete.values);
             setQJobRunning(null);
 
+            if(formikSetFieldValueFunction)
+            {
+               //////////////////////////////////
+               // reset field values in formik //
+               //////////////////////////////////
+               for (let key in qJobComplete.values)
+               {
+                  formikSetFieldValueFunction(key, qJobComplete.values[key]);
+               }
+            }
+
             /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
             // if the process step sent a new frontend-step-list, then refresh what we have in state (constructing new full model objects) //
             /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -1423,89 +1463,98 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
       >
          {({
             values, errors, touched, isSubmitting, setFieldValue,
-         }) => (
-            <Form style={formStyles} id={formId} autoComplete="off">
-               <Card sx={mainCardStyles}>
-                  {
-                     !isWidget && (
-                        <Box mx={2} mt={-3} sx={{"& .MuiStepper-horizontal": {minHeight: "5rem"}}}>
-                           <Stepper activeStep={activeStepIndex} alternativeLabel>
-                              {steps.map((step) => (
-                                 <Step key={step.name}>
-                                    <StepLabel>{step.label}</StepLabel>
-                                 </Step>
-                              ))}
-                           </Stepper>
-                        </Box>
-                     )
-                  }
+         }) =>
+         {
+            ///////////////////////////////////////////////////////////////////
+            // once we're in the formik form, use its setFieldValue function //
+            // over top of the default one we created globally               //
+            ///////////////////////////////////////////////////////////////////
+            formikSetFieldValueFunction = setFieldValue;
 
-                  <Box p={3}>
-                     <Box pb={isWidget ? 6 : "initial"}>
-                        {/***************************************************************************
+            return (
+               <Form style={formStyles} id={formId} autoComplete="off">
+                  <Card sx={mainCardStyles}>
+                     {
+                        !isWidget && (
+                           <Box mx={2} mt={-3} sx={{"& .MuiStepper-horizontal": {minHeight: "5rem"}}}>
+                              <Stepper activeStep={activeStepIndex} alternativeLabel>
+                                 {steps.map((step) => (
+                                    <Step key={step.name}>
+                                       <StepLabel>{step.label}</StepLabel>
+                                    </Step>
+                                 ))}
+                              </Stepper>
+                           </Box>
+                        )
+                     }
+
+                     <Box p={3}>
+                        <Box pb={isWidget ? 6 : "initial"}>
+                           {/***************************************************************************
                          ** step content - e.g., the appropriate form or other screen for the step **
                          ***************************************************************************/}
-                        {getDynamicStepContent(
-                           activeStepIndex,
-                           activeStep,
-                           {
-                              values,
-                              touched,
-                              formFields,
-                              errors,
-                           },
-                           processError,
-                           processValues,
-                           recordConfig,
-                           setFieldValue,
-                        )}
-                        {/********************************
+                           {getDynamicStepContent(
+                              activeStepIndex,
+                              activeStep,
+                              {
+                                 values,
+                                 touched,
+                                 formFields,
+                                 errors,
+                              },
+                              processError,
+                              processValues,
+                              recordConfig,
+                              setFieldValue,
+                           )}
+                           {/********************************
                          ** back &| next/submit buttons **
                          ********************************/}
-                        <Box mt={6} width="100%" display="flex" justifyContent="space-between" position={isWidget ? "absolute" : "initial"} bottom={isWidget ? "3rem" : "initial"} right={isWidget ? "1.5rem" : "initial"}>
-                           {true || activeStepIndex === 0 ? (
-                              <Box />
-                           ) : (
-                              <MDButton variant="gradient" color="light" onClick={handleBack}>back</MDButton>
-                           )}
-                           {processError || qJobRunning || !activeStep ? (
-                              <Box />
-                           ) : (
-                              <>
-                                 {formError && (
-                                    <MDTypography component="div" variant="caption" color="error" fontWeight="regular" align="right" fullWidth>
-                                       {formError}
-                                    </MDTypography>
-                                 )}
-                                 {
-                                    noMoreSteps && <QCancelButton
-                                       onClickHandler={handleCancelClicked}
-                                       label={isModal ? "Close" : "Return"}
-                                       iconName={isModal ? "cancel" : "arrow_back"}
-                                       disabled={isSubmitting} />
-                                 }
-                                 {
-                                    !noMoreSteps && (
-                                       <Box component="div" py={3}>
-                                          <Grid container justifyContent="flex-end" spacing={3}>
-                                             {
-                                                !isWidget && (
-                                                   <QCancelButton onClickHandler={handleCancelClicked} disabled={isSubmitting} />
-                                                )
-                                             }
-                                             <QSubmitButton label={nextButtonLabel} iconName={nextButtonIcon} disabled={isSubmitting} />
-                                          </Grid>
-                                       </Box>
-                                    )
-                                 }
-                              </>
-                           )}
+                           <Box mt={6} width="100%" display="flex" justifyContent="space-between" position={isWidget ? "absolute" : "initial"} bottom={isWidget ? "3rem" : "initial"} right={isWidget ? "1.5rem" : "initial"}>
+                              {true || activeStepIndex === 0 ? (
+                                 <Box />
+                              ) : (
+                                 <MDButton variant="gradient" color="light" onClick={handleBack}>back</MDButton>
+                              )}
+                              {processError || qJobRunning || !activeStep ? (
+                                 <Box />
+                              ) : (
+                                 <>
+                                    {formError && (
+                                       <MDTypography component="div" variant="caption" color="error" fontWeight="regular" align="right" fullWidth>
+                                          {formError}
+                                       </MDTypography>
+                                    )}
+                                    {
+                                       noMoreSteps && <QCancelButton
+                                          onClickHandler={handleCancelClicked}
+                                          label={isModal ? "Close" : "Return"}
+                                          iconName={isModal ? "cancel" : "arrow_back"}
+                                          disabled={isSubmitting} />
+                                    }
+                                    {
+                                       !noMoreSteps && (
+                                          <Box component="div" py={3}>
+                                             <Grid container justifyContent="flex-end" spacing={3}>
+                                                {
+                                                   !isWidget && (
+                                                      <QCancelButton onClickHandler={handleCancelClicked} disabled={isSubmitting} />
+                                                   )
+                                                }
+                                                <QSubmitButton label={nextButtonLabel} iconName={nextButtonIcon} disabled={isSubmitting} />
+                                             </Grid>
+                                          </Box>
+                                       )
+                                    }
+                                 </>
+                              )}
+                           </Box>
                         </Box>
                      </Box>
-                  </Box>
-               </Card>
-            </Form>
-         )}
+                  </Card>
+               </Form>
+            )
+         }}
       </Formik>
    );