CE-1120: updated to handle errors on join tables (specifically was happening with deposco customer orders)

Strip away null field names in criteria (e.g., from incomplete advanc…

package.json

@@ -6,7 +6,7 @@
       "@auth0/auth0-react": "1.10.2",
       "@emotion/react": "11.7.1",
       "@emotion/styled": "11.6.0",
-      "@kingsrook/qqq-frontend-core": "1.0.90",
+      "@kingsrook/qqq-frontend-core": "1.0.88",
       "@mui/icons-material": "5.4.1",
       "@mui/material": "5.11.1",
       "@mui/styles": "5.11.1",

src/qqq/components/forms/DynamicFormUtils.ts

@@ -24,38 +24,27 @@ import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QF
 import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
 import * as Yup from "yup";
 
-
-type DisabledFields = { [fieldName: string]: boolean } | string[];
-
 /*******************************************************************************
  ** Meta-data to represent a single field in a table.
  **
  *******************************************************************************/
 class DynamicFormUtils
 {
-
+   public static getFormData(qqqFormFields: QFieldMetaData[])
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public static getFormData(qqqFormFields: QFieldMetaData[], disabledFields?: DisabledFields)
    {
       const dynamicFormFields: any = {};
       const formValidations: any = {};
 
       qqqFormFields.forEach((field) =>
       {
-         dynamicFormFields[field.name] = this.getDynamicField(field, disabledFields);
+         dynamicFormFields[field.name] = this.getDynamicField(field);
-         formValidations[field.name] = this.getValidationForField(field, disabledFields);
+         formValidations[field.name] = this.getValidationForField(field);
       });
 
       return {dynamicFormFields, formValidations};
    }
 
-
+   public static getDynamicField(field: QFieldMetaData)
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public static getDynamicField(field: QFieldMetaData, disabledFields?: DisabledFields)
    {
       let fieldType: string;
       switch (field.type.toString())
@@ -96,21 +85,15 @@ class DynamicFormUtils
          }
       }
 
-      ////////////////////////////////////////////////////////////
-      // this feels right, but... might be cases where it isn't //
-      ////////////////////////////////////////////////////////////
-      const effectiveIsEditable = field.isEditable && !this.isFieldDynamicallyDisabled(field.name, disabledFields);
-      const effectivelyIsRequired = field.isRequired && effectiveIsEditable;
-
       let label = field.label ? field.label : field.name;
-      label += effectivelyIsRequired ? " *" : "";
+      label += field.isRequired ? " *" : "";
 
       return ({
          fieldMetaData: field,
          name: field.name,
          label: label,
-         isRequired: effectivelyIsRequired,
+         isRequired: field.isRequired,
-         isEditable: effectiveIsEditable,
+         isEditable: field.isEditable,
          type: fieldType,
          displayFormat: field.displayFormat,
          // todo invalidMsg: "Zipcode is not valid (e.g. 70000).",
@@ -118,16 +101,9 @@ class DynamicFormUtils
       });
    }
 
-
+   public static getValidationForField(field: QFieldMetaData)
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public static getValidationForField(field: QFieldMetaData, disabledFields?: DisabledFields)
    {
-      const effectiveIsEditable = field.isEditable && !this.isFieldDynamicallyDisabled(field.name, disabledFields);
+      if (field.isRequired)
-      const effectivelyIsRequired = field.isRequired && effectiveIsEditable;
-
-      if (effectivelyIsRequired)
       {
          if(field.possibleValueSourceName)
          {
@@ -145,10 +121,6 @@ class DynamicFormUtils
       return (null);
    }
 
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
    public static addPossibleValueProps(dynamicFormFields: any, qFields: QFieldMetaData[], tableName: string, processName: string, displayValues: Map<string, string>)
    {
       for (let i = 0; i < qFields.length; i++)
@@ -187,29 +159,6 @@ class DynamicFormUtils
          }
       }
    }
-
-
-   /*******************************************************************************
-    ** private helper - check the disabled fields object (array or map), and return
-    ** true iff fieldName is in it.
-    *******************************************************************************/
-   private static isFieldDynamicallyDisabled(fieldName: string, disabledFields?: DisabledFields): boolean
-   {
-      if (!disabledFields)
-      {
-         return (false);
-      }
-
-      if (Array.isArray(disabledFields))
-      {
-         return (disabledFields.indexOf(fieldName) > -1)
-      }
-      else
-      {
-         return (disabledFields[fieldName]);
-      }
-   }
-
 }
 
 export default DynamicFormUtils;

src/qqq/components/forms/EntityForm.tsx

@@ -22,10 +22,8 @@
 import {Capability} from "@kingsrook/qqq-frontend-core/lib/model/metaData/Capability";
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
-import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QTableSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableSection";
-import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
 import {QPossibleValue} from "@kingsrook/qqq-frontend-core/lib/model/QPossibleValue";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
 import {Alert} from "@mui/material";
@@ -34,24 +32,22 @@ import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 import Grid from "@mui/material/Grid";
 import Icon from "@mui/material/Icon";
-import Modal from "@mui/material/Modal";
+import {Form, Formik, useFormikContext} from "formik";
-import {Form, Formik, FormikErrors, FormikTouched, FormikValues, useFormikContext} from "formik";
+import React, {useContext, useEffect, useReducer, useState} from "react";
+import {useLocation, useNavigate, useParams} from "react-router-dom";
+import * as Yup from "yup";
 import QContext from "QContext";
+import colors from "qqq/assets/theme/base/colors";
 import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
 import QDynamicForm from "qqq/components/forms/DynamicForm";
 import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import HelpContent from "qqq/components/misc/HelpContent";
 import QRecordSidebar from "qqq/components/misc/RecordSidebar";
-import RecordGridWidget, {ChildRecordListData} from "qqq/components/widgets/misc/RecordGridWidget";
 import HtmlUtils from "qqq/utils/HtmlUtils";
 import Client from "qqq/utils/qqq/Client";
 import TableUtils from "qqq/utils/qqq/TableUtils";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
