Fix flash of wrong step between steps; support component.values.previewText in QComponentType.HELP_TEXT; minor styles on upload button

src/qqq/components/QDynamicForm/index.tsx

@@ -19,9 +19,12 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import {colors} from "@mui/material";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
 import Grid from "@mui/material/Grid";
 import {useFormikContext} from "formik";
-import React from "react";
+import React, {useState} from "react";
 import QDynamicFormField from "qqq/components/QDynamicFormField";
 import MDBox from "qqq/components/Temporary/MDBox";
 import MDTypography from "qqq/components/Temporary/MDTypography";
@@ -44,9 +47,16 @@ function QDynamicForm(props: Props): JSX.Element
    } = formData;
 
    const formikProps = useFormikContext();
+   const [fileName, setFileName] = useState(null as string);
 
    const fileChanged = (event: React.FormEvent<HTMLInputElement>, field: any) =>
    {
+      setFileName(null)
+      if(event.currentTarget.files && event.currentTarget.files[0])
+      {
+         setFileName(event.currentTarget.files[0].name)
+      }
+
       formikProps.setFieldValue(field.name, event.currentTarget.files[0]);
    };
 
@@ -82,12 +92,23 @@ function QDynamicForm(props: Props): JSX.Element
                         return (
                            <Grid item xs={12} sm={6} key={fieldName}>
                               <MDBox mb={1.5}>
+
+                                 <Box display="flex" alignItems="center">
+                                    <Button variant="outlined" component="label">
+                                       <span style={{color: "#606060"}}>Choose file to upload</span>
                                        <input
                                           id={fieldName}
                                           name={fieldName}
                                           type="file"
+                                          hidden
                                           onChange={(event: React.FormEvent<HTMLInputElement>) => fileChanged(event, field)}
                                        />
+                                    </Button>
+                                    <Box ml={1} fontSize={"1rem"}>
+                                       {fileName}
+                                    </Box>
+                                 </Box>
+
                                  <MDBox mt={0.75}>
                                     <MDTypography component="div" variant="caption" color="error" fontWeight="regular">
                                        {errors[fieldName] && <span>You must select a file to proceed</span>}

src/qqq/pages/process-run/index.tsx

@@ -32,11 +32,13 @@ import {QJobRunning} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJob
 import {QJobStarted} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobStarted";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
 import {Button, Icon, CircularProgress, TablePagination} from "@mui/material";
+import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 import Grid from "@mui/material/Grid";
 import Step from "@mui/material/Step";
 import StepLabel from "@mui/material/StepLabel";
 import Stepper from "@mui/material/Stepper";
+import Typography from "@mui/material/Typography";
 import {DataGridPro, GridColDef} from "@mui/x-data-grid-pro";
 import FormData from "form-data";
 import {Form, Formik} from "formik";
@@ -53,6 +55,7 @@ import MDProgress from "qqq/components/Temporary/MDProgress";
 import MDTypography from "qqq/components/Temporary/MDTypography";
 import QValidationReview from "qqq/pages/process-run/components/QValidationReview";
 import QClient from "qqq/utils/QClient";
+import QValueUtils from "qqq/utils/QValueUtils";
 import QProcessSummaryResults from "./components/QProcessSummaryResults";
 
 interface Props
@@ -92,6 +95,7 @@ function ProcessRun({process}: Props): JSX.Element
       null as QJobStarted | QJobComplete | QJobError | QJobRunning,
    );
    const [showErrorDetail, setShowErrorDetail] = useState(false);
+   const [showFullHelpText, setShowFullHelpText] = useState(false);
 
    /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // the validation screen - it can change whether next is actually the final step or not... so, use this state field to track that. //
@@ -183,17 +187,7 @@ function ProcessRun({process}: Props): JSX.Element
 
       if (typeof value === "string")
       {
-         return (
+         return QValueUtils.breakTextIntoLines(value);
-            <>
-               {value.split(/\n/).map((value: string, index: number) => (
-                  // eslint-disable-next-line react/no-array-index-key
-                  <Fragment key={index}>
-                     <span>{value}</span>
-                     <br />
-                  </Fragment>
-               ))}
-            </>
-         );
       }
 
       return (<span>{value}</span>);
@@ -204,6 +198,11 @@ function ProcessRun({process}: Props): JSX.Element
       setShowErrorDetail(!showErrorDetail);
    };
 
+   const toggleShowFullHelpText = () =>
+   {
+      setShowFullHelpText(!showFullHelpText);
+   };
+
    ////////////////////////////////////////////////////
    // generate the main form body content for a step //
    ////////////////////////////////////////////////////
@@ -293,8 +292,23 @@ function ProcessRun({process}: Props): JSX.Element
                   <div key={index}>
                      {
                         component.type === QComponentType.HELP_TEXT && (
+                           component.values.previewText ?
+                              <>
+                                 <Box mt={1}>
+                                    <Button onClick={toggleShowFullHelpText} startIcon={<Icon>{showFullHelpText ? "expand_less" : "expand_more"}</Icon>} sx={{pl: 1}} >
+                                       {showFullHelpText ? "Hide " : "Show "}
+                                       {component.values.previewText}
+                                    </Button>
+                                 </Box>
+                                 <MDBox mt={1} style={{display: showFullHelpText ? "block" : "none"}}>
+                                    <Typography variant="body2" color="info">
+                                       {QValueUtils.breakTextIntoLines(component.values.text)}
+                                    </Typography>
+                                 </MDBox>
+                              </>
+                              :
                               <MDTypography variant="button" color="info">
-                              {component.values.text}
+                                 {QValueUtils.breakTextIntoLines(component.values.text)}
                               </MDTypography>
                         )
                      }
@@ -623,8 +637,6 @@ function ProcessRun({process}: Props): JSX.Element
          setLastProcessResponse(null);
          setRetryMillis(INITIAL_RETRY_MILLIS);
 
-         setQJobRunning(null);
-
          if (lastProcessResponse instanceof QJobComplete)
          {
             const qJobComplete = lastProcessResponse as QJobComplete;

src/qqq/utils/QValueUtils.tsx

@@ -23,6 +23,7 @@ import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QF
 import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
 import "datejs";
+import React, {Fragment} from "react";
 
 /*******************************************************************************
  ** Utility class for working with QQQ Values
@@ -62,6 +63,22 @@ class QValueUtils
 
       return (displayValue);
    }
+
+
+   public static breakTextIntoLines(value: string): JSX.Element
+   {
+      return (
+         <Fragment>
+            {value.split(/\n/).map((value: string, index: number) => (
+               // eslint-disable-next-line react/no-array-index-key
+               <Fragment key={index}>
+                  <span>{value}</span>
+                  <br />
+               </Fragment>
+            ))}
+         </Fragment>
+      );
+   }
 }
 
 export default QValueUtils;