CE-1955 - Break ProcessViewForm out into its own reusable component

src/qqq/components/processes/ProcessViewForm.tsx

@@ -0,0 +1,71 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+import {AdornmentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/AdornmentType";
+import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import Grid from "@mui/material/Grid";
+import MDTypography from "qqq/components/legacy/MDTypography";
+import ValueUtils from "qqq/utils/qqq/ValueUtils";
+
+interface ProcessViewFormProps
+{
+   fields: QFieldMetaData[];
+   values: { [fieldName: string]: any };
+   columns?: number;
+}
+
+ProcessViewForm.defaultProps = {
+   columns: 2
+};
+
+/***************************************************************************
+ ** a "view form" within a process step
+ **
+ ***************************************************************************/
+export default function ProcessViewForm({fields, values, columns}: ProcessViewFormProps): JSX.Element
+{
+   const sm = Math.floor(12 / columns);
+
+   return <Grid container>
+      {fields.map((field: QFieldMetaData) => (
+         field.hasAdornment(AdornmentType.ERROR) ? (
+            values[field.name] && (
+               <Grid item xs={12} sm={sm} key={field.name} display="flex" py={1} pr={2}>
+                  <MDTypography variant="button" fontWeight="regular">
+                     {ValueUtils.getValueForDisplay(field, values[field.name], undefined, "view")}
+                  </MDTypography>
+               </Grid>
+            )
+         ) : (
+            <Grid item xs={12} sm={sm} key={field.name} display="flex" py={1} pr={2}>
+               <MDTypography variant="button" fontWeight="bold">
+                  {field.label}
+                  : &nbsp;
+               </MDTypography>
+               <MDTypography variant="button" fontWeight="regular" color="text">
+                  {ValueUtils.getValueForDisplay(field, values[field.name], undefined, "view")}
+               </MDTypography>
+            </Grid>
+         )))
+      }
+   </Grid>;
+}

src/qqq/pages/processes/ProcessRun.tsx

@@ -20,7 +20,6 @@
  */
 
 import {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException";
-import {AdornmentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/AdornmentType";
 import {QComponentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QComponentType";
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 import {QFrontendComponent} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendComponent";
@@ -65,6 +64,7 @@ import BulkLoadProfileForm from "qqq/components/processes/BulkLoadProfileForm";
 import BulkLoadValueMappingForm from "qqq/components/processes/BulkLoadValueMappingForm";
 import {GoogleDriveFolderPickerWrapper} from "qqq/components/processes/GoogleDriveFolderPickerWrapper";
 import ProcessSummaryResults from "qqq/components/processes/ProcessSummaryResults";
+import ProcessViewForm from "qqq/components/processes/ProcessViewForm";
 import ValidationReview from "qqq/components/processes/ValidationReview";
 import {BlockData} from "qqq/components/widgets/blocks/BlockModels";
 import CompositeWidget, {CompositeData} from "qqq/components/widgets/CompositeWidget";
@@ -874,29 +874,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
                         }
                         {
                            component.type === QComponentType.VIEW_FORM && step.viewFields && (
-                              <div>
+                              <ProcessViewForm fields={step.viewFields} values={processValues} columns={1} />
-                                 {step.viewFields.map((field: QFieldMetaData) => (
-                                    field.hasAdornment(AdornmentType.ERROR) ? (
-                                       processValues[field.name] && (
-                                          <Box key={field.name} display="flex" py={1} pr={2}>
-                                             <MDTypography variant="button" fontWeight="regular">
-                                                {ValueUtils.getValueForDisplay(field, processValues[field.name], undefined, "view")}
-                                             </MDTypography>
-                                          </Box>
-                                       )
-                                    ) : (
-                                       <Box key={field.name} display="flex" py={1} pr={2}>
-                                          <MDTypography variant="button" fontWeight="bold">
-                                             {field.label}
-                                             : &nbsp;
-                                          </MDTypography>
-                                          <MDTypography variant="button" fontWeight="regular" color="text">
-                                             {ValueUtils.getValueForDisplay(field, processValues[field.name], undefined, "view")}
-                                          </MDTypography>
-                                       </Box>
-                                    )))
-                                 }
-                              </div>
                            )
                         }
                         {
@@ -1906,7 +1884,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
       ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
       // clear out the active step now, to avoid a flash of the old one after the job completes, but before the new one is all set //
       ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-      setActiveStep(null);
+      // setActiveStep(null);
 
       setTimeout(async () =>
       {