-import React, {useContext, useEffect, useReducer, useState} from "react";
-import {useLocation, useNavigate, useParams} from "react-router-dom";
-import {Value} from "sass";
-import * as Yup from "yup";
 
 interface Props
 {
@@ -62,8 +58,6 @@ interface Props
    defaultValues: { [key: string]: string };
    disabledFields: { [key: string]: boolean } | string[];
    isCopy?: boolean;
-   onSubmitCallback?: (values: any) => void;
-   overrideHeading?: string
 }
 
 EntityForm.defaultProps = {
@@ -73,8 +67,7 @@ EntityForm.defaultProps = {
    closeModalHandler: null,
    defaultValues: {},
    disabledFields: {},
-   isCopy: false,
+   isCopy: false
-   onSubmitCallback: null,
 };
 
 function EntityForm(props: Props): JSX.Element
@@ -97,15 +90,10 @@ function EntityForm(props: Props): JSX.Element
 
    const [asyncLoadInited, setAsyncLoadInited] = useState(false);
    const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
-   const [metaData, setMetaData] = useState(null as QInstance);
    const [record, setRecord] = useState(null as QRecord);
    const [tableSections, setTableSections] = useState(null as QTableSection[]);
-   const [renderedWidgetSections, setRenderedWidgetSections] = useState({} as {[name: string]: JSX.Element});
-   const [childListWidgetData, setChildListWidgetData] = useState({} as {[name: string]: ChildRecordListData});
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
-   const [showEditChildForm, setShowEditChildForm] = useState(null as any);
-
    const [notAllowedError, setNotAllowedError] = useState(null as string);
 
    const {pageHeader, setPageHeader} = useContext(QContext);
@@ -113,8 +101,6 @@ function EntityForm(props: Props): JSX.Element
    const navigate = useNavigate();
    const location = useLocation();
 
-   const cardElevation = props.isModal ? 3 : 0;
-
    ////////////////////////////////////////////////////////////////////
    // first take defaultValues and disabledFields from props         //
    // but, also allow them to be sent in the hash, in the format of: //
@@ -143,131 +129,7 @@ function EntityForm(props: Props): JSX.Element
       {}
    }
 
-
+   function getFormSection(values: any, touched: any, formFields: any, errors: any): JSX.Element
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function openAddChildRecord(name: string, widgetData: any)
-   {
-      let defaultValues = widgetData.defaultValuesForNewChildRecords;
-
-      let disabledFields = widgetData.disabledFieldsForNewChildRecords;
-      if(!disabledFields)
-      {
-         disabledFields = widgetData.defaultValuesForNewChildRecords;
-      }
-
-      doOpenEditChildForm(name, widgetData.childTableMetaData, null, defaultValues, disabledFields);
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function openEditChildRecord(name: string, widgetData: any, rowIndex: number)
-   {
-      let defaultValues = widgetData.queryOutput.records[rowIndex].values;
-
-      let disabledFields = widgetData.disabledFieldsForNewChildRecords;
-      if(!disabledFields)
-      {
-         disabledFields = widgetData.defaultValuesForNewChildRecords;
-      }
-
-      doOpenEditChildForm(name, widgetData.childTableMetaData, rowIndex, defaultValues, disabledFields);
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   const deleteChildRecord = (name: string, widgetData: any, rowIndex: number) =>
-   {
-      updateChildRecordList(name, "delete", rowIndex);
-   };
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function doOpenEditChildForm(widgetName: string, table: QTableMetaData, rowIndex: number, defaultValues: any, disabledFields: any)
-   {
-      const showEditChildForm: any = {};
-      showEditChildForm.widgetName = widgetName;
-      showEditChildForm.table = table;
-      showEditChildForm.rowIndex = rowIndex;
-      showEditChildForm.defaultValues = defaultValues;
-      showEditChildForm.disabledFields = disabledFields;
-      setShowEditChildForm(showEditChildForm);
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   const closeEditChildForm = (event: object, reason: string) =>
-   {
-      if (reason === "backdropClick" || reason === "escapeKeyDown")
-      {
-         return;
-      }
-
-      setShowEditChildForm(null);
-   };
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function submitEditChildForm(values: any)
-   {
-      updateChildRecordList(showEditChildForm.widgetName, showEditChildForm.rowIndex == null ? "insert" : "edit", showEditChildForm.rowIndex, values);
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   async function updateChildRecordList(widgetName: string, action: "insert" | "edit" | "delete", rowIndex?: number, values?: any)
-   {
-      const metaData = await qController.loadMetaData();
-      const widgetMetaData = metaData.widgets.get(widgetName);
-
-      const newChildListWidgetData: {[name: string]: ChildRecordListData} = Object.assign({}, childListWidgetData)
-      if(!newChildListWidgetData[widgetName].queryOutput.records)
-      {
-         newChildListWidgetData[widgetName].queryOutput.records = [];
-      }
-
-      switch(action)
-      {
-         case "insert":
-            newChildListWidgetData[widgetName].queryOutput.records.push({values: values})
-            break;
-         case "edit":
-            newChildListWidgetData[widgetName].queryOutput.records[rowIndex] = {values: values};
-            break;
-         case "delete":
-            newChildListWidgetData[widgetName].queryOutput.records.splice(rowIndex, 1);
-            break;
-      }
-      newChildListWidgetData[widgetName].totalRows = newChildListWidgetData[widgetName].queryOutput.records.length;
-      setChildListWidgetData(newChildListWidgetData);
-
-      const newRenderedWidgetSections = Object.assign({}, renderedWidgetSections)
-      newRenderedWidgetSections[widgetName] = getWidgetSection(widgetMetaData, newChildListWidgetData[widgetName]);
-      setRenderedWidgetSections(newRenderedWidgetSections);
-      forceUpdate();
-
-      setShowEditChildForm(null);
-   }
-
-
-   /*******************************************************************************
-    ** render a section (full of fields) as a form
-    *******************************************************************************/
-   function getFormSection(section: QTableSection, values: any, touched: any, formFields: any, errors: any, omitWrapper = false): JSX.Element
    {
       const formData: any = {};
       formData.values = values;
@@ -290,68 +152,13 @@ function EntityForm(props: Props): JSX.Element
 
       if (!Object.keys(formFields).length)
       {
-         return <div>Error:  No form fields in section {section.name}</div>;
+         return <div>Loading...</div>;
       }
 
       const helpRoles = [props.id ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"]
-
+      return <QDynamicForm formData={formData} record={record} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableName};`} />;
-      if(omitWrapper)
-      {
-         return <QDynamicForm formData={formData} record={record} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableName};`} />
    }
 
-      return <Card id={section.name} sx={{overflow: "visible", scrollMarginTop: "100px"}} elevation={cardElevation}>
-         <MDTypography variant="h6" p={3} pb={1}>
-            {section.label}
-         </MDTypography>
-         {getSectionHelp(section)}
-         <Box pb={1} px={3}>
-            <Box pb={"0.75rem"} width="100%">
-               <QDynamicForm formData={formData} record={record} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableName};`} />
-            </Box>
-         </Box>
-      </Card>
-   }
-
-
-   /*******************************************************************************
-    ** render a section as a widget
-    *******************************************************************************/
-   function getWidgetSection(widgetMetaData: QWidgetMetaData, widgetData: any): JSX.Element
-   {
-      widgetData.viewAllLink = null;
-      widgetMetaData.showExportButton = false;
-
-      return <RecordGridWidget
-         key={new Date().getTime()} // added so that editing values actually re-renders...
-         widgetMetaData={widgetMetaData}
-         data={widgetData}
-         disableRowClick
-         allowRecordEdit
-         allowRecordDelete
-         addNewRecordCallback={() => openAddChildRecord(widgetMetaData.name, widgetData)}
-         editRecordCallback={(rowIndex) => openEditChildRecord(widgetMetaData.name, widgetData, rowIndex)}
-         deleteRecordCallback={(rowIndex) => deleteChildRecord(widgetMetaData.name, widgetData, rowIndex)}
-      />
-   }
-
-
-   /*******************************************************************************
-    ** render a form section
-    *******************************************************************************/
-   function renderSection(section: QTableSection, values: FormikValues | Value, touched: FormikTouched<FormikValues> | Value, formFields: Map<string, any>, errors: FormikErrors<FormikValues> | Value)
-   {
-      if(section.fieldNames && section.fieldNames.length > 0)
-      {
-         return getFormSection(section, values, touched, formFields.get(section.name), errors);
-      }
-      else
-      {
-         return renderedWidgetSections[section.widgetName] ?? <Box>Loading {section.label}...</Box>
-      }
-   }
-
-
    if (!asyncLoadInited)
    {
       setAsyncLoadInited(true);
@@ -360,16 +167,10 @@ function EntityForm(props: Props): JSX.Element
          const tableMetaData = await qController.loadTableMetaData(tableName);
          setTableMetaData(tableMetaData);
 
-         const metaData = await qController.loadMetaData();
-         setMetaData(metaData);
-
          /////////////////////////////////////////////////
          // define the sections, e.g., for the left-bar //
          /////////////////////////////////////////////////
-         const tableSections = TableUtils.getSectionsForRecordSidebar(tableMetaData, [...tableMetaData.fields.keys()], (section: QTableSection) =>
+         const tableSections = TableUtils.getSectionsForRecordSidebar(tableMetaData, [...tableMetaData.fields.keys()]);
-         {
-            return section.widgetName && metaData.widgets.get(section.widgetName)?.type == "childRecordList" && metaData.widgets.get(section.widgetName)?.defaultValues?.has("manageAssociationName")
-         });
          setTableSections(tableSections);
 
          const fieldArray = [] as QFieldMetaData[];
@@ -462,18 +263,6 @@ function EntityForm(props: Props): JSX.Element
             }
          }
 
-         ///////////////////////////////////////////////////
-         // if an override heading was passed in, use it. //
-         ///////////////////////////////////////////////////
-         if(props.overrideHeading)
-         {
-            setFormTitle(props.overrideHeading);
-            if (!props.isModal)
-            {
-               setPageHeader(props.overrideHeading);
-            }
-         }
-
          //////////////////////////////////////
          // check capabilities & permissions //
          //////////////////////////////////////
@@ -520,9 +309,27 @@ function EntityForm(props: Props): JSX.Element
          const {
             dynamicFormFields,
             formValidations,
-         } = DynamicFormUtils.getFormData(fieldArray, disabledFields);
+         } = DynamicFormUtils.getFormData(fieldArray);
          DynamicFormUtils.addPossibleValueProps(dynamicFormFields, fieldArray, tableName, null, record ? record.displayValues : defaultDisplayValues);
 
+         if(disabledFields)
+         {
+            if(Array.isArray(disabledFields))
+            {
+               for (let i = 0; i < disabledFields.length; i++)
+               {
+                  dynamicFormFields[disabledFields[i]].isEditable = false;
+               }
+            }
+            else
+            {
+               for (let fieldName in disabledFields)
+               {
+                  dynamicFormFields[fieldName].isEditable = false;
+               }
+            }
+         }
+
          /////////////////////////////////////
          // group the formFields by section //
          /////////////////////////////////////
@@ -530,28 +337,16 @@ function EntityForm(props: Props): JSX.Element
          let t1sectionName;
          let t1section;
          const nonT1Sections: QTableSection[] = [];
-         const newRenderedWidgetSections: {[name: string]: JSX.Element} = {};
-         const newChildListWidgetData: {[name: string]: ChildRecordListData} = {};
-
          for (let i = 0; i < tableSections.length; i++)
          {
             const section = tableSections[i];
             const sectionDynamicFormFields: any[] = [];
 
-            if (section.isHidden)
+            if (section.isHidden || !section.fieldNames)
             {
                continue;
             }
 
-            const hasFields = section.fieldNames && section.fieldNames.length > 0;
-            const hasChildRecordListWidget = section.widgetName && metaData.widgets.get(section.widgetName)?.type == "childRecordList"
-            if(!hasFields && !hasChildRecordListWidget)
-            {
-               continue;
-            }
-
-            if(hasFields)
-            {
             for (let j = 0; j < section.fieldNames.length; j++)
             {
                const fieldName = section.fieldNames[j];
@@ -586,14 +381,7 @@ function EntityForm(props: Props): JSX.Element
             {
                dynamicFormFieldsBySection.set(section.name, sectionDynamicFormFields);
             }
-            }
+
-            else
-            {
-               const widgetMetaData = metaData.widgets.get(section.widgetName);
-               const widgetData = await qController.widget(widgetMetaData.name, props.id ? `${tableMetaData.primaryKeyField}=${props.id}` : "");
-               newRenderedWidgetSections[section.widgetName] = getWidgetSection(widgetMetaData, widgetData);
-               newChildListWidgetData[section.widgetName] = widgetData;
-            }
             //////////////////////////////////////
             // capture the tier1 section's name //
             //////////////////////////////////////
@@ -607,38 +395,16 @@ function EntityForm(props: Props): JSX.Element
                nonT1Sections.push(section);
             }
          }
-
          setT1SectionName(t1sectionName);
          setT1Section(t1section);
          setNonT1Sections(nonT1Sections);
          setFormFields(dynamicFormFieldsBySection);
          setValidations(Yup.object().shape(formValidations));
-         setRenderedWidgetSections(newRenderedWidgetSections);
-         setChildListWidgetData(newChildListWidgetData);
 
          forceUpdate();
       })();
    }
 
-
-   //////////////////////////////////////////////////////////////////
-   // watch widget data - if they change, re-render those sections //
-   //////////////////////////////////////////////////////////////////
-   useEffect(() =>
-   {
-      if(childListWidgetData)
-      {
-         const newRenderedWidgetSections: {[name: string]: JSX.Element} = {};
-         for(let name in childListWidgetData)
-         {
-            const widgetMetaData = metaData.widgets.get(name);
-            newRenderedWidgetSections[name] = getWidgetSection(widgetMetaData, childListWidgetData[name]);
-         }
-         setRenderedWidgetSections(newRenderedWidgetSections);
-      }
-   }, [childListWidgetData]);
-
-
    const handleCancelClicked = () =>
    {
       ///////////////////////////////////////////////////////////////////////////////////////
@@ -663,23 +429,9 @@ function EntityForm(props: Props): JSX.Element
       }
    };
 
-
-   /*******************************************************************************
-    ** event handler for the (Formik) Form.
-    *******************************************************************************/
    const handleSubmit = async (values: any, actions: any) =>
    {
       actions.setSubmitting(true);
-
-      /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-      // if there's a callback (e.g., for a modal nested on another create/edit screen), then just pass our data back there anre return. //
-      /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-      if(props.onSubmitCallback)
-      {
-         props.onSubmitCallback(values);
-         return;
-      }
-
       await (async () =>
       {
          /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -734,34 +486,9 @@ function EntityForm(props: Props): JSX.Element
             }
          }
 
-         // todo - associations + copy might be a "bad time"
-
-         const associationsToPost: any = {}
-         let haveAssociationsToPost = false;
-         for (let name of Object.keys(childListWidgetData))
-         {
-            const manageAssociationName = metaData.widgets.get(name)?.defaultValues?.get("manageAssociationName")
-            if(!manageAssociationName)
-            {
-               console.log(`Cannot send association data to backend - missing a manageAssociationName defaultValue in widget meta data for widget name ${name}`);
-            }
-            associationsToPost[manageAssociationName] = [];
-            haveAssociationsToPost = true;
-            for(let i=0; i<childListWidgetData[name].queryOutput?.records?.length; i++)
-            {
-               associationsToPost[manageAssociationName].push(childListWidgetData[name].queryOutput.records[i].values);
-            }
-         }
-         if(haveAssociationsToPost)
-         {
-            valuesToPost["associations"] = JSON.stringify(associationsToPost);
-         }
-
          if (props.id !== null && !props.isCopy)
          {
-            ///////////////////////
+            // todo - audit that it's a dupe
-            // perform an update //
-            ///////////////////////
             await qController
                .update(tableName, props.id, valuesToPost)
                .then((record) =>
@@ -772,14 +499,8 @@ function EntityForm(props: Props): JSX.Element
                   }
                   else
                   {
-                     let warningMessage = null;
-                     if(record.warnings && record.warnings.length && record.warnings.length > 0)
-                     {
-                        warningMessage = record.warnings[0];
-                     }
-
                      const path = location.pathname.replace(/\/edit$/, "");
-                     navigate(path, {state: {updateSuccess: true, warning: warningMessage}});
+                     navigate(path, {state: {updateSuccess: true}});
                   }
                })
                .catch((error) =>
@@ -801,10 +522,6 @@ function EntityForm(props: Props): JSX.Element
          }
          else
          {
-            /////////////////////////////////
-            // perform an insert           //
-            // todo - audit if it's a dupe //
-            /////////////////////////////////
             await qController
                .create(tableName, valuesToPost)
                .then((record) =>
@@ -815,16 +532,10 @@ function EntityForm(props: Props): JSX.Element
                   }
                   else
                   {
-                     let warningMessage = null;
-                     if(record.warnings && record.warnings.length && record.warnings.length > 0)
-                     {
-                        warningMessage = record.warnings[0];
-                     }
-
                      const path = props.isCopy ?
                         location.pathname.replace(new RegExp(`/${props.id}/copy$`), "/" + record.values.get(tableMetaData.primaryKeyField))
                         : location.pathname.replace(/create$/, record.values.get(tableMetaData.primaryKeyField));
-                     navigate(path, {state: {createSuccess: true, warning: warningMessage}});
+                     navigate(path, {state: {createSuccess: true}});
                   }
                })
                .catch((error) =>
@@ -883,6 +594,7 @@ function EntityForm(props: Props): JSX.Element
    }
    else
    {
+      const cardElevation = props.isModal ? 3 : 0;
       body = (
          <Box mb={3}>
             {
@@ -944,7 +656,7 @@ function EntityForm(props: Props): JSX.Element
                                     t1sectionName && formFields ? (
                                        <Box px={3}>
                                           <Box pb={"0.25rem"} width="100%">
-                                             {getFormSection(t1section, values, touched, formFields.get(t1sectionName), errors, true)}
+                                             {getFormSection(values, touched, formFields.get(t1sectionName), errors)}
                                           </Box>
                                        </Box>
                                     ) : null
@@ -953,7 +665,17 @@ function EntityForm(props: Props): JSX.Element
                            </Box>
                            {formFields && nonT1Sections.length ? nonT1Sections.map((section: QTableSection) => (
                               <Box key={`edit-card-${section.name}`} pb={3}>
-                                 {renderSection(section, values, touched, formFields, errors)}
+                                 <Card id={section.name} sx={{overflow: "visible", scrollMarginTop: "100px"}} elevation={cardElevation}>
+                                    <MDTypography variant="h6" p={3} pb={1}>
+                                       {section.label}
+                                    </MDTypography>
+                                    {getSectionHelp(section)}
+                                    <Box pb={1} px={3}>
+                                       <Box pb={"0.75rem"} width="100%">
+                                          {getFormSection(values, touched, formFields.get(section.name), errors)}
+                                       </Box>
+                                    </Box>
+                                 </Card>
                               </Box>
                            )) : null}
 
@@ -968,23 +690,6 @@ function EntityForm(props: Props): JSX.Element
                      )}
                   </Formik>
 
-                  {
-                     showEditChildForm &&
-                     <Modal open={showEditChildForm as boolean} onClose={(event, reason) => closeEditChildForm(event, reason)}>
-                        <div className="modalEditForm">
-                           <EntityForm
-                              isModal={true}
-                              closeModalHandler={closeEditChildForm}
-                              table={showEditChildForm.table}
-                              defaultValues={showEditChildForm.defaultValues}
-                              disabledFields={showEditChildForm.disabledFields}
-                              onSubmitCallback={submitEditChildForm}
-                              overrideHeading={`${showEditChildForm.rowIndex != null ? "Editing" : "Creating New"} ${showEditChildForm.table.label}`}
-                           />
-                        </div>
-                     </Modal>
-                  }
-
                </Grid>
             </Grid>
          </Box>

src/qqq/components/misc/SavedViews.tsx

@@ -25,7 +25,7 @@ import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QT
 import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete";
 import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-import {Alert, Button, Link} from "@mui/material";
+import {Alert, Button} from "@mui/material";
 import Box from "@mui/material/Box";
 import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
@@ -40,14 +40,14 @@ import TextField from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
 import {TooltipProps} from "@mui/material/Tooltip/Tooltip";
 import FormData from "form-data";
-import React, {useContext, useEffect, useRef, useState} from "react";
-import {useLocation, useNavigate} from "react-router-dom";
 import QContext from "QContext";
 import colors from "qqq/assets/theme/base/colors";
 import {QCancelButton, QDeleteButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
 import RecordQueryView from "qqq/models/query/RecordQueryView";
 import FilterUtils from "qqq/utils/qqq/FilterUtils";
 import {SavedViewUtils} from "qqq/utils/qqq/SavedViewUtils";
+import React, {useContext, useEffect, useRef, useState} from "react";
+import {useLocation, useNavigate} from "react-router-dom";
 
 interface Props
 {
@@ -227,6 +227,12 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
             /////////////////////////////////////////////////////////////////////////////////////////////////
             const viewObject = JSON.parse(JSON.stringify(view));
             viewObject.queryFilter = JSON.parse(JSON.stringify(FilterUtils.convertFilterPossibleValuesToIds(viewObject.queryFilter)));
+
+            ////////////////////////////////////////////////////////////////////////////
+            // strip away incomplete filters too, just for cleaner saved view filters //
+            ////////////////////////////////////////////////////////////////////////////
+            FilterUtils.stripAwayIncompleteCriteria(viewObject.queryFilter)
+
             formData.append("viewJson", JSON.stringify(viewObject));
 
             if (isSaveFilterAs || isRenameFilter || currentSavedView == null)

src/qqq/components/query/BasicAndAdvancedQueryControls.tsx

@@ -410,7 +410,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
       let counter = 0;
 
       return (
-         <Box display="flex" flexWrap="wrap" fontSize="0.875rem">
+         <React.Fragment>
             {thisQueryFilter.criteria?.map((criteria, i) =>
             {
                const {criteriaIsValid} = validateCriteria(criteria, null);
@@ -446,7 +446,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
                   </React.Fragment>
                );
             }))}
-         </Box>
+         </React.Fragment>
       );
    };
 
@@ -821,8 +821,10 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
                            pb={"0.125rem"}
                            boxShadow={"inset 0px 0px 4px 2px #EFEFED"}
                         >
+                           <Box display="flex" flexWrap="wrap" fontSize="0.875rem">
                               {queryToAdvancedString(queryFilter)}
                            </Box>
+                        </Box>
                      }
                   </Box>
                </Box>

src/qqq/components/widgets/Widget.tsx

@@ -169,17 +169,15 @@ export class AddNewRecordButton extends LabelComponent
    label: string;
    defaultValues: any;
    disabledFields: any;
-   addNewRecordCallback?: () => void;
 
 
-   constructor(table: QTableMetaData, defaultValues: any, label: string = "Add new", disabledFields: any = defaultValues, addNewRecordCallback?: () => void)
+   constructor(table: QTableMetaData, defaultValues: any, label: string = "Add new", disabledFields: any = defaultValues)
    {
       super();
       this.table = table;
       this.label = label;
       this.defaultValues = defaultValues;
       this.disabledFields = disabledFields;
-      this.addNewRecordCallback = addNewRecordCallback;
    }
 
    openEditForm = (navigate: any, table: QTableMetaData, id: any = null, defaultValues: any, disabledFields: any) =>
@@ -191,7 +189,7 @@ export class AddNewRecordButton extends LabelComponent
    {
       return (
          <Typography variant="body2" p={2} pr={0} display="inline" position="relative" top="-0.5rem">
-            <Button sx={{mt: 0.75}} onClick={() => this.addNewRecordCallback ? this.addNewRecordCallback() : this.openEditForm(args.navigate, this.table, null, this.defaultValues, this.disabledFields)}>{this.label}</Button>
+            <Button sx={{mt: 0.75}} onClick={() => this.openEditForm(args.navigate, this.table, null, this.defaultValues, this.disabledFields)}>{this.label}</Button>
          </Typography>
       );
    };

src/qqq/components/widgets/misc/RecordGridWidget.tsx

@@ -25,53 +25,28 @@ import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Icon from "@mui/material/Icon";
-import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip/Tooltip";
 import Typography from "@mui/material/Typography";
-import {DataGridPro, GridCallbackDetails, GridEventListener, GridRenderCellParams, GridRowParams, GridToolbarContainer, MuiEvent, useGridApiContext, useGridApiEventHandler} from "@mui/x-data-grid-pro";
+import {DataGridPro, GridCallbackDetails, GridEventListener, GridFilterModel, gridPreferencePanelStateSelector, GridRowParams, GridSelectionModel, GridToolbarColumnsButton, GridToolbarContainer, GridToolbarDensitySelector, GridToolbarExportContainer, GridToolbarFilterButton, MuiEvent, useGridApiContext, useGridApiEventHandler, useGridSelector} from "@mui/x-data-grid-pro";
-import Widget, {AddNewRecordButton, LabelComponent, WidgetData} from "qqq/components/widgets/Widget";
+import React, {useEffect, useRef, useState} from "react";
+import {useNavigate, Link} from "react-router-dom";
+import Widget, {AddNewRecordButton, LabelComponent} from "qqq/components/widgets/Widget";
 import DataGridUtils from "qqq/utils/DataGridUtils";
 import HtmlUtils from "qqq/utils/HtmlUtils";
 import Client from "qqq/utils/qqq/Client";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
-import React, {useEffect, useRef, useState} from "react";
-import {Link, useNavigate} from "react-router-dom";
-
-export interface ChildRecordListData extends WidgetData
-{
-   title: string;
-   queryOutput: {records: {values: any}[]}
-   childTableMetaData: QTableMetaData;
-   tablePath: string;
-   viewAllLink: string;
-   totalRows: number;
-   canAddChildRecord: boolean;
-   defaultValuesForNewChildRecords: {[fieldName: string]: any};
-   disabledFieldsForNewChildRecords: {[fieldName: string]: any};
-}
 
 interface Props
 {
    widgetMetaData: QWidgetMetaData;
-   data: ChildRecordListData;
+   data: any;
-   addNewRecordCallback?: () => void;
-   disableRowClick: boolean;
-   allowRecordEdit: boolean;
-   editRecordCallback?: (rowIndex: number) => void;
-   allowRecordDelete: boolean;
-   deleteRecordCallback?: (rowIndex: number) => void;
 }
 
-RecordGridWidget.defaultProps =
+RecordGridWidget.defaultProps = {};
-   {
-      disableRowClick: false,
-      allowRecordEdit: false,
-      allowRecordDelete: false
-   };
 
 const qController = Client.getInstance();
 
-function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRowClick, allowRecordEdit, editRecordCallback, allowRecordDelete, deleteRecordCallback}: Props): JSX.Element
+function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
 {
    const instance = useRef({timer: null});
    const [rows, setRows] = useState([]);
@@ -99,7 +74,7 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
          }
 
          const tableMetaData = new QTableMetaData(data.childTableMetaData);
-         const rows = DataGridUtils.makeRows(records, tableMetaData, true);
+         const rows = DataGridUtils.makeRows(records, tableMetaData);
 
          /////////////////////////////////////////////////////////////////////////////////
          // note - tablePath may be null, if the user doesn't have access to the table. //
@@ -128,28 +103,6 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
             }
          }
 
-         ////////////////////////////////////
-         // add actions cell, if available //
-         ////////////////////////////////////
-         if(allowRecordEdit || allowRecordDelete)
-         {
-            columns.unshift({
-               field: "_actions",
-               type: "string",
-               headerName: "Actions",
-               sortable: false,
-               filterable: false,
-               width: allowRecordEdit && allowRecordDelete ? 80 : 50,
-               renderCell: ((params: GridRenderCellParams) =>
-               {
-                  return <Box>
-                     {allowRecordEdit && <IconButton onClick={() => editRecordCallback(params.row.__rowIndex)}><Icon>edit</Icon></IconButton>}
-                     {allowRecordDelete && <IconButton onClick={() => deleteRecordCallback(params.row.__rowIndex)}><Icon>delete</Icon></IconButton>}
-                  </Box>
-               })
-            })
-         }
-
          setRows(rows);
          setRecords(records)
          setColumns(columns);
@@ -242,7 +195,7 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
       {
          disabledFields = data.defaultValuesForNewChildRecords;
       }
-      labelAdditionalComponentsRight.push(new AddNewRecordButton(data.childTableMetaData, data.defaultValuesForNewChildRecords, "Add new", disabledFields, addNewRecordCallback))
+      labelAdditionalComponentsRight.push(new AddNewRecordButton(data.childTableMetaData, data.defaultValuesForNewChildRecords, "Add new", disabledFields))
    }
 
 
@@ -251,18 +204,13 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
    /////////////////////////////////////////////////////////////////
    const handleRowClick = (params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) =>
    {
-      if(disableRowClick)
-      {
-         return;
-      }
-
       (async () =>
       {
          const qInstance = await qController.loadMetaData()
          let tablePath = qInstance.getTablePathByName(data.childTableMetaData.name)
          if(tablePath)
          {
-            tablePath = `${tablePath}/${params.row[data.childTableMetaData.primaryKeyField]}`;
+            tablePath = `${tablePath}/${params.id}`;
             DataGridUtils.handleRowClick(tablePath, event, gridMouseDownX, gridMouseDownY, navigate, instance);
          }
       })();
@@ -318,7 +266,6 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
                rowBuffer={10}
                getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd")}
                onRowClick={handleRowClick}
-               getRowId={(row) => row.__rowIndex}
                // getRowHeight={() => "auto"} // maybe nice?  wraps values in cells...
                components={{
                   Toolbar: CustomToolbar

src/qqq/models/query/RecordQueryView.ts

@@ -63,6 +63,8 @@ export default class RecordQueryView
 
       view.queryFilter = json.queryFilter as QQueryFilter;
 
+      FilterUtils.stripAwayIncompleteCriteria(view.queryFilter)
+
       //////////////////////////////////////////////////////////////////////////////////////////
       // it's important that some criteria values exist as expression objects - so - do that. //
       //////////////////////////////////////////////////////////////////////////////////////////

src/qqq/pages/records/query/RecordQuery.tsx

@@ -447,9 +447,19 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             }
          }
       }
+
+      /////////////////////////////////////////
+      // recursively prep subfilters as well //
+      /////////////////////////////////////////
+      let subFilters = [] as QQueryFilter[];
+      for (let j = 0; j < sourceFilter?.subFilters?.length; j++)
+      {
+         subFilters.push(prepQueryFilterForBackend(sourceFilter.subFilters[j]));
+      }
+
+      filterForBackend.subFilters = subFilters;
       filterForBackend.skip = pageNumber * rowsPerPage;
       filterForBackend.limit = rowsPerPage;
-
       return filterForBackend;
    };
 
@@ -701,8 +711,27 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    const doSetView = (view: RecordQueryView): void =>
    {
       setView(view);
-      setViewAsJson(JSON.stringify(view));
+      const viewAsJSON = JSON.stringify(view);
-      localStorage.setItem(viewLocalStorageKey, JSON.stringify(view));
+      setViewAsJson(viewAsJSON);
+
+      try
+      {
+         ////////////////////////////////////////////////////////////////////////////////////
+         // in case there's an incomplete criteria in the view (e.g., w/o a fieldName),    //
+         // don't store that in local storage - we don't want that, it's messy, and it     //
+         // has caused fails in the past.  So, clone the view, and strip away such things. //
+         ////////////////////////////////////////////////////////////////////////////////////
+         const viewForLocalStorage: RecordQueryView = JSON.parse(viewAsJSON);
+         if (viewForLocalStorage?.queryFilter?.criteria?.length > 0)
+         {
+            FilterUtils.stripAwayIncompleteCriteria(viewForLocalStorage.queryFilter)
+         }
+         localStorage.setItem(viewLocalStorageKey, JSON.stringify(viewForLocalStorage));
+      }
+      catch(e)
+      {
+         console.log("Error storing view in local storage: " + e)
+      }
    };
 
 

src/qqq/pages/records/view/RecordView.tsx

@@ -166,50 +166,50 @@ function RecordView({table, launchProcess}: Props): JSX.Element
          {
             if (!e.metaKey && e.key === "n" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission)
             {
-               e.preventDefault()
+               e.preventDefault();
                gotoCreate();
             }
             else if (!e.metaKey && e.key === "e" && table.capabilities.has(Capability.TABLE_UPDATE) && table.editPermission)
             {
-               e.preventDefault()
+               e.preventDefault();
                navigate("edit");
             }
             else if (!e.metaKey && e.key === "c" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission)
             {
-               e.preventDefault()
+               e.preventDefault();
                navigate("copy");
             }
             else if (!e.metaKey && e.key === "d" && table.capabilities.has(Capability.TABLE_DELETE) && table.deletePermission)
             {
-               e.preventDefault()
+               e.preventDefault();
                handleClickDeleteButton();
             }
             else if (!e.metaKey && e.key === "a" && metaData && metaData.tables.has("audit"))
             {
-               e.preventDefault()
+               e.preventDefault();
                navigate("#audit");
             }
          }
-      }
+      };
 
-      document.addEventListener("keydown", down)
+      document.addEventListener("keydown", down);
       return () =>
       {
-         document.removeEventListener("keydown", down)
+         document.removeEventListener("keydown", down);
-      }
+      };
-   }, [dotMenuOpen, keyboardHelpOpen, showEditChildForm, showAudit, metaData, location])
+   }, [dotMenuOpen, keyboardHelpOpen, showEditChildForm, showAudit, metaData, location]);
 
    const gotoCreate = () =>
    {
       const path = `${pathParts.slice(0, -1).join("/")}/create`;
       navigate(path);
-   }
+   };
 
    const gotoEdit = () =>
    {
       const path = `${pathParts.slice(0, -1).join("/")}/${record.values.get(table.primaryKeyField)}/edit`;
       navigate(path);
-   }
+   };
 
    ////////////////////////////////////////////////////////////////////////////////////////////////////
    // monitor location changes - if we've clicked a link from viewing one record to viewing another, //
@@ -349,7 +349,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
             {
                visibleJoinTables.add(tableForField.name);
             }
-         })
+         });
       }
 
       return (visibleJoinTables);
@@ -361,15 +361,15 @@ function RecordView({table, launchProcess}: Props): JSX.Element
     *******************************************************************************/
    const getSectionHelp = (section: QTableSection) =>
    {
-      const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"]
+      const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"];
       const formattedHelpContent = <HelpContent helpContents={section.helpContents} roles={helpRoles} helpContentKey={`table:${tableName};section:${section.name}`} />;
 
       return formattedHelpContent && (
          <Box px={"1.5rem"} fontSize={"0.875rem"} color={colors.blueGray.main}>
             {formattedHelpContent}
          </Box>
-      )
+      );
-   }
+   };
 
 
    if (!asyncLoadInited)
@@ -401,11 +401,11 @@ function RecordView({table, launchProcess}: Props): JSX.Element
          //////////////////////////////////////////////////////
          // load processes that the routing needs to respect //
          //////////////////////////////////////////////////////
-         const allTableProcesses = ProcessUtils.getProcessesForTable(metaData, tableName, true) // these include hidden ones (e.g., to find the bulks)
+         const allTableProcesses = ProcessUtils.getProcessesForTable(metaData, tableName, true); // these include hidden ones (e.g., to find the bulks)
          const runRecordScriptProcess = metaData?.processes.get("runRecordScript");
          if (runRecordScriptProcess)
          {
-            allTableProcesses.unshift(runRecordScriptProcess)
+            allTableProcesses.unshift(runRecordScriptProcess);
          }
          setAllTableProcesses(allTableProcesses);
 
@@ -522,13 +522,15 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                         section.fieldNames.map((fieldName: string) =>
                         {
                            let [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
+                           if (field != null)
+                           {
                               let label = field.label;
 
-                           const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"]
+                              const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"];
                               const showHelp = helpHelpActive || hasHelpContent(field.helpContents, helpRoles);
                               const formattedHelpContent = <HelpContent helpContents={field.helpContents} roles={helpRoles} heading={label} helpContentKey={`table:${tableName};field:${fieldName}`} />;
 
-                           const labelElement = <Typography variant="button" textTransform="none" fontWeight="bold" pr={1} color="rgb(52, 71, 103)" sx={{cursor: "default"}}>{label}:</Typography>
+                              const labelElement = <Typography variant="button" textTransform="none" fontWeight="bold" pr={1} color="rgb(52, 71, 103)" sx={{cursor: "default"}}>{label}:</Typography>;
 
                               return (
                                  <Box key={fieldName} flexDirection="row" pr={2}>
@@ -542,7 +544,8 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                                        </Typography>
                                     </>
                                  </Box>
-                           )
+                              );
+                           }
                         })
                      }
                   </Box>
@@ -603,9 +606,9 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                setWarningMessage(state["warning"]);
             }
 
-            delete state["createSuccess"]
+            delete state["createSuccess"];
-            delete state["updateSuccess"]
+            delete state["updateSuccess"];
-            delete state["warning"]
+            delete state["warning"];
 
             window.history.replaceState(state, "");
          }
@@ -864,7 +867,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                               }
                               {
                                  warningMessage ?
-                                    <Alert color="warning" sx={{mb: 3}} icon={<Icon>warning</Icon>} onClose={() =>
+                                    <Alert color="warning" sx={{mb: 3}} onClose={() =>
                                     {
                                        setWarningMessage(null);
                                     }}>

src/qqq/utils/DataGridUtils.tsx

@@ -29,11 +29,11 @@ import Tooltip from "@mui/material/Tooltip/Tooltip";
 import {GridColDef, GridFilterItem, GridRowsProp, MuiEvent} from "@mui/x-data-grid-pro";
 import {GridFilterOperator} from "@mui/x-data-grid/models/gridFilterOperator";
 import {GridColumnHeaderParams} from "@mui/x-data-grid/models/params/gridColumnHeaderParams";
+import React from "react";
+import {Link, NavigateFunction} from "react-router-dom";
 import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
 import {buildQGridPvsOperators, QGridBlobOperators, QGridBooleanOperators, QGridNumericOperators, QGridStringOperators} from "qqq/pages/records/query/GridFilterOperators";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
-import React from "react";
-import {Link, NavigateFunction} from "react-router-dom";
 
 
 const emptyApplyFilterFn = (filterItem: GridFilterItem, column: GridColDef): null => null;
@@ -118,7 +118,7 @@ export default class DataGridUtils
    /*******************************************************************************
     **
     *******************************************************************************/
-   public static makeRows = (results: QRecord[], tableMetaData: QTableMetaData, allowEmptyId = false): GridRowsProp[] =>
+   public static makeRows = (results: QRecord[], tableMetaData: QTableMetaData): GridRowsProp[] =>
    {
       const fields = [...tableMetaData.fields.values()];
       const rows = [] as any[];
@@ -159,12 +159,9 @@ export default class DataGridUtils
                /////////////////////////////////////////////////////////////////////////////////////////
                // DataGrid gets very upset about a null or undefined here, so, try to make it happier //
                /////////////////////////////////////////////////////////////////////////////////////////
-               if(!allowEmptyId)
-               {
                row["id"] = "--";
             }
          }
-         }
 
          rows.push(row);
       });
@@ -282,7 +279,7 @@ export default class DataGridUtils
          if (key === tableMetaData.primaryKeyField && linkBase)
          {
             column.renderCell = (cellValues: any) => (
-               cellValues.value ? <Link to={`${linkBase}${encodeURIComponent(cellValues.value)}`} onClick={(e) => e.stopPropagation()}>{cellValues.value}</Link> : ""
+               <Link to={`${linkBase}${encodeURIComponent(cellValues.value)}`} onClick={(e) => e.stopPropagation()}>{cellValues.value}</Link>
             );
          }
       });

src/qqq/utils/qqq/FilterUtils.tsx

@@ -159,6 +159,14 @@ class FilterUtils
 
          criteria.values = values;
       }
+
+      ////////////////////////////////////////////////
+      // recursively clean values in any subfilters //
+      ////////////////////////////////////////////////
+      for (let j = 0; j < queryFilter?.subFilters?.length; j++)
+      {
+         await FilterUtils.cleanupValuesInFilerFromQueryString(qController, tableMetaData, queryFilter.subFilters[j]);
+      }
    }
 
 
@@ -581,6 +589,29 @@ class FilterUtils
       }
    }
 
+
+   /*******************************************************************************
+    ** after go-live of redesigin in march 2024, we had bugs where we could get a
+    ** filter with a criteria w/ a null field name (e.g., by having an incomplete
+    ** criteria in the Advanced filter builder - and that would sometimes break
+    ** the screen!  So, strip those away when storing or loading filters, via
+    ** this function.
+    *******************************************************************************/
+   public static stripAwayIncompleteCriteria(filter: QQueryFilter)
+   {
+      if (filter?.criteria?.length > 0)
+      {
+         for (let i = 0; i < filter.criteria.length; i++)
+         {
+            if (!filter.criteria[i].fieldName)
+            {
+               filter.criteria.splice(i, 1);
+               i--;
+            }
+         }
+      }
+   }
+
 }
 
 export default FilterUtils;

src/qqq/utils/qqq/TableUtils.ts

@@ -30,102 +30,62 @@ import {QueryJoin} from "@kingsrook/qqq-frontend-core/lib/model/query/QueryJoin"
  *******************************************************************************/
 class TableUtils
 {
-
    /*******************************************************************************
-    ** For a table, return a sub-set of sections (originally meant for display in
-    ** the record-screen sidebars)
     **
-    ** If the table has no sections, one big "all fields" section is created.
-    **
-    ** a list of "allowed field names" may be given, in which case, a section is only
-    ** included if it has a field in that list.  e.g., an edit-screen, where disabled
-    ** fields aren't to be shown - if a section only has disabled fields, don't include it.
-    **
-    ** By default sections w/ widget names are excluded -- but -- to include them,
-    ** provide the metaData plus list of allowedWidgetTypes.
     *******************************************************************************/
-   public static getSectionsForRecordSidebar(tableMetaData: QTableMetaData, allowedFieldNames: any = null, additionalInclusionPredicate?: (section: QTableSection) => boolean): QTableSection[]
+   public static getSectionsForRecordSidebar(tableMetaData: QTableMetaData, allowedKeys: any = null): QTableSection[]
    {
-      /////////////////////////////////////////////////////////////////
-      // if the table has sections, then filter them and return some //
-      /////////////////////////////////////////////////////////////////
       if (tableMetaData.sections)
       {
-         //////////////////////////////////////////////////////////////////////////////////////////////
+         if (allowedKeys)
-         // if there are filters (a list of allowed field names, or an additionalInclusionPredicate, //
-         // then only return a subset of sections matching the filters                               //
-         //////////////////////////////////////////////////////////////////////////////////////////////
-         if (allowedFieldNames || additionalInclusionPredicate)
          {
-            ////////////////////////////////////////////////////////////////
+            const allowedKeySet = new Set<string>();
-            // put the field names in a set, for better inclusion testing //
+            allowedKeys.forEach((k: string) => allowedKeySet.add(k));
-            ////////////////////////////////////////////////////////////////
-            const allowedFieldNameSet = new Set<string>();
-            if(allowedFieldNames)
-            {
-               allowedFieldNames.forEach((k: string) => allowedFieldNameSet.add(k));
-            }
 
-            ///////////////////////////////////////////////////////////////////////////////
-            // loop over the sections, deciding which ones to include in the return list //
-            ///////////////////////////////////////////////////////////////////////////////
             const allowedSections: QTableSection[] = [];
+
             for (let i = 0; i < tableMetaData.sections.length; i++)
             {
                const section = tableMetaData.sections[i];
-               let includeSection = false;
+               if (section.fieldNames)
-
-               for (let j = 0; j < section.fieldNames?.length; j++)
                {
-                  if (allowedFieldNameSet.has(section.fieldNames[j]))
+                  for (let j = 0; j < section.fieldNames.length; j++)
                   {
-                     includeSection = true;
+                     if (allowedKeySet.has(section.fieldNames[j]))
+                     {
+                        allowedSections.push(section);
                         break;
                      }
                   }
-
-               if (additionalInclusionPredicate && additionalInclusionPredicate(section))
-               {
-                  includeSection = true;
-               }
-
-               if(includeSection)
-               {
-                  allowedSections.push(section);
                }
             }
 
-            console.log("allowedSections length: " + allowedSections.length);
             return (allowedSections);
          }
-
+         else
-         ////////////////////////////////////////////////////////////////
+         {
-         // if there are no filters to apply, then return all sections //
-         ////////////////////////////////////////////////////////////////
             return (tableMetaData.sections);
          }
-
+      }
-      ///////////////////////////////////////////////////////////////////////////////////////////////
+      else
-      // else, if the table had no sections, then make a pseudo-one with either all of the fields, //
+      {
-      // or a subset based on the allowedFieldNames                                                //
-      ///////////////////////////////////////////////////////////////////////////////////////////////
          let fieldNames = [...tableMetaData.fields.keys()];
-      if (allowedFieldNames)
+         if (allowedKeys)
          {
             fieldNames = [];
             for (const fieldName in tableMetaData.fields.keys())
             {
-            if (allowedFieldNames[fieldName])
+               if (allowedKeys[fieldName])
                {
                   fieldNames.push(fieldName);
                }
             }
          }
-
          return ([new QTableSection({
             iconName: "description", label: "All Fields", name: "allFields", fieldNames: [...fieldNames],
          })]);
       }
+   }
 
 
    /*******************************************************************************
@@ -150,7 +110,7 @@ class TableUtils
          return ([tableMetaData.fields.get(fieldName), tableMetaData]);
       }
 
-      return (null);
+      return [null, null];
    }
 
 
@@ -173,7 +133,7 @@ class TableUtils
       catch (e)
       {
          console.log(`Error getting full field label for ${fieldName} in table ${tableMetaData?.name}: ${e}`);
-         return fieldName
+         return fieldName;
       }
    }