Merged feature/CE-798-quick-filters into integration/sprint-35

.circleci/config.yml

@@ -2,12 +2,12 @@ version: 2.1
 
 orbs:
   node: circleci/node@5.1.0
-  browser-tools: circleci/browser-tools@1.4.7
+  browser-tools: circleci/browser-tools@1.4.6
 
 executors:
   java17:
     docker:
-      - image: 'cimg/openjdk:17.0.9'
+      - image: 'cimg/openjdk:17.0'
 
 commands:
   install_java17:
@@ -115,7 +115,7 @@ workflows:
           context: [ qqq-maven-registry-credentials, kingsrook-slack, build-qqq-sample-app ]
           filters:
             branches:
-              ignore: /(main|integration.*)/
+              ignore: /main/
             tags:
               ignore: /(version|snapshot)-.*/
   deploy:
@@ -124,7 +124,7 @@ workflows:
           context: [ qqq-maven-registry-credentials, kingsrook-slack, build-qqq-sample-app ]
           filters:
             branches:
-              only: /(main|integration.*)/
+              only: /main/
             tags:
               only: /(version|snapshot)-.*/
 

.eslintrc.json

@@ -28,7 +28,8 @@
    },
    "plugins": [
       "react",
-      "@typescript-eslint"
+      "@typescript-eslint",
+      "import"
    ],
    "rules": {
       "brace-style": [
@@ -42,6 +43,41 @@
             "SwitchCase": 1
          }
       ],
+      "import/extensions": [
+         "error",
+         "ignorePackages",
+         {
+            "ts": "never",
+            "tsx": "never",
+            "js": "never"
+         }
+      ],
+      "import/no-extraneous-dependencies": [
+         "error",
+         {
+            "devDependencies": true
+         }
+      ],
+      "import/order": [
+         "error",
+         {
+            "groups": [
+               "builtin", // Built-in imports (come from NodeJS native) go first
+               "external", // <- External imports
+               "internal", // <- Absolute imports
+               ["sibling", "parent"], // <- Relative imports, the sibling and parent types they can be mingled together
+               "index", // <- index imports
+               "unknown"
+            ],
+            "newlines-between": "never",
+            "alphabetize": {
+               /* sort in ascending order. Options: ["ignore", "asc", "desc"] */
+               "order": "asc",
+               /* ignore case. Options: [true, false] */
+               "caseInsensitive": true
+            }
+         }
+      ],
       "jsx-one-expression-per-line": "off",
       "max-len": "off",
       "no-console": "off",
@@ -78,6 +114,15 @@
       "quotes": [
          "error",
          "double"
+      ],
+      "sort-imports": [
+         "error",
+         {
+            "ignoreCase": false,
+            "ignoreDeclarationSort": true,
+            "ignoreMemberSort": true,
+            "allowSeparatedGroups": false
+         }
       ]
    },
    "settings": {

package.json

@@ -6,14 +6,13 @@
       "@auth0/auth0-react": "1.10.2",
       "@emotion/react": "11.7.1",
       "@emotion/styled": "11.6.0",
-      "@kingsrook/qqq-frontend-core": "1.0.97",
+      "@kingsrook/qqq-frontend-core": "1.0.85",
       "@mui/icons-material": "5.4.1",
       "@mui/material": "5.11.1",
       "@mui/styles": "5.11.1",
       "@mui/system": "5.11.1",
       "@mui/x-data-grid": "5.17.23",
       "@mui/x-data-grid-pro": "5.17.23",
-      "@mui/x-date-pickers": "7.1.1",
       "@mui/x-license-pro": "5.12.3",
       "@react-jvectormap/core": "1.0.1",
       "@react-jvectormap/unitedstates": "1.0.1",
@@ -27,7 +26,6 @@
       "chroma-js": "2.4.2",
       "cmdk": "0.2.0",
       "datejs": "1.0.0-rc3",
-      "dayjs": "1.11.10",
       "downshift": "3.2.10",
       "faker": "5.5.3",
       "form-data": "4.0.0",
@@ -41,10 +39,7 @@
       "react-ace": "10.1.0",
       "react-chartjs-2": "3.0.4",
       "react-cookie": "4.1.1",
-      "react-dnd": "16.0.1",
-      "react-dnd-html5-backend": "16.0.1",
       "react-dom": "18.0.0",
-      "react-ga4": "2.1.0",
       "react-github-btn": "1.2.1",
       "react-google-drive-picker": "^1.2.0",
       "react-markdown": "9.0.1",

pom.xml

@@ -66,7 +66,7 @@
       <dependency>
          <groupId>com.kingsrook.qqq</groupId>
          <artifactId>qqq-backend-core</artifactId>
-         <version>0.20.0-20240308.165846-65</version>
+         <version>feature-CE-798-quick-filters-20240123.205854-1</version>
       </dependency>
       <dependency>
          <groupId>org.slf4j</groupId>

src/App.tsx

@@ -33,8 +33,12 @@ import CssBaseline from "@mui/material/CssBaseline";
 import Icon from "@mui/material/Icon";
 import {ThemeProvider} from "@mui/material/styles";
 import {LicenseInfo} from "@mui/x-license-pro";
-import CommandMenu from "CommandMenu";
 import jwt_decode from "jwt-decode";
+import React, {JSXElementConstructor, Key, ReactElement, useEffect, useState,} from "react";
+import {useCookies} from "react-cookie";
+import {Navigate, Route, Routes, useLocation, useSearchParams,} from "react-router-dom";
+import {Md5} from "ts-md5/dist/md5";
+import CommandMenu from "CommandMenu";
 import QContext from "QContext";
 import Sidenav from "qqq/components/horseshoe/sidenav/SideNav";
 import theme from "qqq/components/legacy/Theme";
@@ -49,13 +53,8 @@ import EntityEdit from "qqq/pages/records/edit/RecordEdit";
 import RecordQuery from "qqq/pages/records/query/RecordQuery";
 import RecordDeveloperView from "qqq/pages/records/view/RecordDeveloperView";
 import RecordView from "qqq/pages/records/view/RecordView";
-import GoogleAnalyticsUtils, {AnalyticsModel} from "qqq/utils/GoogleAnalyticsUtils";
 import Client from "qqq/utils/qqq/Client";
 import ProcessUtils from "qqq/utils/qqq/ProcessUtils";
-import React, {JSXElementConstructor, Key, ReactElement, useEffect, useState,} from "react";
-import {useCookies} from "react-cookie";
-import {Navigate, Route, Routes, useLocation, useSearchParams,} from "react-router-dom";
-import {Md5} from "ts-md5/dist/md5";
 
 
 const qController = Client.getInstance();
@@ -80,7 +79,7 @@ export default function App()
    Client.setUnauthorizedCallback(() =>
    {
       logout();
-   });
+   })
 
    const shouldStoreNewToken = (newToken: string, oldToken: string): boolean =>
    {
@@ -105,7 +104,7 @@ export default function App()
          // if the old (local storage) token is expired, then we need to store the new one //
          ////////////////////////////////////////////////////////////////////////////////////
          const oldExp = oldJSON["exp"];
-         if (oldExp * 1000 < (new Date().getTime()))
+         if(oldExp * 1000 < (new Date().getTime()))
          {
             console.log("Access token in local storage was expired - so we should store a new one.");
             return (true);
@@ -115,21 +114,21 @@ export default function App()
          // remove the exp & iat values from what we compare - as they are always different from auth0 //
          // note, this is only deleting them from what we compare, not from what we'd store.           //
          ////////////////////////////////////////////////////////////////////////////////////////////////
-         delete newJSON["exp"];
-         delete newJSON["iat"];
-         delete oldJSON["exp"];
-         delete oldJSON["iat"];
+         delete newJSON["exp"]
+         delete newJSON["iat"]
+         delete oldJSON["exp"]
+         delete oldJSON["iat"]
 
          const different = JSON.stringify(newJSON) !== JSON.stringify(oldJSON);
-         if (different)
+         if(different)
          {
             console.log("Latest access token from auth0 has changed vs localStorage - so we should store a new one.");
          }
          return (different);
       }
-      catch (e)
+      catch(e)
       {
-         console.log("Caught in shouldStoreNewToken: " + e);
+         console.log("Caught in shouldStoreNewToken: " + e)
       }
 
       return (true);
@@ -161,7 +160,7 @@ export default function App()
                if (shouldStoreNewToken(accessToken, lsAccessToken))
                {
                   console.log("Sending accessToken to backend, requesting a sessionUUID...");
-                  const {uuid: newSessionUuid, values} = await qController.manageSession(accessToken, null);
+                  const newSessionUuid = await qController.manageSession(accessToken, null);
 
                   /////////////////////////////////////////////////////////////////////////////////////////////////////////////
                   // the request to the backend should send a header to set the cookie, so we don't need to do it ourselves. //
@@ -169,7 +168,6 @@ export default function App()
                   // setCookie(SESSION_UUID_COOKIE_NAME, newSessionUuid, {path: "/"});
 
                   localStorage.setItem("accessToken", accessToken);
-                  localStorage.setItem("sessionValues", JSON.stringify(values));
                   console.log("Got new sessionUUID from backend, and stored new accessToken");
                }
                else
@@ -187,7 +185,7 @@ export default function App()
             {
                console.log(`Error loading token: ${JSON.stringify(e)}`);
                qController.clearAuthenticationMetaDataLocalStorage();
-               localStorage.removeItem("accessToken");
+               localStorage.removeItem("accessToken")
                removeCookie(SESSION_UUID_COOKIE_NAME, {path: "/"});
                logout();
                return;
@@ -552,7 +550,7 @@ export default function App()
                });
             }
 
-            const pathToLabelMap: { [path: string]: string } = {};
+            const pathToLabelMap: {[path: string]: string} = {}
             for (let i = 0; i < appRoutesList.length; i++)
             {
                const route = appRoutesList[i];
@@ -577,11 +575,11 @@ export default function App()
             console.error(e);
             if (e instanceof QException)
             {
-               if ((e as QException).status === 401)
+               if ((e as QException).status === "401")
                {
                   console.log("Exception is a QException with status = 401.  Clearing some of localStorage & cookies");
                   qController.clearAuthenticationMetaDataLocalStorage();
-                  localStorage.removeItem("accessToken");
+                  localStorage.removeItem("accessToken")
                   removeCookie(SESSION_UUID_COOKIE_NAME, {path: "/"});
 
                   //////////////////////////////////////////////////////
@@ -658,30 +656,12 @@ export default function App()
 
    const [pageHeader, setPageHeader] = useState("" as string | JSX.Element);
    const [accentColor, setAccentColor] = useState("#0062FF");
-   const [accentColorLight, setAccentColorLight] = useState("#C0D6F7");
+   const [accentColorLight, setAccentColorLight] = useState("#C0D6F7")
    const [tableMetaData, setTableMetaData] = useState(null);
    const [tableProcesses, setTableProcesses] = useState(null);
    const [dotMenuOpen, setDotMenuOpen] = useState(false);
    const [keyboardHelpOpen, setKeyboardHelpOpen] = useState(false);
    const [helpHelpActive] = useState(queryParams.has("helpHelp"));
-   const [userId, setUserId] = useState(user?.email);
-
-   useEffect(() =>
-   {
-      setUserId(user?.email)
-   }, [user]);
-
-   
-   const [googleAnalyticsUtils] = useState(new GoogleAnalyticsUtils());
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function recordAnalytics(model: AnalyticsModel)
-   {
-      googleAnalyticsUtils.recordAnalytics(model)
-   }
-
 
    return (
 
@@ -695,7 +675,6 @@ export default function App()
             dotMenuOpen: dotMenuOpen,
             keyboardHelpOpen: keyboardHelpOpen,
             helpHelpActive: helpHelpActive,
-            userId: userId,
             setPageHeader: (header: string | JSX.Element) => setPageHeader(header),
             setAccentColor: (accentColor: string) => setAccentColor(accentColor),
             setAccentColorLight: (accentColorLight: string) => setAccentColorLight(accentColorLight),
@@ -703,7 +682,6 @@ export default function App()
             setTableProcesses: (tableProcesses: QProcessMetaData[]) => setTableProcesses(tableProcesses),
             setDotMenuOpen: (dotMenuOpent: boolean) => setDotMenuOpen(dotMenuOpent),
             setKeyboardHelpOpen: (keyboardHelpOpen: boolean) => setKeyboardHelpOpen(keyboardHelpOpen),
-            recordAnalytics: recordAnalytics,
             pathToLabelMap: pathToLabelMap,
             branding: branding
          }}>
@@ -729,4 +707,4 @@ export default function App()
          </QContext.Provider>
       )
    );
-}
+}

src/CommandMenu.tsx

@@ -36,7 +36,7 @@ import Icon from "@mui/material/Icon";
 import Typography from "@mui/material/Typography";
 import {makeStyles} from "@mui/styles";
 import {Command} from "cmdk";
-import React, {useContext, useEffect, useRef} from "react";
+import React, {useContext, useEffect, useRef, useState} from "react";
 import {useNavigate} from "react-router-dom";
 import QContext from "QContext";
 import HistoryUtils, {QHistoryEntry} from "qqq/utils/HistoryUtils";
@@ -174,9 +174,7 @@ const CommandMenu = ({metaData}: Props) =>
       })
       tableNames = tableNames.sort((a: string, b:string) =>
       {
-         const labelA = metaData.tables.get(a).label ?? "";
-         const labelB = metaData.tables.get(b).label ?? "";
-         return (labelA.localeCompare(labelB));
+         return (metaData.tables.get(a).label.localeCompare(metaData.tables.get(b).label));
       })
 
       const path = location.pathname;
@@ -224,9 +222,7 @@ const CommandMenu = ({metaData}: Props) =>
       })
       tableNames = tableNames.sort((a: string, b:string) =>
       {
-         const labelA = metaData.tables.get(a).label ?? "";
-         const labelB = metaData.tables.get(b).label ?? "";
-         return (labelA.localeCompare(labelB));
+         return (metaData.tables.get(a).label.localeCompare(metaData.tables.get(b).label));
       })
       return(
          <Command.Group heading="Tables">
@@ -256,9 +252,7 @@ const CommandMenu = ({metaData}: Props) =>
 
       appNames = appNames.sort((a: string, b:string) =>
       {
-         const labelA = getFullAppLabel(metaData.appTree, a, 1, "") ?? "";
-         const labelB = getFullAppLabel(metaData.appTree, b, 1, "") ?? "";
-         return (labelA.localeCompare(labelB));
+         return (getFullAppLabel(metaData.appTree, a, 1, "").localeCompare(getFullAppLabel(metaData.appTree, b, 1, "")));
       })
 
       return(
@@ -292,9 +286,7 @@ const CommandMenu = ({metaData}: Props) =>
 
       appNames = appNames.sort((a: string, b:string) =>
       {
-         const labelA = metaData.apps.get(a).label ?? "";
-         const labelB = metaData.apps.get(b).label ?? "";
-         return (labelA.localeCompare(labelB));
+         return (metaData.apps.get(a).label.localeCompare(metaData.apps.get(b).label));
       })
 
       const entryMap = new Map<string, boolean>();
@@ -362,7 +354,8 @@ const CommandMenu = ({metaData}: Props) =>
                   <Grid container columnSpacing={5} rowSpacing={1}>
                      <Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>n</span>Create a New Record</Grid>
                      <Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>r</span>Refresh the Query</Grid>
-                     <Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>f</span>Open the Filter Builder (Advanced mode only)</Grid>
+                     <Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>c</span>Open the Columns Panel</Grid>
+                     <Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>f</span>Open the Filter Panel</Grid>
                   </Grid>
 
                   <Typography variant="h6" pt={3}>Record View</Typography>

src/QContext.tsx

@@ -22,7 +22,6 @@
 import {QBrandingMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QBrandingMetaData";
 import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-import {AnalyticsModel} from "qqq/utils/GoogleAnalyticsUtils";
 import {createContext} from "react";
 
 interface QContext
@@ -48,18 +47,12 @@ interface QContext
    tableProcesses?: QProcessMetaData[];
    setTableProcesses?: (tableProcesses: QProcessMetaData[]) => void;
 
-   ///////////////////////////////////////////
-   // function to record an analytics event //
-   ///////////////////////////////////////////
-   recordAnalytics?: (model: AnalyticsModel) => void;
-
    ///////////////////////////////////
    // constants - no setters needed //
    ///////////////////////////////////
    pathToLabelMap?: {[path: string]: string};
    branding?: QBrandingMetaData;
    helpHelpActive?: boolean;
-   userId?: string;
 }
 
 const defaultState = {

src/main/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/MaterialDashboardAppMetaData.java

@@ -1,153 +0,0 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2023.  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/>.
- */
-
-package com.kingsrook.qqq.frontend.materialdashboard.model.metadata;
-
-
-import com.kingsrook.qqq.backend.core.model.metadata.layout.QAppMetaData;
-import com.kingsrook.qqq.backend.core.model.metadata.layout.QSupplementalAppMetaData;
-import com.kingsrook.qqq.backend.core.utils.CollectionUtils;
-
-
-/*******************************************************************************
- ** app-level meta-data for this module (handled as QSupplementalTableMetaData)
- *******************************************************************************/
-public class MaterialDashboardAppMetaData extends QSupplementalAppMetaData
-{
-   public static final String TYPE_NAME = "materialDashboard";
-
-   private Boolean showAppLabelOnHomeScreen = true;
-   private Boolean includeTableCountsOnHomeScreen = true;
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public static MaterialDashboardAppMetaData of(QAppMetaData app)
-   {
-      return ((MaterialDashboardAppMetaData) CollectionUtils.nonNullMap(app.getSupplementalMetaData()).get(TYPE_NAME));
-   }
-
-
-
-   /*******************************************************************************
-    ** either get the supplemental meta dat attached to an app - or create a new one
-    ** and attach it to the app, and return that.
-    *******************************************************************************/
-   public static MaterialDashboardAppMetaData ofOrWithNew(QAppMetaData app)
-   {
-      MaterialDashboardAppMetaData materialDashboardAppMetaData = of(app);
-
-      if(materialDashboardAppMetaData == null)
-      {
-         materialDashboardAppMetaData = new MaterialDashboardAppMetaData();
-         app.withSupplementalMetaData(materialDashboardAppMetaData);
-      }
-
-      return (materialDashboardAppMetaData);
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   @Override
-   public boolean includeInFullFrontendMetaData()
-   {
-      return (true);
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   @Override
-   public String getType()
-   {
-      return TYPE_NAME;
-   }
-
-
-
-   /*******************************************************************************
-    ** Getter for showAppLabelOnHomeScreen
-    *******************************************************************************/
-   public Boolean getShowAppLabelOnHomeScreen()
-   {
-      return (this.showAppLabelOnHomeScreen);
-   }
-
-
-
-   /*******************************************************************************
-    ** Setter for showAppLabelOnHomeScreen
-    *******************************************************************************/
-   public void setShowAppLabelOnHomeScreen(Boolean showAppLabelOnHomeScreen)
-   {
-      this.showAppLabelOnHomeScreen = showAppLabelOnHomeScreen;
-   }
-
-
-
-   /*******************************************************************************
-    ** Fluent setter for showAppLabelOnHomeScreen
-    *******************************************************************************/
-   public MaterialDashboardAppMetaData withShowAppLabelOnHomeScreen(Boolean showAppLabelOnHomeScreen)
-   {
-      this.showAppLabelOnHomeScreen = showAppLabelOnHomeScreen;
-      return (this);
-   }
-
-
-
-   /*******************************************************************************
-    ** Getter for includeTableCountsOnHomeScreen
-    *******************************************************************************/
-   public Boolean getIncludeTableCountsOnHomeScreen()
-   {
-      return (this.includeTableCountsOnHomeScreen);
-   }
-
-
-
-   /*******************************************************************************
-    ** Setter for includeTableCountsOnHomeScreen
-    *******************************************************************************/
-   public void setIncludeTableCountsOnHomeScreen(Boolean includeTableCountsOnHomeScreen)
-   {
-      this.includeTableCountsOnHomeScreen = includeTableCountsOnHomeScreen;
-   }
-
-
-
-   /*******************************************************************************
-    ** Fluent setter for includeTableCountsOnHomeScreen
-    *******************************************************************************/
-   public MaterialDashboardAppMetaData withIncludeTableCountsOnHomeScreen(Boolean includeTableCountsOnHomeScreen)
-   {
-      this.includeTableCountsOnHomeScreen = includeTableCountsOnHomeScreen;
-      return (this);
-   }
-
-}

src/main/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/MaterialDashboardIconRoleNames.java

@@ -28,5 +28,4 @@ package com.kingsrook.qqq.frontend.materialdashboard.model.metadata;
 public interface MaterialDashboardIconRoleNames
 {
    String TOP_RIGHT_INSIDE_CARD = "topRightInsideCard";
-   String TOP_LEFT_INSIDE_CARD = "topLeftInsideCard";
 }

src/main/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/MaterialDashboardTableMetaData.java

@@ -22,7 +22,6 @@
 package com.kingsrook.qqq.frontend.materialdashboard.model.metadata;
 
 
-import java.util.ArrayList;
 import java.util.HashSet;
 import java.util.List;
 import java.util.Set;
@@ -31,8 +30,6 @@ import com.kingsrook.qqq.backend.core.model.metadata.QInstance;
 import com.kingsrook.qqq.backend.core.model.metadata.tables.QSupplementalTableMetaData;
 import com.kingsrook.qqq.backend.core.model.metadata.tables.QTableMetaData;
 import com.kingsrook.qqq.backend.core.utils.CollectionUtils;
-import com.kingsrook.qqq.backend.core.utils.StringUtils;
-import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRule;
 
 
 /*******************************************************************************
@@ -40,11 +37,8 @@ import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.Fi
  *******************************************************************************/
 public class MaterialDashboardTableMetaData extends QSupplementalTableMetaData
 {
-   public static final String TYPE = "materialDashboard";
-
    private List<List<String>> gotoFieldNames;
-   private List<String>       defaultQuickFilterFieldNames;
-   private List<FieldRule>    fieldRules;
+   private List<String> defaultQuickFilterFieldNames;
 
 
    /*******************************************************************************
@@ -64,25 +58,10 @@ public class MaterialDashboardTableMetaData extends QSupplementalTableMetaData
    @Override
    public String getType()
    {
-      return (TYPE);
+      return ("materialDashboard");
    }
 
 
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public static MaterialDashboardTableMetaData ofOrWithNew(QTableMetaData table)
-   {
-      MaterialDashboardTableMetaData supplementalMetaData = (MaterialDashboardTableMetaData) table.getSupplementalMetaData(TYPE);
-      if(supplementalMetaData == null)
-      {
-         supplementalMetaData = new MaterialDashboardTableMetaData();
-         table.withSupplementalMetaData(supplementalMetaData);
-      }
-
-      return (supplementalMetaData);
-   }
-
 
    /*******************************************************************************
     ** Getter for gotoFieldNames
@@ -131,22 +110,6 @@ public class MaterialDashboardTableMetaData extends QSupplementalTableMetaData
          validateListOfFieldNames(tableMetaData, gotoFieldNameSubList, qInstanceValidator, prefix + "gotoFieldNames: ");
       }
       validateListOfFieldNames(tableMetaData, defaultQuickFilterFieldNames, qInstanceValidator, prefix + "defaultQuickFilterFieldNames: ");
-
-      for(FieldRule fieldRule : CollectionUtils.nonNullList(fieldRules))
-      {
-         qInstanceValidator.assertCondition(fieldRule.getTrigger() != null, prefix + "has a fieldRule without a trigger");
-         qInstanceValidator.assertCondition(fieldRule.getAction() != null, prefix + "has a fieldRule without an action");
-
-         if(qInstanceValidator.assertCondition(StringUtils.hasContent(fieldRule.getSourceField()), prefix + "has a fieldRule without a sourceField"))
-         {
-            qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldRule.getSourceField()), prefix + "has a fieldRule with an unrecognized sourceField: " + fieldRule.getSourceField());
-         }
-
-         if(qInstanceValidator.assertCondition(StringUtils.hasContent(fieldRule.getTargetField()), prefix + "has a fieldRule without a targetField"))
-         {
-            qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldRule.getTargetField()), prefix + "has a fieldRule with an unrecognized targetField: " + fieldRule.getTargetField());
-         }
-      }
    }
 
 
@@ -161,7 +124,7 @@ public class MaterialDashboardTableMetaData extends QSupplementalTableMetaData
       {
          if(qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldName), prefix + " unrecognized field name: " + fieldName))
          {
-            qInstanceValidator.assertCondition(!usedNames.contains(fieldName), prefix + "has a duplicated field name: " + fieldName);
+            qInstanceValidator.assertCondition(!usedNames.contains(fieldName), prefix + " has a duplicated field name: " + fieldName);
             usedNames.add(fieldName);
          }
       }
@@ -198,51 +161,4 @@ public class MaterialDashboardTableMetaData extends QSupplementalTableMetaData
       return (this);
    }
 
-
-   /*******************************************************************************
-    ** Getter for fieldRules
-    *******************************************************************************/
-   public List<FieldRule> getFieldRules()
-   {
-      return (this.fieldRules);
-   }
-
-
-
-   /*******************************************************************************
-    ** Setter for fieldRules
-    *******************************************************************************/
-   public void setFieldRules(List<FieldRule> fieldRules)
-   {
-      this.fieldRules = fieldRules;
-   }
-
-
-
-   /*******************************************************************************
-    ** Fluent setter for fieldRules
-    *******************************************************************************/
-   public MaterialDashboardTableMetaData withFieldRules(List<FieldRule> fieldRules)
-   {
-      this.fieldRules = fieldRules;
-      return (this);
-   }
-
-
-
-   /*******************************************************************************
-    ** Fluent setter for fieldRules
-    *******************************************************************************/
-   public MaterialDashboardTableMetaData withFieldRule(FieldRule fieldRule)
-   {
-      if(this.fieldRules == null)
-      {
-         this.fieldRules = new ArrayList<>();
-      }
-
-      this.fieldRules.add(fieldRule);
-
-      return (this);
-   }
-
 }

src/main/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/fieldrules/FieldRule.java

@@ -1,165 +0,0 @@
-/*
- * 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/>.
- */
-
-package com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules;
-
-
-import java.io.Serializable;
-
-
-/*******************************************************************************
- ** definition of rules for how UI fields should behave.
- **
- ** e.g., one field being changed causing different things to be needed in another
- ** field.
- *******************************************************************************/
-public class FieldRule implements Serializable
-{
-   private FieldRuleTrigger trigger;
-   private String           sourceField;
-   private FieldRuleAction  action;
-   private String           targetField;
-
-
-
-   /*******************************************************************************
-    ** Getter for trigger
-    *******************************************************************************/
-   public FieldRuleTrigger getTrigger()
-   {
-      return (this.trigger);
-   }
-
-
-
-   /*******************************************************************************
-    ** Setter for trigger
-    *******************************************************************************/
-   public void setTrigger(FieldRuleTrigger trigger)
-   {
-      this.trigger = trigger;
-   }
-
-
-
-   /*******************************************************************************
-    ** Fluent setter for trigger
-    *******************************************************************************/
-   public FieldRule withTrigger(FieldRuleTrigger trigger)
-   {
-      this.trigger = trigger;
-      return (this);
-   }
-
-
-
-   /*******************************************************************************
-    ** Getter for sourceField
-    *******************************************************************************/
-   public String getSourceField()
-   {
-      return (this.sourceField);
-   }
-
-
-
-   /*******************************************************************************
-    ** Setter for sourceField
-    *******************************************************************************/
-   public void setSourceField(String sourceField)
-   {
-      this.sourceField = sourceField;
-   }
-
-
-
-   /*******************************************************************************
-    ** Fluent setter for sourceField
-    *******************************************************************************/
-   public FieldRule withSourceField(String sourceField)
-   {
-      this.sourceField = sourceField;
-      return (this);
-   }
-
-
-
-   /*******************************************************************************
-    ** Getter for action
-    *******************************************************************************/
-   public FieldRuleAction getAction()
-   {
-      return (this.action);
-   }
-
-
-
-   /*******************************************************************************
-    ** Setter for action
-    *******************************************************************************/
-   public void setAction(FieldRuleAction action)
-   {
-      this.action = action;
-   }
-
-
-
-   /*******************************************************************************
-    ** Fluent setter for action
-    *******************************************************************************/
-   public FieldRule withAction(FieldRuleAction action)
-   {
-      this.action = action;
-      return (this);
-   }
-
-
-
-   /*******************************************************************************
-    ** Getter for targetField
-    *******************************************************************************/
-   public String getTargetField()
-   {
-      return (this.targetField);
-   }
-
-
-
-   /*******************************************************************************
-    ** Setter for targetField
-    *******************************************************************************/
-   public void setTargetField(String targetField)
-   {
-      this.targetField = targetField;
-   }
-
-
-
-   /*******************************************************************************
-    ** Fluent setter for targetField
-    *******************************************************************************/
-   public FieldRule withTargetField(String targetField)
-   {
-      this.targetField = targetField;
-      return (this);
-   }
-
-}

src/main/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/fieldrules/FieldRuleAction.java

@@ -1,31 +0,0 @@
-/*
- * 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/>.
- */
-
-package com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules;
-
-
-/*******************************************************************************
- ** possible actions associated with field rules
- *******************************************************************************/
-public enum FieldRuleAction
-{
-   CLEAR_TARGET_FIELD
-}

src/main/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/fieldrules/FieldRuleTrigger.java

@@ -1,31 +0,0 @@
-/*
- * 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/>.
- */
-
-package com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules;
-
-
-/*******************************************************************************
- ** possible triggers associated with field rules
- *******************************************************************************/
-public enum FieldRuleTrigger
-{
-   ON_CHANGE
-}

src/main/java/com/kingsrook/qqq/frontend/materialdashboard/savedreports/SavedReportTableFrontendMaterialDashboardEnricher.java

@@ -1,59 +0,0 @@
-/*
- * 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/>.
- */
-
-package com.kingsrook.qqq.frontend.materialdashboard.savedreports;
-
-
-import java.util.List;
-import com.kingsrook.qqq.backend.core.model.metadata.tables.QTableMetaData;
-import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.MaterialDashboardTableMetaData;
-import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRule;
-import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRuleAction;
-import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRuleTrigger;
-
-
-/*******************************************************************************
- ** Add frontend material dashboard enhacements to saved report table
- *******************************************************************************/
-public class SavedReportTableFrontendMaterialDashboardEnricher
-{
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public static void enrich(QTableMetaData tableMetaData)
-   {
-      MaterialDashboardTableMetaData materialDashboardTableMetaData = MaterialDashboardTableMetaData.ofOrWithNew(tableMetaData);
-
-      /////////////////////////////////////////////////////////////////////////
-      // make changes to the tableName field clear the value in these fields //
-      /////////////////////////////////////////////////////////////////////////
-      for(String targetField : List.of("queryFilterJson", "columnsJson", "pivotTableJson"))
-      {
-         materialDashboardTableMetaData.withFieldRule(new FieldRule()
-            .withSourceField("tableName")
-            .withTrigger(FieldRuleTrigger.ON_CHANGE)
-            .withAction(FieldRuleAction.CLEAR_TARGET_FIELD)
-            .withTargetField(targetField));
-      }
-   }
-
-}

src/qqq/components/audits/AuditBody.tsx

@@ -34,10 +34,10 @@ import ToggleButton from "@mui/material/ToggleButton";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
+import React, {JSXElementConstructor, useContext, useEffect, useState} from "react";
 import QContext from "QContext";
 import Client from "qqq/utils/qqq/Client";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
-import React, {useContext, useEffect, useState} from "react";
 
 interface Props
 {
@@ -58,19 +58,19 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
    const [limit, setLimit] = useState(1000);
    const [statusString, setStatusString] = useState("Loading audits...");
    const [auditsByDate, setAuditsByDate] = useState([] as QRecord[][]);
-   const [auditDetailMap, setAuditDetailMap] = useState(null as Map<number, JSX.Element[]>);
-   const [fieldChangeMap, setFieldChangeMap] = useState(null as Map<number, JSX.Element>);
+   const [auditDetailMap, setAuditDetailMap] = useState(null as Map<number, JSX.Element[]>)
+   const [fieldChangeMap, setFieldChangeMap] = useState(null as Map<number, JSX.Element>)
    const [sortDirection, setSortDirection] = useState(localStorage.getItem("audit.sortDirection") === "true");
    const {accentColor} = useContext(QContext);
 
    function wrapValue(value: any): JSX.Element
    {
-      return <span style={{fontWeight: "500", color: " rgb(123, 128, 154)"}}>{value}</span>;
+      return <span style={{fontWeight: "500", color: " rgb(123, 128, 154)"}}>{value}</span>
    }
 
    function wasValue(value: any): JSX.Element
    {
-      return <span style={{fontWeight: "100", color: " rgb(123, 128, 154)"}}>{value}</span>;
+      return <span style={{fontWeight: "100", color: " rgb(123, 128, 154)"}}>{value}</span>
    }
 
    function getAuditDetailFieldChangeRow(qRecord: QRecord): JSX.Element | null
@@ -79,14 +79,10 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
       const fieldName = qRecord.values.get("auditDetail.fieldName");
       const oldValue = qRecord.values.get("auditDetail.oldValue");
       const newValue = qRecord.values.get("auditDetail.newValue");
-      if (fieldName && (oldValue !== null || newValue !== null))
+      if(fieldName && (oldValue !== null || newValue !== null))
       {
-         const fieldLabel = tableMetaData?.fields?.get(fieldName)?.label ?? fieldName;
-         return (<tr>
-            <td>{fieldLabel}</td>
-            <td>{oldValue}</td>
-            <td>{newValue}</td>
-         </tr>);
+         const fieldLabel = tableMetaData?.fields?.get(fieldName)?.label ?? fieldName
+         return (<tr><td>{fieldLabel}</td><td>{oldValue}</td><td>{newValue}</td></tr>)
       }
       return (null);
    }
@@ -97,22 +93,22 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
       const fieldName = qRecord.values.get("auditDetail.fieldName");
       const oldValue = qRecord.values.get("auditDetail.oldValue");
       const newValue = qRecord.values.get("auditDetail.newValue");
-      if (fieldName && (oldValue !== null || newValue !== null))
+      if(fieldName && (oldValue !== null || newValue !== null))
       {
          const fieldLabel = tableMetaData?.fields?.get(fieldName)?.label ?? fieldName;
-         if (oldValue !== undefined && newValue !== undefined)
+         if(oldValue !== undefined && newValue !== undefined)
          {
             return (<>{fieldLabel}: Changed from {(oldValue)} to <b>{(newValue)}</b></>);
          }
-         else if (newValue !== undefined)
+         else if(newValue !== undefined)
          {
             return (<>{fieldLabel}: Set to <b>{(newValue)}</b></>);
          }
-         else if (oldValue !== undefined)
+         else if(oldValue !== undefined)
          {
             return (<>{fieldLabel}: Removed value {(oldValue)}</>);
          }
-         else if (message)
+         else if(message)
          {
             return (<>{message}</>);
          }
@@ -181,7 +177,7 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
          }
          */
       }
-      else if (message)
+      else if(message)
       {
          return (<>{message}</>);
       }
@@ -202,22 +198,22 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
             new QFilterOrderBy("timestamp", sortDirection),
             new QFilterOrderBy("id", sortDirection),
             new QFilterOrderBy("auditDetail.id", true)
-         ], null, "AND", 0, limit);
+         ], "AND", 0, limit);
 
          ///////////////////////////////
          // fetch audits in try-catch //
          ///////////////////////////////
-         let audits = [] as QRecord[];
+         let audits = [] as QRecord[]
          try
          {
             audits = await qController.query("audit", filter, [new QueryJoin("auditDetail", true, "LEFT")]);
             setAudits(audits);
          }
-         catch (e)
+         catch(e)
          {
             if (e instanceof QException)
             {
-               if ((e as QException).status === 403)
+               if ((e as QException).status === "403")
                {
                   setStatusString("You do not have permission to view audits");
                   return;
@@ -237,33 +233,33 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
          //////////////////////////////////////////////////////////////////////////////////////////////////////////
          // group the audits by auditId (e.g., this is a list that joined audit & auditDetail, so un-flatten it) //
          //////////////////////////////////////////////////////////////////////////////////////////////////////////
-         const unflattenedAudits: QRecord[] = [];
+         const unflattenedAudits: QRecord[] = []
          const detailMap: Map<number, JSX.Element[]> = new Map();
          const fieldChangeRowsMap: Map<number, JSX.Element[]> = new Map();
          for (let i = 0; i < audits.length; i++)
          {
             let id = audits[i].values.get("id");
-            if (i == 0 || unflattenedAudits[unflattenedAudits.length - 1].values.get("id") != id)
+            if(i == 0 || unflattenedAudits[unflattenedAudits.length-1].values.get("id") != id)
             {
                unflattenedAudits.push(audits[i]);
             }
 
             let auditDetail = getAuditDetailElement(audits[i]);
-            if (auditDetail)
+            if(auditDetail)
             {
-               if (!detailMap.has(id))
+               if(!detailMap.has(id))
                {
                   detailMap.set(id, []);
                }
 
-               detailMap.get(id).push(auditDetail);
+               detailMap.get(id).push(auditDetail)
             }
 
             // table version, probably not to commit
             let fieldChangeRow = getAuditDetailFieldChangeRow(audits[i]);
-            if (auditDetail)
+            if(auditDetail)
             {
-               if (!fieldChangeRowsMap.has(id))
+               if(!fieldChangeRowsMap.has(id))
                {
                   fieldChangeRowsMap.set(id, []);
                }
@@ -277,7 +273,7 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
          for (let i = 0; i < unflattenedAudits.length; i++)
          {
             let id = unflattenedAudits[i].values.get("id");
-            if (fieldChangeRowsMap.has(id) && fieldChangeRowsMap.get(id).length > 0)
+            if(fieldChangeRowsMap.has(id) && fieldChangeRowsMap.get(id).length > 0)
             {
                const fieldChangeTable = (
                   <table style={{fontSize: "0.875rem"}} className="auditDetailTable" cellSpacing="0">
@@ -292,11 +288,11 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
                         {fieldChangeRowsMap.get(id).map((row, key) => <React.Fragment key={key}>{row}</React.Fragment>)}
                      </tbody>
                   </table>
-               );
+               )
                fieldChangeMap.set(id, fieldChangeTable);
             }
          }
-         setFieldChangeMap(fieldChangeMap);
+         setFieldChangeMap(fieldChangeMap)
 
          //////////////////////////////
          // group the audits by date //
@@ -354,7 +350,7 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
    const changeSortDirection = () =>
    {
       setAudits([]);
-      const newSortDirection = !sortDirection;
+      const newSortDirection = !sortDirection
       setSortDirection(newSortDirection);
       localStorage.setItem("audit.sortDirection", String(newSortDirection));
    };

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[], disabledFields?: DisabledFields)
+   public static getFormData(qqqFormFields: QFieldMetaData[])
    {
       const dynamicFormFields: any = {};
       const formValidations: any = {};
 
       qqqFormFields.forEach((field) =>
       {
-         dynamicFormFields[field.name] = this.getDynamicField(field, disabledFields);
-         formValidations[field.name] = this.getValidationForField(field, disabledFields);
+         dynamicFormFields[field.name] = this.getDynamicField(field);
+         formValidations[field.name] = this.getValidationForField(field);
       });
 
       return {dynamicFormFields, formValidations};
    }
 
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public static getDynamicField(field: QFieldMetaData, disabledFields?: DisabledFields)
+   public static getDynamicField(field: QFieldMetaData)
    {
       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,
-         isEditable: effectiveIsEditable,
+         isRequired: field.isRequired,
+         isEditable: field.isEditable,
          type: fieldType,
          displayFormat: field.displayFormat,
          // todo invalidMsg: "Zipcode is not valid (e.g. 70000).",
@@ -118,18 +101,11 @@ class DynamicFormUtils
       });
    }
 
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public static getValidationForField(field: QFieldMetaData, disabledFields?: DisabledFields)
+   public static getValidationForField(field: QFieldMetaData)
    {
-      const effectiveIsEditable = field.isEditable && !this.isFieldDynamicallyDisabled(field.name, disabledFields);
-      const effectivelyIsRequired = field.isRequired && effectiveIsEditable;
-
-      if (effectivelyIsRequired)
+      if (field.isRequired)
       {
-         if (field.possibleValueSourceName)
+         if(field.possibleValueSourceName)
          {
             ////////////////////////////////////////////////////////////////////////////////////////////
             // the "nullable(true)" here doesn't mean that you're allowed to set the field to null... //
@@ -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/DynamicSelect.tsx

@@ -28,17 +28,16 @@ import Box from "@mui/material/Box";
 import Switch from "@mui/material/Switch";
 import TextField from "@mui/material/TextField";
 import {ErrorMessage, useFormikContext} from "formik";
+import React, {useEffect, useState} from "react";
 import colors from "qqq/assets/theme/base/colors";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import Client from "qqq/utils/qqq/Client";
-import React, {useEffect, useState} from "react";
 
 interface Props
 {
    tableName?: string;
    processName?: string;
-   fieldName?: string;
-   possibleValueSourceName?: string;
+   fieldName: string;
    overrideId?: string;
    fieldLabel: string;
    inForm: boolean;
@@ -58,8 +57,6 @@ interface Props
 DynamicSelect.defaultProps = {
    tableName: null,
    processName: null,
-   fieldName: null,
-   possibleValueSourceName: null,
    inForm: true,
    initialValue: null,
    initialDisplayValue: null,
@@ -76,78 +73,16 @@ DynamicSelect.defaultProps = {
    },
 };
 
-const {inputBorderColor} = colors;
-
-
-export const getAutocompleteOutlinedStyle = (isDisabled: boolean) =>
-{
-   return ({
-      "& .MuiOutlinedInput-root": {
-         borderRadius: "0.75rem",
-      },
-      "& .MuiInputBase-root": {
-         padding: "0.5rem",
-         background: isDisabled ? "#f0f2f5!important" : "initial",
-      },
-      "& .MuiOutlinedInput-root .MuiAutocomplete-input": {
-         padding: "0",
-         fontSize: "1rem"
-      },
-      "& .Mui-disabled .MuiOutlinedInput-notchedOutline": {
-         borderColor: inputBorderColor
-      }
-   });
-}
-
-
 const qController = Client.getInstance();
 
-function DynamicSelect({tableName, processName, fieldName, possibleValueSourceName, overrideId, fieldLabel, inForm, initialValue, initialDisplayValue, initialValues, onChange, isEditable, isMultiple, bulkEditMode, bulkEditSwitchChangeHandler, otherValues, variant, initiallyOpen}: Props)
+function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabel, inForm, initialValue, initialDisplayValue, initialValues, onChange, isEditable, isMultiple, bulkEditMode, bulkEditSwitchChangeHandler, otherValues, variant, initiallyOpen}: Props)
 {
    const [open, setOpen] = useState(initiallyOpen);
    const [options, setOptions] = useState<readonly QPossibleValue[]>([]);
    const [searchTerm, setSearchTerm] = useState(null);
    const [firstRender, setFirstRender] = useState(true);
    const [otherValuesWhenResultsWereLoaded, setOtherValuesWhenResultsWereLoaded] = useState(JSON.stringify(Object.fromEntries((otherValues))))
-
-   useEffect(() =>
-   {
-      if(tableName && processName)
-      {
-         console.log("DynamicSelect - you may not provide both a tableName and a processName")
-      }
-      if(tableName && !fieldName)
-      {
-         console.log("DynamicSelect - if you provide a tableName, you must also provide a fieldName");
-      }
-      if(processName && !fieldName)
-      {
-         console.log("DynamicSelect - if you provide a processName, you must also provide a fieldName");
-      }
-      if(fieldName && possibleValueSourceName)
-      {
-         console.log("DynamicSelect - if you provide a fieldName and a possibleValueSourceName, the possibleValueSourceName will be ignored");
-      }
-      if(!fieldName && !possibleValueSourceName)
-      {
-         console.log("DynamicSelect - you must provide either a fieldName (and a tableName or processName) or a possibleValueSourceName");
-      }
-      if(fieldName)
-      {
-         if(!tableName || !processName)
-         {
-            console.log("DynamicSelect - if you provide a fieldName, you must also provide a tableName or processName");
-         }
-      }
-      if(possibleValueSourceName)
-      {
-         if(tableName || processName)
-         {
-            console.log("DynamicSelect - if you provide a possibleValueSourceName, you should not also provide a tableName or processName");
-         }
-      }
-
-   }, [tableName, processName, fieldName, possibleValueSourceName]);
+   const {inputBorderColor} = colors;
 
    ////////////////////////////////////////////////////////////////////////////////////////////////
    // default value - needs to be an array (from initialValues (array) prop) for multiple mode - //
@@ -198,7 +133,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
       (async () =>
       {
          // console.log(`doing a search with ${searchTerm}`);
-         const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, fieldName ?? possibleValueSourceName, searchTerm ?? "", null, otherValues);
+         const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, fieldName, searchTerm ?? "", null, otherValues);
 
          if(tableMetaData == null && tableName)
          {
@@ -231,7 +166,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
             setLoading(true);
             setOptions([]);
             console.log("Refreshing possible values...");
-            const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, fieldName ?? possibleValueSourceName, searchTerm ?? "", null, otherValues);
+            const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, fieldName, searchTerm ?? "", null, otherValues);
             setLoading(false);
             setOptions([ ...results ]);
             setOtherValuesWhenResultsWereLoaded(JSON.stringify(Object.fromEntries(otherValues)));
@@ -271,7 +206,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
             onChange(value ? new QPossibleValue(value) : null);
          }
       }
-      else if(setFieldValueRef && fieldName)
+      else if(setFieldValueRef)
       {
          setFieldValueRef(fieldName, value ? value.id : null);
       }
@@ -347,13 +282,28 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
    let autocompleteSX = {};
    if (variant == "outlined")
    {
-      autocompleteSX = getAutocompleteOutlinedStyle(isDisabled);
+      autocompleteSX = {
+         "& .MuiOutlinedInput-root": {
+            borderRadius: "0.75rem",
+         },
+         "& .MuiInputBase-root": {
+            padding: "0.5rem",
+            background: isDisabled ? "#f0f2f5!important" : "initial",
+         },
+         "& .MuiOutlinedInput-root .MuiAutocomplete-input": {
+            padding: "0",
+            fontSize: "1rem"
+         },
+         "& .Mui-disabled .MuiOutlinedInput-notchedOutline": {
+            borderColor: inputBorderColor
+         }
+      }
    }
 
    const autocomplete = (
       <Box>
          <Autocomplete
-            id={overrideId ?? fieldName ?? possibleValueSourceName}
+            id={overrideId ?? fieldName}
             sx={autocompleteSX}
             open={open}
             fullWidth
@@ -433,7 +383,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
             inForm &&
             <Box mt={0.75}>
                <MDTypography component="div" variant="caption" color="error" fontWeight="regular">
-                  {!isDisabled && <div className="fieldErrorMessage"><ErrorMessage name={fieldName ?? possibleValueSourceName} render={msg => <span data-field-error="true">{msg}</span>} /></div>}
+                  {!isDisabled && <div className="fieldErrorMessage"><ErrorMessage name={fieldName} render={msg => <span data-field-error="true">{msg}</span>} /></div>}
                </MDTypography>
             </Box>
          }

src/qqq/components/misc/FieldAutoComplete.tsx

@@ -23,11 +23,9 @@
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-import {Box} from "@mui/material";
 import Autocomplete, {AutocompleteRenderOptionState} from "@mui/material/Autocomplete";
-import Icon from "@mui/material/Icon";
 import TextField from "@mui/material/TextField";
-import React, {ReactNode, useState} from "react";
+import React, {ReactNode} from "react";
 
 interface FieldAutoCompleteProps
 {
@@ -35,17 +33,10 @@ interface FieldAutoCompleteProps
    metaData: QInstance;
    tableMetaData: QTableMetaData;
    handleFieldChange: (event: any, newValue: any, reason: string) => void;
-   defaultValue?: { field: QFieldMetaData, table: QTableMetaData, fieldName: string };
+   defaultValue?: {field: QFieldMetaData, table: QTableMetaData, fieldName: string};
    autoFocus?: boolean;
    forceOpen?: boolean;
    hiddenFieldNames?: string[];
-   availableFieldNames?: string[];
-   variant?: "standard" | "filled" | "outlined";
-   label?: string;
-   textFieldSX?: any;
-   autocompleteSlotProps?: any;
-   hasError?: boolean;
-   noOptionsText?: string;
 }
 
 FieldAutoComplete.defaultProps =
@@ -53,29 +44,17 @@ FieldAutoComplete.defaultProps =
       defaultValue: null,
       autoFocus: false,
       forceOpen: null,
-      hiddenFieldNames: [],
-      availableFieldNames: [],
-      variant: "standard",
-      label: "Field",
-      textFieldSX: null,
-      autocompleteSlotProps: null,
-      hasError: false,
-      noOptionsText: "No options",
+      hiddenFieldNames: []
    };
 
-function makeFieldOptionsForTable(tableMetaData: QTableMetaData, fieldOptions: any[], isJoinTable: boolean, hiddenFieldNames: string[], availableFieldNames: string[], selectedFieldName: string)
+function makeFieldOptionsForTable(tableMetaData: QTableMetaData, fieldOptions: any[], isJoinTable: boolean, hiddenFieldNames: string[])
 {
    const sortedFields = [...tableMetaData.fields.values()].sort((a, b) => a.label.localeCompare(b.label));
    for (let i = 0; i < sortedFields.length; i++)
    {
       const fieldName = isJoinTable ? `${tableMetaData.name}.${sortedFields[i].name}` : sortedFields[i].name;
 
-      if (hiddenFieldNames && hiddenFieldNames.indexOf(fieldName) > -1 && fieldName != selectedFieldName)
-      {
-         continue;
-      }
-
-      if (availableFieldNames?.length && availableFieldNames.indexOf(fieldName) == -1)
+      if(hiddenFieldNames && hiddenFieldNames.indexOf(fieldName) > -1)
       {
          continue;
       }
@@ -84,16 +63,10 @@ function makeFieldOptionsForTable(tableMetaData: QTableMetaData, fieldOptions: a
    }
 }
 
-
-/*******************************************************************************
- ** Component for rendering a list of field names from a table as an auto-complete.
- *******************************************************************************/
-export default function FieldAutoComplete({id, metaData, tableMetaData, handleFieldChange, defaultValue, autoFocus, forceOpen, hiddenFieldNames, availableFieldNames, variant, label, textFieldSX, autocompleteSlotProps, hasError, noOptionsText}: FieldAutoCompleteProps): JSX.Element
+export default function FieldAutoComplete({id, metaData, tableMetaData, handleFieldChange, defaultValue, autoFocus, forceOpen, hiddenFieldNames}: FieldAutoCompleteProps): JSX.Element
 {
-   const [selectedFieldName, setSelectedFieldName] = useState(defaultValue ? defaultValue.fieldName : null);
-
    const fieldOptions: any[] = [];
-   makeFieldOptionsForTable(tableMetaData, fieldOptions, false, hiddenFieldNames, availableFieldNames, selectedFieldName);
+   makeFieldOptionsForTable(tableMetaData, fieldOptions, false, hiddenFieldNames);
    let fieldsGroupBy = null;
 
    if (tableMetaData.exposedJoins && tableMetaData.exposedJoins.length > 0)
@@ -104,7 +77,7 @@ export default function FieldAutoComplete({id, metaData, tableMetaData, handleFi
          if (metaData.tables.has(exposedJoin.joinTable.name))
          {
             fieldsGroupBy = (option: any) => `${option.table.label} fields`;
-            makeFieldOptionsForTable(exposedJoin.joinTable, fieldOptions, true, hiddenFieldNames, availableFieldNames, selectedFieldName);
+            makeFieldOptionsForTable(exposedJoin.joinTable, fieldOptions, true, hiddenFieldNames);
          }
       }
    }
@@ -157,48 +130,27 @@ export default function FieldAutoComplete({id, metaData, tableMetaData, handleFi
    // seems like, if we always add the open attribute, then if its false or null, then the autocomplete //
    // doesn't open at all... so, only add the attribute at all, if forceOpen is true                    //
    ///////////////////////////////////////////////////////////////////////////////////////////////////////
-   const alsoOpen: { [key: string]: any } = {};
-   if (forceOpen)
+   const alsoOpen: {[key: string]: any} = {}
+   if(forceOpen)
    {
       alsoOpen["open"] = forceOpen;
    }
 
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function onChange(event: any, newValue: any, reason: string)
-   {
-      setSelectedFieldName(newValue ? newValue.fieldName : null);
-      handleFieldChange(event, newValue, reason);
-   }
-
    return (
       <Autocomplete
          id={id}
-         renderInput={(params) =>
-         {
-            const inputProps = params.InputProps;
-            const originalEndAdornment = inputProps.endAdornment;
-            inputProps.endAdornment = <Box>
-               {hasError && <Icon color="error">error_outline</Icon>}
-               {originalEndAdornment}
-            </Box>;
-
-            return (<TextField {...params} autoFocus={autoFocus} label={label} variant={variant} sx={textFieldSX} autoComplete="off" type="search" InputProps={inputProps} />)
-         }}
+         renderInput={(params) => (<TextField {...params} autoFocus={autoFocus} label={"Field"} variant="standard" autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
          // @ts-ignore
          defaultValue={defaultValue}
          options={fieldOptions}
-         onChange={onChange}
+         onChange={handleFieldChange}
          isOptionEqualToValue={(option, value) => isFieldOptionEqual(option, value)}
          groupBy={fieldsGroupBy}
          getOptionLabel={(option) => getFieldOptionLabel(option)}
          renderOption={(props, option, state) => renderFieldOption(props, option, state)}
          autoSelect={true}
          autoHighlight={true}
-         slotProps={autocompleteSlotProps ?? {}}
-         noOptionsText={noOptionsText}
+         slotProps={{popper: {className: "filterCriteriaRowColumnPopper", style: {padding: 0, width: "250px"}}}}
          {...alsoOpen}
       />
 

src/qqq/components/misc/GotoRecordDialog.tsx

@@ -61,7 +61,7 @@ const qController = Client.getInstance();
 function hasGotoFieldNames(tableMetaData: QTableMetaData): boolean
 {
    const mdbMetaData = tableMetaData?.supplementalTableMetaData?.get("materialDashboard");
-   if (mdbMetaData && mdbMetaData.gotoFieldNames)
+   if(mdbMetaData && mdbMetaData.gotoFieldNames)
    {
       return (true);
    }
@@ -71,25 +71,25 @@ function hasGotoFieldNames(tableMetaData: QTableMetaData): boolean
 
 function GotoRecordDialog(props: Props): JSX.Element
 {
-   const fields: QFieldMetaData[] = [];
+   const fields: QFieldMetaData[] = []
 
    let pkey = props?.tableMetaData?.fields.get(props?.tableMetaData?.primaryKeyField);
    let addedPkey = false;
    const mdbMetaData = props?.tableMetaData?.supplementalTableMetaData?.get("materialDashboard");
-   if (mdbMetaData)
+   if(mdbMetaData)
    {
-      if (mdbMetaData.gotoFieldNames)
+      if(mdbMetaData.gotoFieldNames)
       {
-         for (let i = 0; i < mdbMetaData.gotoFieldNames.length; i++)
+         for(let i = 0; i<mdbMetaData.gotoFieldNames.length; i++)
          {
             // todo - multi-field keys!!
             let fieldName = mdbMetaData.gotoFieldNames[i][0];
             let field = props.tableMetaData.fields.get(fieldName);
-            if (field)
+            if(field)
             {
                fields.push(field);
 
-               if (field.name == pkey.name)
+               if(field.name == pkey.name)
                {
                   addedPkey = true;
                }
@@ -98,17 +98,17 @@ function GotoRecordDialog(props: Props): JSX.Element
       }
    }
 
-   if (pkey && !addedPkey)
+   if(pkey && !addedPkey)
    {
       fields.unshift(pkey);
    }
 
    const makeInitialValues = () =>
    {
-      const rs = {} as { [field: string]: string };
+      const rs = {} as {[field: string]: string};
       fields.forEach((field) => rs[field.name] = "");
       return (rs);
-   };
+   }
 
    const [error, setError] = useState("");
    const [values, setValues] = useState(makeInitialValues());
@@ -118,49 +118,49 @@ function GotoRecordDialog(props: Props): JSX.Element
    {
       values[fieldName] = newValue;
       setValues(JSON.parse(JSON.stringify(values)));
-   };
+   }
 
    const close = () =>
    {
       setError("");
       setValues(makeInitialValues());
       props.closeHandler();
-   };
+   }
 
    const keyPressed = (e: React.KeyboardEvent<HTMLDivElement>) =>
    {
       // @ts-ignore
       const targetId: string = e.target?.id;
 
-      if (e.key == "Esc")
+      if(e.key == "Esc")
       {
-         if (props.mayClose)
+         if(props.mayClose)
          {
             close();
          }
       }
-      else if (e.key == "Enter" && targetId?.startsWith("gotoInput-"))
+      else if(e.key == "Enter" && targetId?.startsWith("gotoInput-"))
       {
          const index = targetId?.replaceAll("gotoInput-", "");
          document.getElementById("gotoButton-" + index).click();
       }
-   };
+   }
 
    const closeRequested = () =>
    {
-      if (props.mayClose)
+      if(props.mayClose)
       {
          close();
       }
-   };
+   }
 
    const goClicked = async (fieldName: string) =>
    {
       setError("");
-      const filter = new QQueryFilter([new QFilterCriteria(fieldName, QCriteriaOperator.EQUALS, [values[fieldName]])], null, null, "AND", null, 10);
+      const filter = new QQueryFilter([new QFilterCriteria(fieldName, QCriteriaOperator.EQUALS, [values[fieldName]])], null, "AND", null, 10);
       try
       {
-         const queryResult = await qController.query(props.tableMetaData.name, filter, null, props.tableVariant);
+         const queryResult = await qController.query(props.tableMetaData.name, filter, null, props.tableVariant)
          if (queryResult.length == 0)
          {
             setError("Record not found.");
@@ -177,19 +177,19 @@ function GotoRecordDialog(props: Props): JSX.Element
             setTimeout(() => setError(""), 3000);
          }
       }
-      catch (e)
+      catch(e)
       {
          // @ts-ignore
          setError(`Error: ${(e && e.message) ? e.message : e}`);
          setTimeout(() => setError(""), 6000);
       }
-   };
+   }
 
-   if (props.tableMetaData)
+   if(props.tableMetaData)
    {
       if (fields.length == 0 && !error)
       {
-         setError("This table is not configured for this feature.");
+         setError("This table is not configured for this feature.")
       }
    }
 
@@ -244,7 +244,7 @@ function GotoRecordDialog(props: Props): JSX.Element
                : <Box>&nbsp;</Box>
          }
       </Dialog>
-   );
+   )
 }
 
 interface GotoRecordButtonProps
@@ -266,7 +266,7 @@ GotoRecordButton.defaultProps = {
 
 export function GotoRecordButton(props: GotoRecordButtonProps): JSX.Element
 {
-   const [gotoIsOpen, setGotoIsOpen] = useState(props.autoOpen);
+   const [gotoIsOpen, setGotoIsOpen] = useState(props.autoOpen)
 
    function openGoto()
    {
@@ -282,7 +282,7 @@ export function GotoRecordButton(props: GotoRecordButtonProps): JSX.Element
    return (
       <React.Fragment>
          {
-            props.buttonVisible && hasGotoFieldNames(props.tableMetaData) && <Button onClick={openGoto}>Go To...</Button>
+            props.buttonVisible && hasGotoFieldNames(props.tableMetaData) && <Button onClick={openGoto} >Go To...</Button>
          }
          <GotoRecordDialog metaData={props.metaData} tableMetaData={props.tableMetaData} tableVariant={props.tableVariant} isOpen={gotoIsOpen} closeHandler={closeGoto} mayClose={props.mayClose} subHeader={props.subHeader} />
       </React.Fragment>

src/qqq/components/misc/HelpContent.tsx

@@ -28,7 +28,7 @@ import QContext from "QContext";
 
 interface Props
 {
-   helpContents: null | QHelpContent | QHelpContent[];
+   helpContents: QHelpContent[];
    roles: string[];
    heading?: string;
    helpContentKey?: string;
@@ -93,27 +93,9 @@ const getMatchingHelpContent = (helpContents: QHelpContent[], roles: string[]):
 /*******************************************************************************
  ** test if a list of help contents would find any matches from a list of roles.
  *******************************************************************************/
-export const hasHelpContent = (helpContents: null | QHelpContent | QHelpContent[], roles: string[]) =>
+export const hasHelpContent = (helpContents: QHelpContent[], roles: string[]) =>
 {
-   return getMatchingHelpContent(nullOrSingletonOrArrayToArray(helpContents), roles) != null;
-}
-
-
-/*******************************************************************************
- **
- *******************************************************************************/
-const nullOrSingletonOrArrayToArray = (helpContents: null | QHelpContent | QHelpContent[]): QHelpContent[] =>
-{
-   let array: QHelpContent[] = [];
-   if(Array.isArray(helpContents))
-   {
-      array = helpContents;
-   }
-   else if(helpContents != null)
-   {
-      array.push(helpContents);
-   }
-   return (array);
+   return getMatchingHelpContent(helpContents, roles) != null;
 }
 
 
@@ -124,8 +106,7 @@ const nullOrSingletonOrArrayToArray = (helpContents: null | QHelpContent | QHelp
 function HelpContent({helpContents, roles, heading, helpContentKey}: Props): JSX.Element
 {
    const {helpHelpActive} = useContext(QContext);
-   const helpContentsArray = nullOrSingletonOrArrayToArray(helpContents);
-   let selectedHelpContent = getMatchingHelpContent(helpContentsArray, roles);
+   let selectedHelpContent = getMatchingHelpContent(helpContents, roles);
 
    let content = null;
    if (helpHelpActive)

src/qqq/components/misc/SavedViews.tsx

@@ -25,7 +25,8 @@ 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, Box, Button} from "@mui/material";
+import {Alert, Button, Link} from "@mui/material";
+import Box from "@mui/material/Box";
 import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
@@ -39,15 +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 {QueryScreenUsage} from "qqq/pages/records/query/RecordQuery";
 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
 {
@@ -59,17 +59,14 @@ interface Props
    view?: RecordQueryView;
    viewAsJson?: string;
    viewOnChangeCallback?: (selectedSavedViewId: number) => void;
-   loadingSavedView: boolean;
-   queryScreenUsage: QueryScreenUsage;
+   loadingSavedView: boolean
 }
 
-function SavedViews({qController, metaData, tableMetaData, currentSavedView, tableDefaultView, view, viewAsJson, viewOnChangeCallback, loadingSavedView, queryScreenUsage}: Props): JSX.Element
+function SavedViews({qController, metaData, tableMetaData, currentSavedView, tableDefaultView, view, viewAsJson, viewOnChangeCallback, loadingSavedView}: Props): JSX.Element
 {
    const navigate = useNavigate();
 
    const [savedViews, setSavedViews] = useState([] as QRecord[]);
-   const [yourSavedViews, setYourSavedViews] = useState([] as QRecord[]);
-   const [viewsSharedWithYou, setViewsSharedWithYou] = useState([] as QRecord[]);
    const [savedViewsMenu, setSavedViewsMenu] = useState(null);
    const [savedViewsHaveLoaded, setSavedViewsHaveLoaded] = useState(false);
    const [isSubmitting, setIsSubmitting] = useState(false);
@@ -90,17 +87,9 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    const RENAME_OPTION = "Rename...";
    const DELETE_OPTION = "Delete...";
    const CLEAR_OPTION = "New View";
-   const NEW_REPORT_OPTION = "Create Report from Current View";
+   const dropdownOptions = [DUPLICATE_OPTION, RENAME_OPTION, DELETE_OPTION, CLEAR_OPTION];
 
-   const {accentColor, accentColorLight, userId: currentUserId} = useContext(QContext);
-
-   /////////////////////////////////////////////////////////////////////////////////////////
-   // this component is used by <RecordQuery> - but that component has different usages - //
-   // e.g., the full-fledged query screen, but also, within other screens (e.g., a modal  //
-   // under the ReportSetupWidget).  So, there are some behaviors we only want when we're //
-   // on the full-fledged query screen, such as changing the URL with saved view ids.     //
-   /////////////////////////////////////////////////////////////////////////////////////////
-   const isQueryScreen = queryScreenUsage == "queryScreen";
+   const {accentColor, accentColorLight} = useContext(QContext);
 
    const openSavedViewsMenu = (event: any) => setSavedViewsMenu(event.currentTarget);
    const closeSavedViewsMenu = () => setSavedViewsMenu(null);
@@ -115,13 +104,13 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
          {
             setSavedViewsHaveLoaded(true);
          });
-   }, [location, tableMetaData]);
+   }, [location, tableMetaData])
 
 
    const baseView = currentSavedView ? JSON.parse(currentSavedView.values.get("viewJson")) as RecordQueryView : tableDefaultView;
    const viewDiffs = SavedViewUtils.diffViews(tableMetaData, baseView, view);
    let viewIsModified = false;
-   if (viewDiffs.length > 0)
+   if(viewDiffs.length > 0)
    {
       viewIsModified = true;
    }
@@ -131,7 +120,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
     *******************************************************************************/
    async function loadSavedViews()
    {
-      if (!tableMetaData)
+      if (! tableMetaData)
       {
          return;
       }
@@ -141,26 +130,10 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
 
       let savedViews = await makeSavedViewRequest("querySavedView", formData);
       setSavedViews(savedViews);
-
-      const yourSavedViews: QRecord[] = [];
-      const viewsSharedWithYou: QRecord[] = [];
-      for (let i = 0; i < savedViews.length; i++)
-      {
-         const record = savedViews[i];
-         if (record.values.get("userId") == currentUserId)
-         {
-            yourSavedViews.push(record);
-         }
-         else
-         {
-            viewsSharedWithYou.push(record);
-         }
-      }
-      setYourSavedViews(yourSavedViews);
-      setViewsSharedWithYou(viewsSharedWithYou);
    }
 
 
+
    /*******************************************************************************
     ** fired when a saved record is clicked from the dropdown
     *******************************************************************************/
@@ -169,13 +142,11 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
       setSaveFilterPopupOpen(false);
       closeSavedViewsMenu();
       viewOnChangeCallback(record.values.get("id"));
-      if (isQueryScreen)
-      {
-         navigate(`${metaData.getTablePathByName(tableMetaData.name)}/savedView/${record.values.get("id")}`);
-      }
+      navigate(`${metaData.getTablePathByName(tableMetaData.name)}/savedView/${record.values.get("id")}`);
    };
 
 
+
    /*******************************************************************************
     ** fired when a save option is selected from the save... button/dropdown combo
     *******************************************************************************/
@@ -187,12 +158,12 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
       setSaveFilterPopupOpen(true);
       setIsSaveFilterAs(false);
       setIsRenameFilter(false);
-      setIsDeleteFilter(false);
+      setIsDeleteFilter(false)
 
-      switch (optionName)
+      switch(optionName)
       {
          case SAVE_OPTION:
-            if (currentSavedView == null)
+            if(currentSavedView == null)
             {
                setSavedViewNameInputValue("");
             }
@@ -202,47 +173,25 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
             setIsSaveFilterAs(true);
             break;
          case CLEAR_OPTION:
-            setSaveFilterPopupOpen(false);
+            setSaveFilterPopupOpen(false)
             viewOnChangeCallback(null);
-            if (isQueryScreen)
-            {
-               navigate(metaData.getTablePathByName(tableMetaData.name));
-            }
+            navigate(metaData.getTablePathByName(tableMetaData.name));
             break;
          case RENAME_OPTION:
-            if (currentSavedView != null)
+            if(currentSavedView != null)
             {
                setSavedViewNameInputValue(currentSavedView.values.get("label"));
             }
             setIsRenameFilter(true);
             break;
          case DELETE_OPTION:
-            setIsDeleteFilter(true);
-            break;
-         case NEW_REPORT_OPTION:
-            createNewReport();
+            setIsDeleteFilter(true)
             break;
       }
-   };
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function createNewReport()
-   {
-      const defaultValues: { [key: string]: any } = {};
-      defaultValues.tableName = tableMetaData.name;
-
-      let filterForBackend = JSON.parse(JSON.stringify(view.queryFilter));
-      filterForBackend = FilterUtils.prepQueryFilterForBackend(tableMetaData, filterForBackend);
-
-      defaultValues.queryFilterJson = JSON.stringify(filterForBackend);
-      defaultValues.columnsJson = JSON.stringify(view.queryColumns);
-      navigate(`${metaData.getTablePathByName("savedReport")}/create#defaultValues=${encodeURIComponent(JSON.stringify(defaultValues))}`);
    }
 
 
+
    /*******************************************************************************
     ** fired when save or delete button saved on confirmation dialogs
     *******************************************************************************/
@@ -262,7 +211,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
             setSaveFilterPopupOpen(false);
             setSaveOptionsOpen(false);
 
-            await (async () =>
+            await(async() =>
             {
                handleDropdownOptionClick(CLEAR_OPTION);
             })();
@@ -278,18 +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)
             {
                formData.append("label", savedViewNameInputValue);
-               if (currentSavedView != null && isRenameFilter)
+               if(currentSavedView != null && isRenameFilter)
                {
                   formData.append("id", currentSavedView.values.get("id"));
                }
@@ -300,7 +243,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
                formData.append("label", currentSavedView?.values.get("label"));
             }
             const recordList = await makeSavedViewRequest("storeSavedView", formData);
-            await (async () =>
+            await(async() =>
             {
                if (recordList && recordList.length > 0)
                {
@@ -317,11 +260,11 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
       catch (e: any)
       {
          let message = JSON.stringify(e);
-         if (typeof e == "string")
+         if(typeof e == "string")
          {
             message = e;
          }
-         else if (typeof e == "object" && e.message)
+         else if(typeof e == "object" && e.message)
          {
             message = e.message;
          }
@@ -336,6 +279,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    }
 
 
+
    /*******************************************************************************
     ** hides/shows the save options
     *******************************************************************************/
@@ -345,6 +289,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    };
 
 
+
    /*******************************************************************************
     ** closes save options menu (on clickaway)
     *******************************************************************************/
@@ -359,6 +304,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    };
 
 
+
    /*******************************************************************************
     ** stores the current dialog input text to state
     *******************************************************************************/
@@ -368,6 +314,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    };
 
 
+
    /*******************************************************************************
     ** closes current dialog
     *******************************************************************************/
@@ -377,6 +324,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    };
 
 
+
    /*******************************************************************************
     ** make a request to the backend for various savedView processes
     *******************************************************************************/
@@ -385,7 +333,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
       /////////////////////////
       // fetch saved filters //
       /////////////////////////
-      let savedViews = [] as QRecord[];
+      let savedViews = [] as QRecord[]
       try
       {
          //////////////////////////////////////////////////////////////////
@@ -396,12 +344,12 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
          if (processResult instanceof QJobError)
          {
             const jobError = processResult as QJobError;
-            throw (jobError.error);
+            throw(jobError.error);
          }
          else
          {
             const result = processResult as QJobComplete;
-            if (result.values.savedViewList)
+            if(result.values.savedViewList)
             {
                for (let i = 0; i < result.values.savedViewList.length; i++)
                {
@@ -413,7 +361,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
       }
       catch (e)
       {
-         throw (e);
+         throw(e);
       }
 
       return (savedViews);
@@ -422,31 +370,20 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    const hasStorePermission = metaData?.processes.has("storeSavedView");
    const hasDeletePermission = metaData?.processes.has("deleteSavedView");
    const hasQueryPermission = metaData?.processes.has("querySavedView");
-   const hasSavedReportsPermission = metaData?.tables.has("savedReport");
 
    const tooltipMaxWidth = (maxWidth: string) =>
    {
-      return ({
-         slotProps: {
-            tooltip: {
-               sx: {
-                  maxWidth: maxWidth
-               }
+      return ({slotProps: {
+         tooltip: {
+            sx: {
+               maxWidth: maxWidth
             }
          }
-      });
-   };
+      }})
+   }
 
    const menuTooltipAttribs = {...tooltipMaxWidth("250px"), placement: "left", enterDelay: 1000} as TooltipProps;
 
-   let disabledBecauseNotOwner = false;
-   let notOwnerTooltipText = null;
-   if (currentSavedView && currentSavedView.values.get("userId") != currentUserId)
-   {
-      disabledBecauseNotOwner = true;
-      notOwnerTooltipText = "You may not save changes to this view, because you are not its owner.";
-   }
-
    const renderSavedViewsMenu = tableMetaData && (
       <Menu
          anchorEl={savedViewsMenu}
@@ -455,109 +392,68 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
          open={Boolean(savedViewsMenu)}
          onClose={closeSavedViewsMenu}
          keepMounted
-         PaperProps={{style: {maxHeight: "calc(100vh - 200px)", minWidth: "300px"}}}
+         PaperProps={{style: {maxHeight: "calc(100vh - 200px)", minHeight: "200px"}}}
       >
+         <MenuItem sx={{width: "300px"}} disabled style={{"opacity": "initial"}}><b>View Actions</b></MenuItem>
          {
-            isQueryScreen &&
-            <MenuItem sx={{width: "300px"}} disabled style={{"opacity": "initial"}}><b>View Actions</b></MenuItem>
-         }
-         {
-            isQueryScreen && hasStorePermission &&
-            <Tooltip {...menuTooltipAttribs} title={notOwnerTooltipText ?? <>Save your current filters, columns and settings, for quick re-use at a later time.<br /><br />You will be prompted to enter a name if you choose this option.</>}>
-               <span>
-                  <MenuItem disabled={disabledBecauseNotOwner} onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>
-                     <ListItemIcon><Icon>save</Icon></ListItemIcon>
-                     {currentSavedView ? "Save..." : "Save As..."}
-                  </MenuItem>
-               </span>
+            hasStorePermission &&
+            <Tooltip {...menuTooltipAttribs} title={<>Save your current filters, columns and settings, for quick re-use at a later time.<br /><br />You will be prompted to enter a name if you choose this option.</>}>
+               <MenuItem onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>
+                  <ListItemIcon><Icon>save</Icon></ListItemIcon>
+                  {currentSavedView ? "Save..." : "Save As..."}
+               </MenuItem>
             </Tooltip>
          }
          {
-            isQueryScreen && hasStorePermission && currentSavedView != null &&
-            <Tooltip {...menuTooltipAttribs} title={notOwnerTooltipText ?? "Change the name for this saved view."}>
-               <span>
-                  <MenuItem disabled={currentSavedView === null || disabledBecauseNotOwner} onClick={() => handleDropdownOptionClick(RENAME_OPTION)}>
-                     <ListItemIcon><Icon>edit</Icon></ListItemIcon>
-                     Rename...
-                  </MenuItem>
-               </span>
+            hasStorePermission && currentSavedView != null &&
+            <Tooltip {...menuTooltipAttribs} title="Change the name for this saved view.">
+               <MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(RENAME_OPTION)}>
+                  <ListItemIcon><Icon>edit</Icon></ListItemIcon>
+                  Rename...
+               </MenuItem>
             </Tooltip>
          }
          {
-            isQueryScreen && hasStorePermission && currentSavedView != null &&
+            hasStorePermission && currentSavedView != null &&
             <Tooltip {...menuTooltipAttribs} title="Save a new copy this view, with a different name, separate from the original.">
-               <span>
-                  <MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(DUPLICATE_OPTION)}>
-                     <ListItemIcon><Icon>content_copy</Icon></ListItemIcon>
-                     Save As...
-                  </MenuItem>
-               </span>
+               <MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(DUPLICATE_OPTION)}>
+                  <ListItemIcon><Icon>content_copy</Icon></ListItemIcon>
+                  Save As...
+               </MenuItem>
             </Tooltip>
          }
          {
-            isQueryScreen && hasDeletePermission && currentSavedView != null &&
-            <Tooltip {...menuTooltipAttribs} title={notOwnerTooltipText ?? "Delete this saved view."}>
-               <span>
-                  <MenuItem disabled={currentSavedView === null || disabledBecauseNotOwner} onClick={() => handleDropdownOptionClick(DELETE_OPTION)}>
-                     <ListItemIcon><Icon>delete</Icon></ListItemIcon>
-                     Delete...
-                  </MenuItem>
-               </span>
+            hasStorePermission && currentSavedView != null &&
+            <Tooltip {...menuTooltipAttribs} title="Delete this saved view.">
+               <MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(DELETE_OPTION)}>
+                  <ListItemIcon><Icon>delete</Icon></ListItemIcon>
+                  Delete...
+               </MenuItem>
             </Tooltip>
          }
          {
-            isQueryScreen &&
             <Tooltip {...menuTooltipAttribs} title="Create a new view of this table, resetting the filters and columns to their defaults.">
-               <span>
-                  <MenuItem onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>
-                     <ListItemIcon><Icon>monitor</Icon></ListItemIcon>
-                     New View
-                  </MenuItem>
-               </span>
+               <MenuItem onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>
+                  <ListItemIcon><Icon>monitor</Icon></ListItemIcon>
+                  New View
+               </MenuItem>
             </Tooltip>
          }
-         {
-            isQueryScreen && hasSavedReportsPermission &&
-            <Tooltip {...menuTooltipAttribs} title="Create a new Saved Report using your current view of this table as a starting point.">
-               <span>
-                  <MenuItem onClick={() => handleDropdownOptionClick(NEW_REPORT_OPTION)}>
-                     <ListItemIcon><Icon>article</Icon></ListItemIcon>
-                     Create Report from Current View
-                  </MenuItem>
-               </span>
-            </Tooltip>
-         }
-         {
-            isQueryScreen && <Divider />
-         }
+         <Divider/>
          <MenuItem disabled style={{"opacity": "initial"}}><b>Your Saved Views</b></MenuItem>
          {
-            yourSavedViews && yourSavedViews.length > 0 ? (
-               yourSavedViews.map((record: QRecord, index: number) =>
+            savedViews && savedViews.length > 0 ? (
+               savedViews.map((record: QRecord, index: number) =>
                   <MenuItem sx={{paddingLeft: "50px"}} key={`savedFiler-${index}`} onClick={() => handleSavedViewRecordOnClick(record)}>
                      {record.values.get("label")}
                   </MenuItem>
                )
-            ) : (
-               <MenuItem disabled sx={{opacity: "1 !important"}}>
+            ): (
+               <MenuItem>
                   <i>You do not have any saved views for this table.</i>
                </MenuItem>
             )
          }
-         <MenuItem disabled style={{"opacity": "initial"}}><b>Views Shared with you</b></MenuItem>
-         {
-            viewsSharedWithYou && viewsSharedWithYou.length > 0 ? (
-               viewsSharedWithYou.map((record: QRecord, index: number) =>
-                  <MenuItem sx={{paddingLeft: "50px"}} key={`savedFiler-${index}`} onClick={() => handleSavedViewRecordOnClick(record)}>
-                     {record.values.get("label")}
-                  </MenuItem>
-               )
-            ) : (
-               <MenuItem disabled sx={{opacity: "1 !important"}}>
-                  <i>You do not have any views shared with you for this table.</i>
-               </MenuItem>
-            )
-         }
       </Menu>
    );
 
@@ -566,7 +462,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    let buttonBorder = colors.grayLines.main;
    let buttonColor = colors.gray.main;
 
-   if (currentSavedView)
+   if(currentSavedView)
    {
       if (viewIsModified)
       {
@@ -594,23 +490,23 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
          color: buttonColor,
          backgroundColor: buttonBackground,
       }
-   };
+   }
 
    /*******************************************************************************
     **
     *******************************************************************************/
    function isSaveButtonDisabled(): boolean
    {
-      if (isSubmitting)
+      if(isSubmitting)
       {
          return (true);
       }
 
-      const haveInputText = (savedViewNameInputValue != null && savedViewNameInputValue.trim() != "");
+      const haveInputText = (savedViewNameInputValue != null && savedViewNameInputValue.trim() != "")
 
-      if (isSaveFilterAs || isRenameFilter || currentSavedView == null)
+      if(isSaveFilterAs || isRenameFilter || currentSavedView == null)
       {
-         if (!haveInputText)
+         if(!haveInputText)
          {
             return (true);
          }
@@ -639,7 +535,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
                      fontWeight: 500,
                      fontSize: "0.875rem",
                      p: "0.5rem",
-                     ...buttonStyles
+                     ... buttonStyles
                   }}
                >
                   <Icon sx={{mr: "0.5rem"}}>save</Icon>
@@ -652,29 +548,6 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
                <Box pl={2} pr={2} sx={{display: "flex", alignItems: "center"}}>
                   {
                      !currentSavedView && viewIsModified && <>
-                        {
-                           isQueryScreen && <>
-                              <Tooltip {...tooltipMaxWidth("24rem")} sx={{cursor: "pointer"}} title={<>
-                                 <b>Unsaved Changes</b>
-                                 <ul style={{padding: "0.5rem 1rem"}}>
-                                    {
-                                       viewDiffs.map((s: string, i: number) => <li key={i}>{s}</li>)
-                                    }
-                                 </ul>
-                              </>}>
-                                 <Button disableRipple={true} sx={linkButtonStyle} onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>Save View As&hellip;</Button>
-                              </Tooltip>
-
-                              {/* vertical rule */}
-                              <Box display="inline-block" borderLeft={`1px solid ${colors.grayLines.main}`} height="1rem" width="1px" position="relative" />
-                           </>
-                        }
-
-                        <Button disableRipple={true} sx={{color: colors.gray.main, ...linkButtonStyle}} onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>Reset All Changes</Button>
-                     </>
-                  }
-                  {
-                     isQueryScreen && currentSavedView && viewIsModified && <>
                         <Tooltip {...tooltipMaxWidth("24rem")} sx={{cursor: "pointer"}} title={<>
                            <b>Unsaved Changes</b>
                            <ul style={{padding: "0.5rem 1rem"}}>
@@ -682,49 +555,35 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
                                  viewDiffs.map((s: string, i: number) => <li key={i}>{s}</li>)
                               }
                            </ul>
-                           {
-                              notOwnerTooltipText && <i>{notOwnerTooltipText}</i>
-                           }
                         </>}>
-                           <Box display="inline" sx={{...linkButtonStyle, p: 0, cursor: "default", position: "relative", top: "-1px"}}>{viewDiffs.length} Unsaved Change{viewDiffs.length == 1 ? "" : "s"}</Box>
+                           <Button disableRipple={true} sx={linkButtonStyle} onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>Save View As&hellip;</Button>
                         </Tooltip>
 
-                        {disabledBecauseNotOwner ? <>&nbsp;&nbsp;</> : <Button disableRipple={true} sx={linkButtonStyle} onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>Save&hellip;</Button>}
-
                         {/* vertical rule */}
                         <Box display="inline-block" borderLeft={`1px solid ${colors.grayLines.main}`} height="1rem" width="1px" position="relative" />
 
-                        <Button disableRipple={true} sx={{color: colors.gray.main, ...linkButtonStyle}} onClick={() => handleSavedViewRecordOnClick(currentSavedView)}>Reset All Changes</Button>
+                        <Button disableRipple={true} sx={{color: colors.gray.main, ... linkButtonStyle}} onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>Reset All Changes</Button>
                      </>
                   }
                   {
-                     !isQueryScreen && currentSavedView &&
-                     <Box>
-                        <Box display="inline-block" fontSize="0.875rem" fontWeight="500" sx={{position: "relative", top: "-1px"}}>
-                           {currentSavedView.values.get("label")}
-                        </Box>
+                     currentSavedView && viewIsModified && <>
+                        <Tooltip {...tooltipMaxWidth("24rem")} sx={{cursor: "pointer"}} title={<>
+                           <b>Unsaved Changes</b>
+                           <ul style={{padding: "0.5rem 1rem"}}>
+                              {
+                                 viewDiffs.map((s: string, i: number) => <li key={i}>{s}</li>)
+                              }
+                           </ul></>}>
+                           <Box display="inline" sx={{...linkButtonStyle, p: 0, cursor: "default", position: "relative", top: "-1px"}}>{viewDiffs.length} Unsaved Change{viewDiffs.length == 1 ? "" : "s"}</Box>
+                        </Tooltip>
 
-                        {
-                           viewIsModified &&
-                           <>
-                              <Tooltip {...tooltipMaxWidth("24rem")} sx={{cursor: "pointer"}} title={<>
-                                 <b>Changes</b>
-                                 <ul style={{padding: "0.5rem 1rem"}}>
-                                    {
-                                       viewDiffs.map((s: string, i: number) => <li key={i}>{s}</li>)
-                                    }
-                                 </ul>
-                              </>}>
-                                 <Box display="inline" ml="0.25rem" mr="0.25rem" sx={{...linkButtonStyle, p: 0, cursor: "default", position: "relative", top: "-1px"}}>with {viewDiffs.length} Change{viewDiffs.length == 1 ? "" : "s"}</Box>
-                              </Tooltip>
-                              <Button disableRipple={true} sx={{color: colors.gray.main, ...linkButtonStyle}} onClick={() => handleSavedViewRecordOnClick(currentSavedView)}>Reset Changes</Button>
-                           </>
-                        }
+                        <Button disableRipple={true} sx={linkButtonStyle} onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>Save&hellip;</Button>
 
                         {/* vertical rule */}
-                        <Box display="inline-block" ml="0.25rem" borderLeft={`1px solid ${colors.grayLines.main}`} height="1rem" width="1px" position="relative" />
-                        <Button disableRipple={true} sx={{color: colors.gray.main, ...linkButtonStyle}} onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>Reset to New View</Button>
-                     </Box>
+                        <Box display="inline-block" borderLeft={`1px solid ${colors.grayLines.main}`} height="1rem" width="1px" position="relative" />
+
+                        <Button disableRipple={true} sx={{color: colors.gray.main, ... linkButtonStyle}} onClick={() => handleSavedViewRecordOnClick(currentSavedView)}>Reset All Changes</Button>
+                     </>
                   }
                </Box>
             </Box>
@@ -753,15 +612,15 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
                         ) : (
                            isSaveFilterAs ? (
                               <DialogTitle id="alert-dialog-title">Save View As</DialogTitle>
-                           ) : (
+                           ):(
                               isRenameFilter ? (
                                  <DialogTitle id="alert-dialog-title">Rename View</DialogTitle>
-                              ) : (
+                              ):(
                                  <DialogTitle id="alert-dialog-title">Update Existing View</DialogTitle>
                               )
                            )
                         )
-                     ) : (
+                     ):(
                         <DialogTitle id="alert-dialog-title">Save New View</DialogTitle>
                      )
                   }
@@ -772,12 +631,12 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
                         </Box>
                      ) : ("")}
                      {
-                        (!currentSavedView || isSaveFilterAs || isRenameFilter) && !isDeleteFilter ? (
+                        (! currentSavedView || isSaveFilterAs || isRenameFilter) && ! isDeleteFilter ? (
                            <Box>
                               {
                                  isSaveFilterAs ? (
                                     <Box mb={3}>Enter a name for this new saved view.</Box>
-                                 ) : (
+                                 ):(
                                     <Box mb={3}>Enter a new name for this saved view.</Box>
                                  )
                               }
@@ -795,10 +654,10 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
                                  }}
                               />
                            </Box>
-                        ) : (
+                        ):(
                            isDeleteFilter ? (
                               <Box>Are you sure you want to delete the view {`'${currentSavedView?.values.get("label")}'`}?</Box>
-                           ) : (
+                           ):(
                               <Box>Are you sure you want to update the view {`'${currentSavedView?.values.get("label")}'`}?</Box>
                            )
                         )
@@ -810,7 +669,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
                         isDeleteFilter ?
                            <QDeleteButton onClickHandler={handleFilterDialogButtonOnClick} disabled={isSubmitting} />
                            :
-                           <QSaveButton label="Save" onClickHandler={handleFilterDialogButtonOnClick} disabled={isSaveButtonDisabled()} />
+                           <QSaveButton label="Save" onClickHandler={handleFilterDialogButtonOnClick} disabled={isSaveButtonDisabled()}/>
                      }
                   </DialogActions>
                </Dialog>

src/qqq/components/query/AdvancedQueryPreview.tsx

@@ -1,153 +0,0 @@
-/*
- * 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 {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
-import Box from "@mui/material/Box";
-import colors from "qqq/assets/theme/base/colors";
-import {validateCriteria} from "qqq/components/query/FilterCriteriaRow";
-import XIcon from "qqq/components/query/XIcon";
-import FilterUtils from "qqq/utils/qqq/FilterUtils";
-import React, {useState} from "react";
-
-interface AdvancedQueryPreviewProps
-{
-   tableMetaData: QTableMetaData;
-   queryFilter: QQueryFilter;
-   isEditable: boolean;
-   isQueryTooComplex: boolean;
-   removeCriteriaByIndexCallback: (index: number) => void;
-}
-
-/*******************************************************************************
- ** Box shown on query screen (and more??) to preview what a query looks like,
- ** as an "advanced" style/precursor-to-writing-your-own-query thing.
- *******************************************************************************/
-export default function AdvancedQueryPreview({tableMetaData, queryFilter, isEditable, isQueryTooComplex, removeCriteriaByIndexCallback}: AdvancedQueryPreviewProps): JSX.Element
-{
-   const [mouseOverElement, setMouseOverElement] = useState(null as string);
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function handleMouseOverElement(name: string)
-   {
-      setMouseOverElement(name);
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function handleMouseOutElement()
-   {
-      setMouseOverElement(null);
-   }
-
-
-
-   /*******************************************************************************
-    ** format the current query as a string for showing on-screen as a preview.
-    *******************************************************************************/
-   const queryToAdvancedString = (thisQueryFilter: QQueryFilter) =>
-   {
-      if (queryFilter == null || !queryFilter.criteria)
-      {
-         return (<span></span>);
-      }
-
-      let counter = 0;
-
-      return (
-         <React.Fragment>
-            {thisQueryFilter.criteria?.map((criteria, i) =>
-            {
-               const {criteriaIsValid} = validateCriteria(criteria, null);
-               if (criteriaIsValid)
-               {
-                  counter++;
-                  return (
-                     <span key={i} style={{marginBottom: "0.125rem"}} onMouseOver={() => handleMouseOverElement(`queryPreview-${i}`)} onMouseOut={() => handleMouseOutElement()}>
-                        {counter > 1 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{thisQueryFilter.booleanOperator}&nbsp;</span> : <span />}
-                        {FilterUtils.criteriaToHumanString(tableMetaData, criteria, true)}
-                        {isEditable && !isQueryTooComplex && (
-                           mouseOverElement == `queryPreview-${i}` && <span className={`advancedQueryPreviewX-${counter - 1}`}>
-                              <XIcon position="forAdvancedQueryPreview" onClick={() => removeCriteriaByIndexCallback(i)} /></span>
-                        )}
-                        {counter > 1 && i == thisQueryFilter.criteria?.length - 1 && thisQueryFilter.subFilters?.length > 0 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{thisQueryFilter.booleanOperator}&nbsp;</span> : <span />}
-                     </span>
-                  );
-               }
-               else
-               {
-                  return (<span />);
-               }
-            })}
-
-            {thisQueryFilter.subFilters?.length > 0 && (thisQueryFilter.subFilters.map((filter: QQueryFilter, j) =>
-            {
-               return (
-                  <React.Fragment key={j}>
-                     {j > 0 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{thisQueryFilter.booleanOperator}&nbsp;</span> : <span></span>}
-                     <span style={{display: "flex", marginRight: "0.20rem"}}>(</span>
-                     {queryToAdvancedString(filter)}
-                     <span style={{display: "flex", marginRight: "0.20rem"}}>)</span>
-                  </React.Fragment>
-               );
-            }))}
-         </React.Fragment>
-      );
-   };
-
-   const moreSX = isEditable ?
-      {
-         borderTop: `1px solid ${colors.grayLines.main}`,
-         boxShadow: "inset 0px 0px 4px 2px #EFEFED",
-         borderRadius: "0 0 0.75rem 0.75rem",
-      } :
-      {
-         borderRadius: "0.75rem",
-         border: `1px solid ${colors.grayLines.main}`,
-      }
-
-   return (
-      <Box whiteSpace="nowrap" display="flex" flexShrink={1} flexGrow={1} alignItems="center">
-         {
-            <Box
-               className="advancedQueryString"
-               display="inline-block"
-               width="100%"
-               sx={{fontSize: "1rem", background: "#FFFFFF"}}
-               minHeight={"2.5rem"}
-               p={"0.5rem"}
-               pb={"0.125rem"}
-               {...moreSX}
-            >
-               <Box display="flex" flexWrap="wrap" fontSize="0.875rem">
-                  {queryToAdvancedString(queryFilter)}
-               </Box>
-            </Box>
-         }
-      </Box>
-   )
-}

src/qqq/components/query/BasicAndAdvancedQueryControls.tsx

@@ -29,6 +29,7 @@ import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QC
 import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
 import {QFilterOrderBy} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterOrderBy";
 import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
+import {Badge, ToggleButton, ToggleButtonGroup} from "@mui/material";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
@@ -37,23 +38,19 @@ import DialogContent from "@mui/material/DialogContent";
 import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
 import Icon from "@mui/material/Icon";
-import ToggleButton from "@mui/material/ToggleButton";
-import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
 import Tooltip from "@mui/material/Tooltip";
 import {GridApiPro} from "@mui/x-data-grid-pro/models/gridApiPro";
+import React, {forwardRef, useContext, useImperativeHandle, useReducer, useState} from "react";
 import QContext from "QContext";
 import colors from "qqq/assets/theme/base/colors";
 import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
-import AdvancedQueryPreview from "qqq/components/query/AdvancedQueryPreview";
 import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
 import FieldListMenu from "qqq/components/query/FieldListMenu";
 import {validateCriteria} from "qqq/components/query/FilterCriteriaRow";
 import QuickFilter, {quickFilterButtonStyles} from "qqq/components/query/QuickFilter";
 import XIcon from "qqq/components/query/XIcon";
-import {QueryScreenUsage} from "qqq/pages/records/query/RecordQuery";
 import FilterUtils from "qqq/utils/qqq/FilterUtils";
 import TableUtils from "qqq/utils/qqq/TableUtils";
-import React, {forwardRef, useContext, useImperativeHandle, useReducer, useState} from "react";
 
 interface BasicAndAdvancedQueryControlsProps
 {
@@ -77,34 +74,12 @@ interface BasicAndAdvancedQueryControlsProps
    /////////////////////////////////////////////////////////////////////////////////////////////
    queryFilterJSON: string;
 
-   queryScreenUsage: QueryScreenUsage;
-
    mode: string;
    setMode: (mode: string) => void;
 }
 
 let debounceTimeout: string | number | NodeJS.Timeout;
 
-
-/*******************************************************************************
- ** function to generate an element that says how a filter is sorted.
- *******************************************************************************/
-export function getCurrentSortIndicator(queryFilter: QQueryFilter, tableMetaData: QTableMetaData, toggleSortDirection: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void)
-{
-   if (queryFilter && queryFilter.orderBys && queryFilter.orderBys.length > 0)
-   {
-      const orderBy = queryFilter.orderBys[0];
-      const orderByFieldName = orderBy.fieldName;
-      const [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, orderByFieldName);
-      const fieldLabel = fieldTable.name == tableMetaData.name ? field.label : `${fieldTable.label}: ${field.label}`;
-      return <>Sort: {fieldLabel} <Icon onClick={toggleSortDirection} sx={{ml: "0.5rem"}}>{orderBy.isAscending ? "arrow_upward" : "arrow_downward"}</Icon></>;
-   }
-   else
-   {
-      return <>Sort...</>;
-   }
-}
-
 /*******************************************************************************
  ** Component to provide the basic & advanced query-filter controls for the
  ** RecordQueryOrig screen.
@@ -114,14 +89,14 @@ export function getCurrentSortIndicator(queryFilter: QQueryFilter, tableMetaData
  *******************************************************************************/
 const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryControlsProps, ref) =>
 {
-   const {metaData, tableMetaData, savedViewsComponent, columnMenuComponent, quickFilterFieldNames, setQuickFilterFieldNames, setQueryFilter, queryFilter, gridApiRef, queryFilterJSON, mode, setMode} = props;
+   const {metaData, tableMetaData, savedViewsComponent, columnMenuComponent, quickFilterFieldNames, setQuickFilterFieldNames, setQueryFilter, queryFilter, gridApiRef, queryFilterJSON, mode, setMode} = props
 
    /////////////////////
    // state variables //
    /////////////////////
    const [defaultQuickFilterFieldNames, setDefaultQuickFilterFieldNames] = useState(getDefaultQuickFilterFieldNames(tableMetaData));
    const [defaultQuickFilterFieldNameMap, setDefaultQuickFilterFieldNameMap] = useState(Object.fromEntries(defaultQuickFilterFieldNames.map(k => [k, true])));
-   const [addQuickFilterMenu, setAddQuickFilterMenu] = useState(null);
+   const [addQuickFilterMenu, setAddQuickFilterMenu] = useState(null)
    const [addQuickFilterOpenCounter, setAddQuickFilterOpenCounter] = useState(0);
    const [showClearFiltersWarning, setShowClearFiltersWarning] = useState(false);
    const [mouseOverElement, setMouseOverElement] = useState(null as string);
@@ -129,11 +104,6 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
 
    const {accentColor} = useContext(QContext);
 
-   /////////////////////////////////////////////////
-   // temporary, until we implement sub-filtering //
-   /////////////////////////////////////////////////
-   const [isQueryTooComplex, setIsQueryTooComplex] = useState(false);
-
    //////////////////////////////////////////////////////////////////////////////////
    // make some functions available to our parent - so it can tell us to do things //
    //////////////////////////////////////////////////////////////////////////////////
@@ -152,7 +122,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
          {
             return (mode);
          }
-      };
+      }
    });
 
 
@@ -206,7 +176,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
       let foundIndex = null;
       for (let i = 0; i < queryFilter?.criteria?.length; i++)
       {
-         if (queryFilter.criteria[i].fieldName == newCriteria.fieldName)
+         if(queryFilter.criteria[i].fieldName == newCriteria.fieldName)
          {
             queryFilter.criteria[i] = newCriteria;
             found = true;
@@ -215,9 +185,9 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
          }
       }
 
-      if (doClearCriteria)
+      if(doClearCriteria)
       {
-         if (found)
+         if(found)
          {
             queryFilter.criteria.splice(foundIndex, 1);
             setQueryFilter(queryFilter);
@@ -225,9 +195,9 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
          return;
       }
 
-      if (!found)
+      if(!found)
       {
-         if (!queryFilter.criteria)
+         if(!queryFilter.criteria)
          {
             queryFilter.criteria = [];
          }
@@ -235,9 +205,9 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
          found = true;
       }
 
-      if (found)
+      if(found)
       {
-         clearTimeout(debounceTimeout);
+         clearTimeout(debounceTimeout)
          debounceTimeout = setTimeout(() =>
          {
             setQueryFilter(queryFilter);
@@ -257,17 +227,17 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
       const matches: QFilterCriteriaWithId[] = [];
       for (let i = 0; i < queryFilter?.criteria?.length; i++)
       {
-         if (queryFilter.criteria[i].fieldName == fieldName)
+         if(queryFilter.criteria[i].fieldName == fieldName)
          {
             matches.push(queryFilter.criteria[i] as QFilterCriteriaWithId);
          }
       }
 
-      if (matches.length == 0)
+      if(matches.length == 0)
       {
          return (null);
       }
-      else if (matches.length == 1)
+      else if(matches.length == 1)
       {
          return (matches[0]);
       }
@@ -284,8 +254,8 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
     *******************************************************************************/
    const handleRemoveQuickFilterField = (fieldName: string): void =>
    {
-      const index = quickFilterFieldNames.indexOf(fieldName);
-      if (index >= 0)
+      const index = quickFilterFieldNames.indexOf(fieldName)
+      if(index >= 0)
       {
          //////////////////////////////////////
          // remove this field from the query //
@@ -306,7 +276,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    {
       setAddQuickFilterMenu(event.currentTarget);
       setAddQuickFilterOpenCounter(addQuickFilterOpenCounter + 1);
-   };
+   }
 
 
    /*******************************************************************************
@@ -315,7 +285,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    const closeAddQuickFilterMenu = () =>
    {
       setAddQuickFilterMenu(null);
-   };
+   }
 
 
    /*******************************************************************************
@@ -336,7 +306,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
       const fieldName = newValue ? newValue.fieldName : null;
       if (fieldName)
       {
-         if (defaultQuickFilterFieldNameMap[fieldName])
+         if(defaultQuickFilterFieldNameMap[fieldName])
          {
             return;
          }
@@ -352,12 +322,12 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
             ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
             // only do this when user has added the field (e.g., not when adding it because of a selected view or filter-in-url) //
             ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-            if (reason != "modeToggleClicked" && reason != "defaultFilterLoaded" && reason != "savedFilterSelected" && reason != "activatedView")
+            if(reason != "modeToggleClicked" && reason != "defaultFilterLoaded" && reason != "savedFilterSelected" && reason != "activatedView")
             {
                setTimeout(() => document.getElementById(`quickFilter.${fieldName}`)?.click(), 5);
             }
          }
-         else if (reason == "columnMenu")
+         else if(reason == "columnMenu")
          {
             //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
             // if field was already on-screen, but user clicked an option from the columnMenu, then open the quick-filter field //
@@ -376,13 +346,13 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    const handleFieldListMenuSelection = (field: QFieldMetaData, table: QTableMetaData): void =>
    {
       let fullFieldName = field.name;
-      if (table && table.name != tableMetaData.name)
+      if(table && table.name != tableMetaData.name)
       {
          fullFieldName = `${table.name}.${field.name}`;
       }
 
       addQuickFilterField({fieldName: fullFieldName}, "selectedFromAddFilterMenu");
-   };
+   }
 
 
    /*******************************************************************************
@@ -391,10 +361,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
     *******************************************************************************/
    const openFilterBuilder = (e: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>) =>
    {
-      if (!isQueryTooComplex)
-      {
-         gridApiRef.current.showFilterPanel();
-      }
+      gridApiRef.current.showFilterPanel();
    };
 
 
@@ -418,6 +385,45 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    {
       queryFilter.criteria.splice(index, 1);
       setQueryFilter(queryFilter);
+   }
+
+
+   /*******************************************************************************
+    ** format the current query as a string for showing on-screen as a preview.
+    *******************************************************************************/
+   const queryToAdvancedString = () =>
+   {
+      if(queryFilter == null || !queryFilter.criteria)
+      {
+         return (<span></span>);
+      }
+
+      let counter = 0;
+
+      return (
+         <Box display="flex" flexWrap="wrap" fontSize="0.875rem">
+            {queryFilter.criteria.map((criteria, i) =>
+            {
+               const {criteriaIsValid} = validateCriteria(criteria, null);
+               if(criteriaIsValid)
+               {
+                  counter++;
+
+                  return (
+                     <span key={i} style={{marginBottom: "0.125rem"}} onMouseOver={() => handleMouseOverElement(`queryPreview-${i}`)} onMouseOut={() => handleMouseOutElement()}>
+                        {counter > 1 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{queryFilter.booleanOperator}&nbsp;</span> : <span/>}
+                        {FilterUtils.criteriaToHumanString(tableMetaData, criteria, true)}
+                        {mouseOverElement == `queryPreview-${i}` && <span className={`advancedQueryPreviewX-${counter - 1}`}><XIcon position="forAdvancedQueryPreview" onClick={() => removeCriteriaByIndex(i)} /></span>}
+                     </span>
+                  );
+               }
+               else
+               {
+                  return (<span />);
+               }
+            })}
+         </Box>
+      );
    };
 
 
@@ -428,7 +434,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    {
       if (newValue)
       {
-         if (newValue == "basic")
+         if(newValue == "basic")
          {
             ////////////////////////////////////////////////////////////////////////////////
             // we're always allowed to go to advanced -                                   //
@@ -437,7 +443,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
             const {canFilterWorkAsBasic} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
             if (!canFilterWorkAsBasic)
             {
-               console.log("Query cannot work as basic - so - not allowing toggle to basic.");
+               console.log("Query cannot work as basic - so - not allowing toggle to basic.")
                return;
             }
 
@@ -464,16 +470,11 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
     *******************************************************************************/
    const ensureAllFilterCriteriaAreActiveQuickFilters = (tableMetaData: QTableMetaData, queryFilter: QQueryFilter, reason: "modeToggleClicked" | "defaultFilterLoaded" | "savedFilterSelected" | string, newMode?: string) =>
    {
-      if (!tableMetaData || !queryFilter)
+      if(!tableMetaData || !queryFilter)
       {
          return;
       }
 
-      //////////////////////////////////////////////
-      // set a flag if the query is 'too complex' //
-      //////////////////////////////////////////////
-      setIsQueryTooComplex(queryFilter.subFilters?.length > 0);
-
       const {canFilterWorkAsBasic} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
       if (!canFilterWorkAsBasic)
       {
@@ -484,7 +485,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
       }
 
       const modeToUse = newMode ?? mode;
-      if (modeToUse == "basic")
+      if(modeToUse == "basic")
       {
          for (let i = 0; i < queryFilter?.criteria?.length; i++)
          {
@@ -495,7 +496,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
             }
          }
       }
-   };
+   }
 
 
    /*******************************************************************************
@@ -507,22 +508,13 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
       for (let i = 0; i < queryFilter?.criteria?.length; i++)
       {
          const {criteriaIsValid} = validateCriteria(queryFilter.criteria[i], null);
-         if (criteriaIsValid)
+         if(criteriaIsValid)
          {
             count++;
          }
       }
-
-      /////////////////////////////////////////////////////////////
-      // recursively add any children filters to the total count //
-      /////////////////////////////////////////////////////////////
-      for (let i = 0; i < queryFilter.subFilters?.length; i++)
-      {
-         count += countValidCriteria(queryFilter.subFilters[i]);
-      }
-
       return count;
-   };
+   }
 
 
    /*******************************************************************************
@@ -531,11 +523,11 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    const handleSetSort = (field: QFieldMetaData, table: QTableMetaData, isAscending: boolean = true): void =>
    {
       const fullFieldName = table && table.name != tableMetaData.name ? `${table.name}.${field.name}` : field.name;
-      queryFilter.orderBys = [new QFilterOrderBy(fullFieldName, isAscending)];
+      queryFilter.orderBys = [new QFilterOrderBy(fullFieldName, isAscending)]
 
       setQueryFilter(queryFilter);
       forceUpdate();
-   };
+   }
 
 
    /*******************************************************************************
@@ -550,11 +542,11 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
       ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
       const isAscending = event.target.innerHTML == "arrow_upward";
       const isDescending = event.target.innerHTML == "arrow_downward";
-      if (isAscending || isDescending)
+      if(isAscending || isDescending)
       {
          handleSetSort(field, table, isAscending);
       }
-   };
+   }
 
 
    /*******************************************************************************
@@ -569,22 +561,30 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
          setQueryFilter(queryFilter);
          forceUpdate();
       }
-      catch (e)
+      catch(e)
       {
-         console.log(`Error toggling sort: ${e}`);
+         console.log(`Error toggling sort: ${e}`)
       }
    }
 
    /////////////////////////////////
    // set up the sort menu button //
    /////////////////////////////////
-   let sortButtonContents = getCurrentSortIndicator(queryFilter, tableMetaData, toggleSortDirection);
+   let sortButtonContents = <>Sort...</>
+   if(queryFilter && queryFilter.orderBys && queryFilter.orderBys.length > 0)
+   {
+      const orderBy = queryFilter.orderBys[0];
+      const orderByFieldName = orderBy.fieldName;
+      const [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, orderByFieldName);
+      const fieldLabel = fieldTable.name == tableMetaData.name ? field.label : `${fieldTable.label}: ${field.label}`;
+      sortButtonContents =  <>Sort: {fieldLabel} <Icon onClick={toggleSortDirection} sx={{ml: "0.5rem"}}>{orderBy.isAscending ? "arrow_upward" : "arrow_downward"}</Icon></>
+   }
 
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // this is being used as a version of like forcing that we get re-rendered if the query filter changes... //
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////
    const [lastIndex, setLastIndex] = useState(queryFilterJSON);
-   if (queryFilterJSON != lastIndex)
+   if(queryFilterJSON != lastIndex)
    {
       ensureAllFilterCriteriaAreActiveQuickFilters(tableMetaData, queryFilter, "defaultFilterLoaded");
       setLastIndex(queryFilterJSON);
@@ -594,22 +594,16 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    // set some status flags based on current filter //
    ///////////////////////////////////////////////////
    const hasValidFilters = queryFilter && countValidCriteria(queryFilter) > 0;
-   const {canFilterWorkAsBasic, canFilterWorkAsAdvanced, reasonsWhyItCannot} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
+   const {canFilterWorkAsBasic, reasonsWhyItCannot} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
    let reasonWhyBasicIsDisabled = null;
-   if (canFilterWorkAsAdvanced && reasonsWhyItCannot && reasonsWhyItCannot.length > 0)
+   if(reasonsWhyItCannot && reasonsWhyItCannot.length > 0)
    {
       reasonWhyBasicIsDisabled = <>
          Your current Filter cannot be managed using Basic mode because:
          <ul style={{marginLeft: "1rem"}}>
             {reasonsWhyItCannot.map((reason, i) => <li key={i}>{reason}</li>)}
          </ul>
-      </>;
-   }
-   if (isQueryTooComplex)
-   {
-      reasonWhyBasicIsDisabled = <>
-         Your current Filter is too complex to modify because it contains Sub-filters.
-      </>;
+      </>
    }
 
    const borderGray = colors.grayLines.main;
@@ -737,20 +731,20 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
                               <Button
                                  className="filterBuilderButton"
                                  onClick={(e) => openFilterBuilder(e)}
-                                 {...filterBuilderMouseEvents}
+                                 {... filterBuilderMouseEvents}
                                  startIcon={<Icon>build</Icon>}
                                  sx={{borderRadius: "0.75rem", padding: "0.5rem", pl: "1rem", fontSize: "0.875rem", fontWeight: 500, border: `1px solid ${accentColor}`, textTransform: "none"}}
                               >
                                  Filter Builder
                                  {
                                     countValidCriteria(queryFilter) > 0 &&
-                                    <Box {...filterBuilderMouseEvents} sx={{backgroundColor: accentColor, marginLeft: "0.25rem", minWidth: "1rem", fontSize: "0.75rem"}} borderRadius="50%" color="#FFFFFF" position="relative" top="-2px" className="filterBuilderCountBadge">
-                                       {countValidCriteria(queryFilter)}
+                                    <Box {... filterBuilderMouseEvents} sx={{backgroundColor: accentColor, marginLeft: "0.25rem", minWidth: "1rem", fontSize: "0.75rem"}} borderRadius="50%" color="#FFFFFF" position="relative" top="-2px" className="filterBuilderCountBadge">
+                                       {countValidCriteria(queryFilter) }
                                     </Box>
                                  }
                               </Button>
                               {
-                                 hasValidFilters && mouseOverElement == "filterBuilderButton" && <span {...filterBuilderMouseEvents} className="filterBuilderXIcon"><XIcon shade="accent" position="default" onClick={() => setShowClearFiltersWarning(true)} /></span>
+                                 hasValidFilters && mouseOverElement == "filterBuilderButton" && <span {... filterBuilderMouseEvents} className="filterBuilderXIcon"><XIcon shade="accent" position="default" onClick={() => setShowClearFiltersWarning(true)} /></span>
                               }
                            </>
                         </Tooltip>
@@ -769,7 +763,24 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
                         {sortMenuComponent}
                      </Box>
                   </Box>
-                  <AdvancedQueryPreview tableMetaData={tableMetaData} queryFilter={queryFilter} isEditable={true} isQueryTooComplex={isQueryTooComplex} removeCriteriaByIndexCallback={removeCriteriaByIndex} />
+                  <Box whiteSpace="nowrap" display="flex" flexShrink={1} flexGrow={1} alignItems="center">
+                     {
+                        <Box
+                           className="advancedQueryString"
+                           display="inline-block"
+                           borderTop={`1px solid ${borderGray}`}
+                           borderRadius="0 0 0.75rem 0.75rem"
+                           width="100%"
+                           sx={{fontSize: "1rem", background: "#FFFFFF"}}
+                           minHeight={"2.375rem"}
+                           p={"0.5rem"}
+                           pb={"0.125rem"}
+                           boxShadow={"inset 0px 0px 4px 2px #EFEFED"}
+                        >
+                           {queryToAdvancedString()}
+                        </Box>
+                     }
+                  </Box>
                </Box>
             }
          </Box>

src/qqq/components/query/ExportMenuItem.tsx

@@ -23,9 +23,8 @@ import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QT
 import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
 import MenuItem from "@mui/material/MenuItem";
 import {GridColDef, GridExportMenuItemProps} from "@mui/x-data-grid-pro";
-import QContext from "QContext";
+import React from "react";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
-import React, {useContext} from "react";
 
 interface QExportMenuItemProps extends GridExportMenuItemProps<{}>
 {
@@ -44,15 +43,11 @@ export default function ExportMenuItem(props: QExportMenuItemProps)
 {
    const {format, tableMetaData, totalRecords, columnsModel, columnVisibilityModel, queryFilter, hideMenu} = props;
 
-   const {recordAnalytics} = useContext(QContext);
-
    return (
       <MenuItem
          disabled={totalRecords === 0}
          onClick={() =>
          {
-            recordAnalytics({category: "tableEvents", action: "export", label: tableMetaData.label});
-
             ///////////////////////////////////////////////////////////////////////////////
             // build the list of visible fields.  note, not doing them in-order (in case //
             // the user did drag & drop), because column order model isn't right yet     //

src/qqq/components/query/FilterCriteriaRow.tsx

@@ -33,10 +33,10 @@ import MenuItem from "@mui/material/MenuItem";
 import Select, {SelectChangeEvent} from "@mui/material/Select/Select";
 import TextField from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
+import React, {ReactNode, SyntheticEvent, useState} from "react";
 import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
 import FilterCriteriaRowValues from "qqq/components/query/FilterCriteriaRowValues";
 import FilterUtils from "qqq/utils/qqq/FilterUtils";
-import React, {ReactNode, SyntheticEvent, useState} from "react";
 
 
 export enum ValueMode
@@ -398,7 +398,7 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
             criteria.values = [];
          }
 
-         if(newValue.valueMode && !newValue.implicitValues)
+         if(newValue.valueMode)
          {
             const requiredValueCount = getValueModeRequiredCount(newValue.valueMode);
             if(requiredValueCount != null && criteria.values.length > requiredValueCount)
@@ -484,9 +484,7 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
                : <span />}
          </Box>
          <Box display="inline-block" width={250} className="fieldColumn">
-            <FieldAutoComplete id={`field-${id}`} metaData={metaData} tableMetaData={tableMetaData} defaultValue={defaultFieldValue} handleFieldChange={handleFieldChange}
-               autocompleteSlotProps={{popper: {className: "filterCriteriaRowColumnPopper", style: {padding: 0, width: "250px"}}}}
-            />
+            <FieldAutoComplete id={`field-${id}`} metaData={metaData} tableMetaData={tableMetaData} defaultValue={defaultFieldValue} handleFieldChange={handleFieldChange} />
          </Box>
          <Box display="inline-block" width={200} className="operatorColumn">
             <Tooltip title={criteria.fieldName == null ? "You must select a field before you can select an operator" : null} enterDelay={tooltipEnterDelay}>

src/qqq/components/query/FilterCriteriaRowValues.tsx

@@ -94,24 +94,6 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
       document.getElementById(`${idPrefix}${criteria.id}`).focus();
    };
 
-
-
-   /*******************************************************************************
-    ** Event handler for key-down events - specifically added here, to stop pressing
-    ** 'tab' in a date or date-time from closing the quick-filter...
-    *******************************************************************************/
-   const handleKeyDown = (e: any) =>
-   {
-      if (field.type == QFieldType.DATE || field.type == QFieldType.DATE_TIME)
-      {
-         if(e.code == "Tab")
-         {
-            console.log("Tab on date or date-time - don't close me, just move to the next sub-field!...");
-            e.stopPropagation();
-         }
-      }
-   };
-
    const inputProps: any = {};
    inputProps.endAdornment = (
       <InputAdornment position="end">
@@ -128,7 +110,6 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
       autoComplete="off"
       type={type}
       onChange={(event) => valueChangeHandler(event, valueIndex)}
-      onKeyDown={handleKeyDown}
       value={value}
       InputLabelProps={inputLabelProps}
       InputProps={inputProps}

src/qqq/components/query/QuickFilter.tsx

@@ -30,7 +30,7 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Menu from "@mui/material/Menu";
 import TextField from "@mui/material/TextField";
-import React, {SyntheticEvent, useContext, useReducer, useState} from "react";
+import React, {SyntheticEvent, useContext, useState} from "react";
 import QContext from "QContext";
 import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
 import {getDefaultCriteriaValue, getOperatorOptions, getValueModeRequiredCount, OperatorOption, validateCriteria} from "qqq/components/query/FilterCriteriaRow";
@@ -148,10 +148,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
    const [anchorEl, setAnchorEl] = useState(null);
    const [isMouseOver, setIsMouseOver] = useState(false);
 
-   ////////////////////////////////////////////////////////////////////////////////////////////////////////
-   // copy the criteriaParam to a new object in here - so changes won't apply until user closes the menu //
-   ////////////////////////////////////////////////////////////////////////////////////////////////////////
-   const [criteria, setCriteria] = useState(criteriaParamIsCriteria(criteriaParam) ? Object.assign({}, criteriaParam) as QFilterCriteriaWithId : null);
+   const [criteria, setCriteria] = useState(criteriaParamIsCriteria(criteriaParam) ? criteriaParam as QFilterCriteriaWithId : null);
    const [id, setId] = useState(criteriaParamIsCriteria(criteriaParam) ? (criteriaParam as QFilterCriteriaWithId).id : ++seedId);
 
    const [operatorSelectedValue, setOperatorSelectedValue] = useState(getOperatorSelectedValue(operatorOptions, criteria, defaultOperator));
@@ -161,11 +158,6 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
 
    const {accentColor} = useContext(QContext);
 
-   //////////////////////
-   // ole' faithful... //
-   //////////////////////
-   const [, forceUpdate] = useReducer((x) => x + 1, 0);
-
 
    /*******************************************************************************
     **
@@ -190,30 +182,15 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
    if (criteriaParamIsCriteria(criteriaParam) && JSON.stringify(criteriaParam) !== JSON.stringify(criteria))
    {
-      if(isOpen)
-      {
-         ////////////////////////////////////////////////////////////////////////////////
-         // this was firing too-often for case where:  there was a criteria originally //
-         ////////////////////////////////////////////////////////////////////////////////
-         console.log("Not handling outside change (A), because dropdown is-open");
-      }
-      else
-      {
-         ////////////////////////////////////////////////////////////////////////////////////////////////////////
-         // copy the criteriaParam to a new object in here - so changes won't apply until user closes the menu //
-         ////////////////////////////////////////////////////////////////////////////////////////////////////////
-         const newCriteria = Object.assign({}, criteriaParam) as QFilterCriteriaWithId;
-         setCriteria(newCriteria);
-         const operatorOption = operatorOptions.filter(o => o.value == newCriteria.operator)[0];
-         setOperatorSelectedValue(operatorOption);
-         setOperatorInputValue(operatorOption.label);
-      }
+      const newCriteria = criteriaParam as QFilterCriteriaWithId;
+      setCriteria(newCriteria);
+      const operatorOption = operatorOptions.filter(o => o.value == newCriteria.operator)[0];
+      setOperatorSelectedValue(operatorOption);
+      setOperatorInputValue(operatorOption.label);
    }
 
    /*******************************************************************************
     ** Test if we need to construct a new criteria object
-    ** This is (at least for some cases) for when the criteria gets changed
-    ** from outside of this component - e.g., a reset on the query screen
     *******************************************************************************/
    const criteriaNeedsReset = (): boolean =>
    {
@@ -222,16 +199,6 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
          const defaultOperatorOption = operatorOptions.filter(o => o.value == defaultOperator)[0];
          if(criteria.operator !== defaultOperatorOption?.value || JSON.stringify(criteria.values) !== JSON.stringify(getDefaultCriteriaValue()))
          {
-            if(isOpen)
-            {
-               //////////////////////////////////////////////////////////////////////////////////
-               // this was firing too-often for case where:  there was no criteria originally, //
-               // so, by adding this is-open check, we eliminated those.                       //
-               //////////////////////////////////////////////////////////////////////////////////
-               console.log("Not handling outside change (B), because dropdown is-open");
-               return (false);
-            }
-
             return (true);
          }
       }
@@ -240,7 +207,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
    }
 
    /*******************************************************************************
-    ** Construct a new criteria object - resetting the values tied to the operator
+    ** Construct a new criteria object - resetting the values tied to the oprator
     ** autocomplete at the same time.
     *******************************************************************************/
    const makeNewCriteria = (): QFilterCriteria =>
@@ -274,11 +241,6 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
     *******************************************************************************/
    const closeMenu = () =>
    {
-      //////////////////////////////////////////////////////////////////////////////////
-      // when closing the menu, that's when we'll update the criteria from the caller //
-      //////////////////////////////////////////////////////////////////////////////////
-      updateCriteria(criteria, false, false);
-
       setIsOpen(false);
       setAnchorEl(null);
    };
@@ -309,7 +271,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
             criteria.values = [];
          }
 
-         if(newValue.valueMode && !newValue.implicitValues)
+         if(newValue.valueMode)
          {
             const requiredValueCount = getValueModeRequiredCount(newValue.valueMode);
             if(requiredValueCount != null && criteria.values.length > requiredValueCount)
@@ -324,8 +286,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
          setOperatorInputValue("");
       }
 
-      setCriteria(criteria);
-      forceUpdate();
+      updateCriteria(criteria, false, false);
    };
 
    /*******************************************************************************
@@ -359,8 +320,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
          criteria.values[valueIndex] = value;
       }
 
-      setCriteria(criteria);
-      forceUpdate();
+      updateCriteria(criteria, true, false);
    };
 
    /*******************************************************************************
@@ -440,18 +400,16 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
       buttonAdditionalStyles.color = "white !important";
       buttonClassName = "filterActive";
 
-      let valuesString = FilterUtils.getValuesString(fieldMetaData, criteria, 1, "+N");
-
-      ///////////////////////////////////////////
-      // don't show the Equals or In operators //
-      ///////////////////////////////////////////
-      let operatorString = (<>{operatorSelectedValue.label}&nbsp;</>);
-      if(operatorSelectedValue.value == QCriteriaOperator.EQUALS || operatorSelectedValue.value == QCriteriaOperator.IN)
+      let valuesString = FilterUtils.getValuesString(fieldMetaData, criteria);
+      if(fieldMetaData.type == QFieldType.BOOLEAN)
       {
-         operatorString = (<></>)
+         //////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+         // for booleans, in here, the operator-label is "equals yes" or "equals no", so we don't want the values string //
+         //////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+         valuesString = "";
       }
 
-      buttonContent = (<><span style={{fontWeight: 700}}>{buttonContent}:</span>&nbsp;<span style={{fontWeight: 400}}>{operatorString}{valuesString}</span></>);
+      buttonContent = (<><span style={{fontWeight: 700}}>{buttonContent}:</span>&nbsp;<span style={{fontWeight: 400}}>{operatorSelectedValue.label}&nbsp;{valuesString}</span></>);
    }
 
    const mouseEvents =
@@ -504,7 +462,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
    //////////////////////////////
    // return the button & menu //
    //////////////////////////////
-   const widthAndMaxWidth = fieldMetaData?.type == QFieldType.DATE_TIME ? 275 : 250
+   const widthAndMaxWidth = 250
    return (
       <>
          {button}
@@ -520,12 +478,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
                <Box display="inline-block" width={widthAndMaxWidth} maxWidth={widthAndMaxWidth} className="operatorColumn">
                   <Autocomplete
                      id={"criteriaOperator"}
-                     ////////////////////////////////////////////////////////////////////////////////////////////////////
-                     // ok, so, by default, if you type an 'o' as the first letter in the FilterCriteriaRowValues box, //
-                     // something is causing THIS element to become selected, if the first letter in its label is 'O'. //
-                     // ... work around is to put invisible &zwnj; entity as first character in label instead...       //
-                     ////////////////////////////////////////////////////////////////////////////////////////////////////
-                     renderInput={(params) => (<TextField {...params} label={<>&zwnj;Operator</>} variant="standard" autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
+                     renderInput={(params) => (<TextField {...params} label={"Operator"} variant="standard" autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
                      options={operatorOptions}
                      value={operatorSelectedValue as any}
                      inputValue={operatorInputValue}

src/qqq/components/sharing/ShareModal.tsx

@@ -1,482 +0,0 @@
-/*
- * 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 {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-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} from "@mui/material";
-import Autocomplete from "@mui/material/Autocomplete";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import Card from "@mui/material/Card";
-import Icon from "@mui/material/Icon";
-import Modal from "@mui/material/Modal";
-import TextField from "@mui/material/TextField";
-import Tooltip from "@mui/material/Tooltip/Tooltip";
-import Typography from "@mui/material/Typography";
-import FormData from "form-data";
-import colors from "qqq/assets/theme/base/colors";
-import {QCancelButton} from "qqq/components/buttons/DefaultButtons";
-import DynamicSelect, {getAutocompleteOutlinedStyle} from "qqq/components/forms/DynamicSelect";
-import Client from "qqq/utils/qqq/Client";
-import React, {useEffect, useReducer, useState} from "react";
-
-interface ShareModalProps
-{
-   open: boolean;
-   onClose: () => void;
-   tableMetaData: QTableMetaData;
-   record: QRecord;
-}
-
-ShareModal.defaultProps = {};
-
-
-interface CurrentShare
-{
-   shareId: any;
-   scopeId: string;
-   audienceType: string;
-   audienceId: any;
-   audienceLabel: string;
-}
-
-interface Scope
-{
-   id: string;
-   label: string;
-}
-
-const scopeOptions: Scope[] = [
-   {id: "READ_ONLY", label: "Read-Only"},
-   {id: "READ_WRITE", label: "Read and Edit"}
-];
-
-const defaultScope = scopeOptions[0];
-
-const qController = Client.getInstance();
-
-interface ShareableTableMetaData
-{
-   sharedRecordTableName: string;
-   assetIdFieldName: string;
-   scopeFieldName: string;
-   audienceTypesPossibleValueSourceName: string;
-   audiencePossibleValueSourceName: string;
-   thisTableOwnerIdFieldName: string;
-   audienceTypes: {[name: string]: any}; // values here are: ShareableAudienceType
-}
-
-/*******************************************************************************
- ** component containing a Modal dialog for sharing records
- *******************************************************************************/
-export default function ShareModal({open, onClose, tableMetaData, record}: ShareModalProps): JSX.Element
-{
-   const [statusString, setStatusString] = useState("Loading...");
-   const [alert, setAlert] = useState(null as string);
-
-   const [selectedAudienceOption, setSelectedAudienceOption] = useState(null as {id: string, label: string});
-   const [selectedAudienceType, setSelectedAudienceType] = useState(null);
-   const [selectedAudienceId, setSelectedAudienceId] = useState(null);
-   const [selectedScopeId, setSelectedScopeId] = useState(defaultScope.id);
-   const [submitting, setSubmitting] = useState(false);
-
-   const [currentShares, setCurrentShares] = useState([] as CurrentShare[])
-   const [needToLoadCurrentShares, setNeedToLoadCurrentShares] = useState(true);
-   const [everLoadedCurrentShares, setEverLoadedCurrentShares] = useState(false);
-
-   const shareableTableMetaData = tableMetaData.shareableTableMetaData as ShareableTableMetaData;
-
-   const [, forceUpdate] = useReducer((x) => x + 1, 0);
-
-   if(!shareableTableMetaData)
-   {
-      console.error(`Did not find a shareableTableMetaData on table ${tableMetaData.name}`);
-   }
-
-   /////////////////////////////////////////////////////////
-   // trigger initial load, and post any changes, re-load //
-   /////////////////////////////////////////////////////////
-   useEffect(() =>
-   {
-      if(needToLoadCurrentShares)
-      {
-         loadShares();
-      }
-   }, [needToLoadCurrentShares]);
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function close(event: object, reason: string)
-   {
-      if (reason === "backdropClick" || reason === "escapeKeyDown")
-      {
-         return;
-      }
-
-      onClose();
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function handleAudienceChange(value: any | any[], reason: string)
-   {
-      if(value)
-      {
-         const [audienceType, audienceId] = value.id.split(":");
-         setSelectedAudienceType(audienceType);
-         setSelectedAudienceId(audienceId);
-      }
-      else
-      {
-         setSelectedAudienceType(null);
-         setSelectedAudienceId(null);
-      }
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function handleScopeChange(event: React.SyntheticEvent, value: any | any[], reason: string)
-   {
-      if(value)
-      {
-         setSelectedScopeId(value.id);
-      }
-      else
-      {
-         setSelectedScopeId(null);
-      }
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   async function editingExistingShareScope(shareId: number, value: any | any[])
-   {
-      setStatusString("Saving...");
-      setAlert(null);
-
-      const formData = new FormData();
-      formData.append("tableName", tableMetaData.name);
-      formData.append("recordId", record.values.get(tableMetaData.primaryKeyField));
-      formData.append("shareId", shareId);
-      formData.append("scopeId", value.id);
-
-      const processResult = await qController.processRun("editSharedRecord", formData, null, true);
-
-      if (processResult instanceof QJobError)
-      {
-         const jobError = processResult as QJobError;
-         setStatusString(null);
-         setAlert("Error editing shared record: " + jobError.error);
-         setSubmitting(false)
-      }
-      else
-      {
-         const result = processResult as QJobComplete;
-         setStatusString(null);
-         setAlert(null);
-         setNeedToLoadCurrentShares(true);
-         setSubmitting(false)
-      }
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   async function loadShares()
-   {
-      setNeedToLoadCurrentShares(false);
-
-      const formData = new FormData();
-      formData.append("tableName", tableMetaData.name);
-      formData.append("recordId", record.values.get(tableMetaData.primaryKeyField));
-      const processResult = await qController.processRun("getSharedRecords", formData, null, true);
-
-      setStatusString("Loading...");
-      setAlert(null)
-
-      if (processResult instanceof QJobError)
-      {
-         const jobError = processResult as QJobError;
-         setStatusString(null);
-         setAlert("Error loading: " + jobError.error);
-      }
-      else
-      {
-         const result = processResult as QJobComplete;
-
-         const newCurrentShares: CurrentShare[] = [];
-         for (let i in result.values["resultList"])
-         {
-            newCurrentShares.push(result.values["resultList"][i].values);
-         }
-         setCurrentShares(newCurrentShares);
-         setEverLoadedCurrentShares(true);
-
-         setStatusString(null);
-         setAlert(null);
-      }
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   async function saveNewShare()
-   {
-      setSubmitting(true)
-      setStatusString("Saving...");
-      setAlert(null);
-
-      const formData = new FormData();
-      formData.append("tableName", tableMetaData.name);
-      formData.append("recordId", record.values.get(tableMetaData.primaryKeyField));
-      formData.append("audienceType", selectedAudienceType);
-      formData.append("audienceId", selectedAudienceId);
-      formData.append("scopeId", selectedScopeId);
-
-      const processResult = await qController.processRun("insertSharedRecord", formData, null, true);
-
-      if (processResult instanceof QJobError)
-      {
-         const jobError = processResult as QJobError;
-         setStatusString(null);
-         setAlert("Error sharing record: " + jobError.error);
-         setSubmitting(false)
-      }
-      else
-      {
-         const result = processResult as QJobComplete;
-         setStatusString(null);
-         setAlert(null);
-         setSelectedAudienceOption(null);
-         setNeedToLoadCurrentShares(true);
-         setSubmitting(false)
-      }
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   async function removeShare(shareId: number)
-   {
-      setStatusString("Deleting...");
-      setAlert(null);
-
-      const formData = new FormData();
-      formData.append("tableName", tableMetaData.name);
-      formData.append("recordId", record.values.get(tableMetaData.primaryKeyField));
-      formData.append("shareId", shareId);
-
-      const processResult = await qController.processRun("deleteSharedRecord", formData, null, true);
-
-      if (processResult instanceof QJobError)
-      {
-         const jobError = processResult as QJobError;
-         setStatusString(null);
-         setAlert("Error deleting share: " + jobError.error);
-      }
-      else
-      {
-         const result = processResult as QJobComplete;
-         setNeedToLoadCurrentShares(true);
-         setStatusString(null);
-         setAlert(null);
-      }
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function getScopeOption(scopeId: string): Scope
-   {
-      for (let scopeOption of scopeOptions)
-      {
-         if(scopeOption.id == scopeId)
-         {
-            return (scopeOption);
-         }
-      }
-
-      return (null);
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function renderScopeDropdown(id: string, defaultValue: Scope, onChange: (event: React.SyntheticEvent, value: any | any[], reason: string) => void)
-   {
-      const isDisabled = (id == "new-share-scope" && submitting);
-      return (
-         <Autocomplete
-            id={id}
-            disabled={isDisabled}
-            renderInput={(params) => (<TextField {...params} label="Scope" variant="outlined" autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
-            options={scopeOptions}
-            // @ts-ignore
-            defaultValue={defaultValue}
-            onChange={onChange}
-            isOptionEqualToValue={(option, value) => option.id === value.id}
-            // @ts-ignore Property label does not exist on string | {thing with label}
-            getOptionLabel={(option) => option.label}
-            autoSelect={true}
-            autoHighlight={true}
-            disableClearable
-            fullWidth
-            sx={getAutocompleteOutlinedStyle(isDisabled)}
-         />
-      );
-   }
-
-   //////////////////////
-   // render the modal //
-   //////////////////////
-   return (<Modal open={open} onClose={close}>
-      <div className="share">
-         <Box sx={{position: "absolute", overflowY: "auto", maxHeight: "100%", width: "100%", display: "flex", height: "100%", flexDirection: "column", justifyContent: "center"}}>
-            <Card sx={{my: 5, mx: "auto", p: 3}}>
-
-               {/* header */}
-               <Box display="flex" flexDirection="row" justifyContent="space-between" alignItems="flex-start">
-                  <Typography variant="h4" pb={1} fontWeight="600">
-                     Share {tableMetaData.label}: {record?.recordLabel ?? record?.values?.get(tableMetaData.primaryKeyField) ?? "Unknown"}
-                     <Box color={colors.gray.main} pb={"0.5rem"} fontSize={"0.875rem"} fontWeight="400" maxWidth="590px">
-                        {/* todo move to helpContent (what do we attach the meta-data too??) */}
-                        Select a user or a group to share this record with.
-                        You can choose if they should only be able to Read the record, or also make Edits to it.
-                     </Box>
-                     <Box fontSize={14} maxWidth="590px" pb={1} fontWeight="300">
-                        {alert && <Alert color="error" onClose={() => setAlert(null)}>{alert}</Alert>}
-                        {statusString}
-                        {!alert && !statusString && (<>&nbsp;</>)}
-                     </Box>
-                  </Typography>
-               </Box>
-
-               {/* body */}
-               <Box pb={3} display="flex" flexDirection="column">
-                  {/* row for adding a new share */}
-                  <Box display="flex" flexDirection="row" alignItems="center">
-                     <Box width="350px" pr={2} mb={-1.5}>
-                        <DynamicSelect
-                           possibleValueSourceName={shareableTableMetaData.audiencePossibleValueSourceName}
-                           fieldLabel="User or Group" // todo should come from shareableTableMetaData
-                           initialValue={selectedAudienceOption?.id}
-                           initialDisplayValue={selectedAudienceOption?.label}
-                           inForm={false}
-                           onChange={handleAudienceChange}
-                        />
-                     </Box>
-                     <Box width="180px" pr={2}>
-                        {renderScopeDropdown("new-share-scope", defaultScope, handleScopeChange)}
-                     </Box>
-                     <Box>
-                        <Tooltip title={selectedAudienceId == null ? "Select a user or group to share with." : null}>
-                           <span>
-                              <Button disabled={submitting || selectedAudienceId == null} sx={iconButtonSX} onClick={() => saveNewShare()}>
-                                 <Icon color={selectedAudienceId == null ? "secondary" : "info"}>save</Icon>
-                              </Button>
-                           </span>
-                        </Tooltip>
-                     </Box>
-                  </Box>
-
-                  {/* row showing existing shares */}
-                  <Box pt={3}>
-                     <Box pb="0.25rem">
-                        <h5 style={{fontWeight: "600"}}>Current Shares
-                           {
-                              everLoadedCurrentShares ? <>&nbsp;({currentShares.length})</> : <></>
-                           }
-                        </h5>
-                     </Box>
-                     <Box sx={{border: `1px solid ${colors.grayLines.main}`, borderRadius: "1rem", overflow: "hidden"}}>
-                        <Box sx={{overflow: "auto"}} height="210px" pt="0.75rem">
-                           {
-                              currentShares.map((share) => (
-                                 <Box key={share.shareId} display="flex" justifyContent="space-between" alignItems="center" p="0.25rem" pb="0.75rem" fontSize="1rem">
-                                    <Box display="flex" alignItems="center">
-                                       <Box width="310px" pl="1rem">{share.audienceLabel}</Box>
-                                       <Box width="160px">{renderScopeDropdown(`scope-${share.shareId}`, getScopeOption(share.scopeId), (event: React.SyntheticEvent, value: any | any[], reason: string) => editingExistingShareScope(share.shareId, value))}</Box>
-                                    </Box>
-                                    <Box pr="1rem">
-                                       <Button sx={{...iconButtonSX, ...redIconButton}} onClick={() => removeShare(share.shareId)}><Icon>clear</Icon></Button>
-                                    </Box>
-                                 </Box>
-                              ))
-                           }
-                        </Box>
-                     </Box>
-                  </Box>
-
-               </Box>
-
-               {/* footer */}
-               <Box display="flex" flexDirection="row" justifyContent="flex-end">
-                  <QCancelButton label="Done" iconName="check" onClickHandler={() => close(null, null)} disabled={false} />
-               </Box>
-            </Card>
-         </Box>
-      </div>
-   </Modal>);
-
-}
-
-const iconButtonSX =
-   {
-      border: `1px solid ${colors.grayLines.main} !important`,
-      borderRadius: "0.75rem",
-      textTransform: "none",
-      fontSize: "1rem",
-      fontWeight: "400",
-      width: "40px",
-      minWidth: "40px",
-      paddingLeft: 0,
-      paddingRight: 0,
-      color: colors.secondary.main,
-      "&:hover": {color: colors.secondary.main},
-      "&:focus": {color: colors.secondary.main},
-      "&:focus:not(:hover)": {color: colors.secondary.main},
-   };
-
-const redIconButton =
-   {
-      color: colors.error.main,
-      "&:hover": {color: colors.error.main},
-      "&:focus": {color: colors.error.main},
-      "&:focus:not(:hover)": {color: colors.error.main},
-   };
-

src/qqq/components/widgets/CompositeWidget.tsx

@@ -1,109 +0,0 @@
-/*
- * 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 {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import {Box, Skeleton} from "@mui/material";
-import React from "react";
-import {BlockData} from "qqq/components/widgets/blocks/BlockModels";
-import WidgetBlock from "qqq/components/widgets/WidgetBlock";
-
-
-interface CompositeData
-{
-   blocks: BlockData[];
-   styleOverrides?: any;
-   layout?: string
-}
-
-
-interface CompositeWidgetProps
-{
-   widgetMetaData: QWidgetMetaData;
-   data: CompositeData;
-}
-
-
-/*******************************************************************************
- ** Widget which is a list of Blocks.
- *******************************************************************************/
-export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetProps): JSX.Element
-{
-   if (!data || !data.blocks)
-   {
-      return (<Skeleton />);
-   }
-
-   ////////////////////////////////////////////////////////////////////////////////////
-   // note - these layouts are defined in qqq in the CompositeWidgetData.Layout enum //
-   ////////////////////////////////////////////////////////////////////////////////////
-   let layout = data?.layout;
-   let boxStyle: any = {};
-   if (layout == "FLEX_ROW_WRAPPED")
-   {
-      boxStyle.display = "flex";
-      boxStyle.flexDirection = "row";
-      boxStyle.flexWrap = "wrap";
-      boxStyle.gap = "0.5rem";
-   }
-   else if (layout == "FLEX_ROW_SPACE_BETWEEN")
-   {
-      boxStyle.display = "flex";
-      boxStyle.flexDirection = "row";
-      boxStyle.justifyContent = "space-between"
-      boxStyle.gap = "0.25rem";
-   }
-   else if (layout == "TABLE_SUB_ROW_DETAILS")
-   {
-      boxStyle.display = "flex";
-      boxStyle.flexDirection = "column";
-      boxStyle.fontSize = "0.875rem";
-      boxStyle.fontWeight = 400;
-      boxStyle.borderRight = "1px solid #D0D0D0";
-   }
-   else if (layout == "BADGES_WRAPPER")
-   {
-      boxStyle.display = "flex";
-      boxStyle.gap = "0.25rem";
-      boxStyle.padding = "0 0.25rem";
-      boxStyle.fontSize = "0.875rem";
-      boxStyle.fontWeight = 400;
-      boxStyle.border = "1px solid gray";
-      boxStyle.borderRadius = "0.5rem";
-      boxStyle.background = "#FFFFFF";
-   }
-
-   if (data?.styleOverrides)
-   {
-      boxStyle = {...boxStyle, ...data.styleOverrides};
-   }
-
-   return (<Box sx={boxStyle} className="compositeWidget">
-      {
-         data.blocks.map((block: BlockData, index) => (
-            <React.Fragment key={index}>
-               <WidgetBlock widgetMetaData={widgetMetaData} block={block} />
-            </React.Fragment>
-         ))
-      }
-   </Box>);
-
-}

src/qqq/components/widgets/DashboardWidgets.tsx

@@ -19,13 +19,13 @@
  */
 
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-import {Alert, Skeleton} from "@mui/material";
+import {Skeleton} from "@mui/material";
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import parse from "html-react-parser";
+import React, {useContext, useEffect, useReducer, useState} from "react";
 import QContext from "QContext";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import TabPanel from "qqq/components/misc/TabPanel";
@@ -35,25 +35,20 @@ import DefaultLineChart from "qqq/components/widgets/charts/linechart/DefaultLin
 import SmallLineChart from "qqq/components/widgets/charts/linechart/SmallLineChart";
 import PieChart from "qqq/components/widgets/charts/piechart/PieChart";
 import StackedBarChart from "qqq/components/widgets/charts/StackedBarChart";
-import CompositeWidget from "qqq/components/widgets/CompositeWidget";
 import DataBagViewer from "qqq/components/widgets/misc/DataBagViewer";
 import DividerWidget from "qqq/components/widgets/misc/Divider";
 import FieldValueListWidget from "qqq/components/widgets/misc/FieldValueListWidget";
-import PivotTableSetupWidget from "qqq/components/widgets/misc/PivotTableSetupWidget";
 import QuickSightChart from "qqq/components/widgets/misc/QuickSightChart";
 import RecordGridWidget from "qqq/components/widgets/misc/RecordGridWidget";
-import ReportSetupWidget from "qqq/components/widgets/misc/ReportSetupWidget";
 import ScriptViewer from "qqq/components/widgets/misc/ScriptViewer";
 import StepperCard from "qqq/components/widgets/misc/StepperCard";
 import USMapWidget from "qqq/components/widgets/misc/USMapWidget";
 import ParentWidget from "qqq/components/widgets/ParentWidget";
 import MultiStatisticsCard from "qqq/components/widgets/statistics/MultiStatisticsCard";
 import StatisticsCard from "qqq/components/widgets/statistics/StatisticsCard";
-import Widget, {HeaderIcon, LabelComponent, WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT} from "qqq/components/widgets/Widget";
-import WidgetBlock from "qqq/components/widgets/WidgetBlock";
+import Widget, {HeaderIcon, WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT, LabelComponent} from "qqq/components/widgets/Widget";
 import ProcessRun from "qqq/pages/processes/ProcessRun";
 import Client from "qqq/utils/qqq/Client";
-import React, {useContext, useEffect, useReducer, useState} from "react";
 import TableWidget from "./tables/TableWidget";
 
 
@@ -64,7 +59,6 @@ interface Props
    widgetMetaDataList: QWidgetMetaData[];
    tableName?: string;
    entityPrimaryKey?: string;
-   record?: QRecord;
    omitWrappingGridContainer: boolean;
    areChildren?: boolean;
    childUrlParams?: string;
@@ -83,7 +77,7 @@ DashboardWidgets.defaultProps = {
    wrapWidgetsInTabPanels: false,
 };
 
-function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, record, omitWrappingGridContainer, areChildren, childUrlParams, parentWidgetMetaData, wrapWidgetsInTabPanels}: Props): JSX.Element
+function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omitWrappingGridContainer, areChildren, childUrlParams, parentWidgetMetaData, wrapWidgetsInTabPanels}: Props): JSX.Element
 {
    const [widgetData, setWidgetData] = useState([] as any[]);
    const [widgetCounter, setWidgetCounter] = useState(0);
@@ -95,9 +89,9 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
 
    let initialSelectedTab = 0;
    let selectedTabKey: string = null;
-   if (parentWidgetMetaData && wrapWidgetsInTabPanels)
+   if(parentWidgetMetaData && wrapWidgetsInTabPanels)
    {
-      selectedTabKey = `qqq.widgets.selectedTabs.${parentWidgetMetaData.name}`;
+      selectedTabKey = `qqq.widgets.selectedTabs.${parentWidgetMetaData.name}`
       if (localStorage.getItem(selectedTabKey))
       {
          initialSelectedTab = Number(localStorage.getItem(selectedTabKey));
@@ -195,7 +189,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
          const metaDataToUse = (thisWidgetHasDropdowns) ? widgetMetaData : parentWidgetMetaData;
          for (let i = 0; i < metaDataToUse.dropdowns.length; i++)
          {
-            const dropdownName = metaDataToUse.dropdowns[i].possibleValueSourceName ?? metaDataToUse.dropdowns[i].name;
+            const dropdownName = metaDataToUse.dropdowns[i].possibleValueSourceName;
             const localStorageKey = `${WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT}.${metaDataToUse.name}.${dropdownName}`;
             const json = JSON.parse(localStorage.getItem(localStorageKey));
             if (json)
@@ -252,23 +246,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
 
    const widgetCount = widgetMetaDataList ? widgetMetaDataList.length : 0;
 
-
-   /*******************************************************************************
-    ** helper function, to convert values from a QRecord values map to a regular old
-    ** js object
-    *******************************************************************************/
-   function convertQRecordValuesFromMapToObject(record: QRecord): {[name: string]: any}
-   {
-      const rs: {[name: string]: any} = {};
-
-      if(record.values)
-      {
-         record.values.forEach((value, key) => rs[key] = value);
-      }
-
-      return (rs);
-   }
-
    const renderWidget = (widgetMetaData: QWidgetMetaData, i: number): JSX.Element =>
    {
       const labelAdditionalComponentsRight: LabelComponent[] = [];
@@ -277,17 +254,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
          const topRightInsideCardIcon = widgetMetaData.icons.get("topRightInsideCard");
          if (topRightInsideCardIcon)
          {
-            labelAdditionalComponentsRight.push(new HeaderIcon(topRightInsideCardIcon.name, topRightInsideCardIcon.path, topRightInsideCardIcon.color, "topRightInsideCard"));
-         }
-      }
-
-      const labelAdditionalComponentsLeft: LabelComponent[] = [];
-      if (widgetMetaData && widgetMetaData.icons)
-      {
-         const topLeftInsideCardIcon = widgetMetaData.icons.get("topLeftInsideCard");
-         if (topLeftInsideCardIcon)
-         {
-            labelAdditionalComponentsLeft.push(new HeaderIcon(topLeftInsideCardIcon.name, topLeftInsideCardIcon.path, topLeftInsideCardIcon.color, "topLeftInsideCard"));
+            labelAdditionalComponentsRight.push(new HeaderIcon(topRightInsideCardIcon.name, topRightInsideCardIcon.path, topRightInsideCardIcon.color));
          }
       }
 
@@ -307,21 +274,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                   />
                )
             }
-            {
-               widgetMetaData.type === "alert" && widgetData[i]?.html && (
-                  <Widget
-                     omitPadding={true}
-                     widgetMetaData={widgetMetaData}
-                     widgetData={widgetData[i]}
-                     reloadWidgetCallback={(data) => reloadWidget(i, data)}
-                     isChild={areChildren}
-                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
-                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
-                  >
-                     <Alert severity={widgetData[i]?.alertType?.toLowerCase()}>{parse(widgetData[i]?.html)}</Alert>
-                  </Widget>
-               )
-            }
             {
                widgetMetaData.type === "usaMap" && (
                   <USMapWidget
@@ -350,7 +302,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      isChild={areChildren}
                      labelAdditionalComponentsRight={labelAdditionalComponentsRight}
-                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
                      <StackedBarChart data={widgetData[i]?.chartData} chartSubheaderData={widgetData[i]?.chartSubheaderData} />
                   </Widget>
@@ -363,8 +314,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                      widgetData={widgetData[i]}
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      showReloadControl={false}
-                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
-                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
                      <div className="widgetProcessMidDiv" style={{height: "100%"}}>
                         <ProcessRun process={widgetData[i]?.processMetaData} defaultProcessValues={widgetData[i]?.defaultValues} isWidget={true} forceReInit={widgetCounter} />
@@ -378,8 +327,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                      widgetMetaData={widgetMetaData}
                      widgetData={widgetData[i]}
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
-                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
-                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
                      <Box sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
                         <Box padding="1rem" sx={{width: "100%"}}>
@@ -395,8 +342,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                      widgetMetaData={widgetMetaData}
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      widgetData={widgetData[i]}
-                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
-                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
                      <Box>
                         <MDTypography component="div" variant="button" color="text" fontWeight="light">
@@ -428,11 +373,8 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                      widgetData={widgetData[i]}
                      isChild={areChildren}
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
-                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
-                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
                      <StatisticsCard
-                        widgetMetaData={widgetMetaData}
                         data={widgetData[i]}
                         increaseIsGood={true}
                      />
@@ -472,7 +414,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      isChild={areChildren}
                      labelAdditionalComponentsRight={labelAdditionalComponentsRight}
-                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
                      <div>
                         <PieChart
@@ -508,8 +449,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                      widgetData={widgetData[i]}
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      isChild={areChildren}
-                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
-                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
                      <DefaultLineChart sx={{alignItems: "center"}}
                         data={widgetData[i]?.chartData}
@@ -538,34 +477,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                   />
                )
             }
-            {
-               widgetMetaData.type === "composite" && (
-                  <Widget
-                     widgetMetaData={widgetMetaData}
-                     widgetData={widgetData[i]}
-                     reloadWidgetCallback={(data) => reloadWidget(i, data)}
-                     isChild={areChildren}
-                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
-                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
-                  >
-                     <CompositeWidget widgetMetaData={widgetMetaData} data={widgetData[i]} />
-                  </Widget>
-               )
-            }
-            {
-               widgetMetaData.type === "block" && (
-                  <Widget
-                     widgetMetaData={widgetMetaData}
-                     widgetData={widgetData[i]}
-                     reloadWidgetCallback={(data) => reloadWidget(i, data)}
-                     isChild={areChildren}
-                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
-                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
-                  >
-                     <WidgetBlock widgetMetaData={widgetMetaData} block={widgetData[i]} />
-                  </Widget>
-               )
-            }
             {
                widgetMetaData.type === "dataBagViewer" && (
                   widgetData && widgetData[i] && widgetData[i].queryParams &&
@@ -582,25 +493,11 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                   </Widget>
                )
             }
-            {
-               widgetMetaData.type === "reportSetup" && (
-                  widgetData && widgetData[i] && widgetData[i].queryParams &&
-                  <ReportSetupWidget isEditable={false} widgetMetaData={widgetMetaData} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
-                  {}} />
-               )
-            }
-            {
-               widgetMetaData.type === "pivotTableSetup" && (
-                  widgetData && widgetData[i] && widgetData[i].queryParams &&
-                  <PivotTableSetupWidget isEditable={false} widgetMetaData={widgetMetaData} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
-                  {}} />
-               )
-            }
          </Box>
       );
    };
 
-   if (wrapWidgetsInTabPanels)
+   if(wrapWidgetsInTabPanels)
    {
       omitWrappingGridContainer = true;
    }
@@ -626,13 +523,14 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                      renderedWidget = (<TabPanel index={i} value={selectedTab} style={{
                         padding: 0,
                         margin: "-1rem",
+                        marginBottom: "-3.5rem",
                         width: "calc(100% + 2rem)"
                      }}>
                         {renderedWidget}
                      </TabPanel>);
                   }
 
-                  return (<React.Fragment key={`${widgetMetaData.name}-${i}`}>{renderedWidget}</React.Fragment>);
+                  return (<React.Fragment key={`${widgetMetaData.name}-${i}`}>{renderedWidget}</React.Fragment>)
                })
             }
          </>
@@ -640,8 +538,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
 
    const tabs = widgetMetaDataList && wrapWidgetsInTabPanels ?
       <Tabs
-         sx={{
-            m: 0, mb: 1.5, ml: -2, mr: -2, mt: -3,
+         sx={{m: 0, mb: 1.5, ml: -2, mr: -2, mt: -3,
             "& .MuiTabs-scroller": {
                ml: 0
             }
@@ -654,7 +551,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
             <Tab key={widgetMetaData.name} label={widgetMetaData.label} />
          ))}
       </Tabs>
-      : <></>;
+      : <></>
 
    return (
       widgetCount > 0 ? (

src/qqq/components/widgets/ParentWidget.tsx

@@ -33,7 +33,6 @@ import Client from "qqq/utils/qqq/Client";
 //////////////////////////////////////////////
 export interface ParentWidgetData
 {
-   label?: string;
    dropdownLabelList: string[];
    dropdownNameList: string[];
    dropdownDataList: {
@@ -43,7 +42,6 @@ export interface ParentWidgetData
    childWidgetNameList: string[];
    dropdownNeedsSelectedText?: string;
    storeDropdownSelections?: boolean;
-   csvData?: any[][];
    icon?: string;
    layoutType: string;
 }
@@ -66,8 +64,7 @@ interface Props
 
 
 const qController = Client.getInstance();
-
-function ParentWidget({urlParams, widgetMetaData, widgetIndex, data, reloadWidgetCallback, entityPrimaryKey, tableName, storeDropdownSelections}: Props,): JSX.Element
+function ParentWidget({urlParams, widgetMetaData, widgetIndex, data, reloadWidgetCallback, entityPrimaryKey, tableName, storeDropdownSelections}: Props, ): JSX.Element
 {
    const [childUrlParams, setChildUrlParams] = useState((urlParams) ? urlParams : "");
    const [qInstance, setQInstance] = useState(null as QInstance);
@@ -84,27 +81,27 @@ function ParentWidget({urlParams, widgetMetaData, widgetIndex, data, reloadWidge
 
    useEffect(() =>
    {
-      if (qInstance && data && data.childWidgetNameList)
+      if(qInstance && data && data.childWidgetNameList)
       {
          let widgetMetaDataList = [] as QWidgetMetaData[];
          data?.childWidgetNameList.forEach((widgetName: string) =>
          {
             widgetMetaDataList.push(qInstance.widgets.get(widgetName));
-         });
+         })
          setWidgets(widgetMetaDataList);
       }
    }, [qInstance, data, childUrlParams]);
 
    useEffect(() =>
    {
-      setChildUrlParams(urlParams);
+      setChildUrlParams(urlParams)
    }, [urlParams]);
 
    const parentReloadWidgetCallback = (data: string) =>
    {
       setChildUrlParams(data);
       reloadWidgetCallback(data);
-   };
+   }
 
    ///////////////////////////////////////////////////////////////////////////////////////////
    // if this parent widget is in card form, and its children are too, then we need some px //
@@ -128,7 +125,7 @@ function ParentWidget({urlParams, widgetMetaData, widgetIndex, data, reloadWidge
             omitPadding={omitPadding}
          >
             <Box sx={{height: "100%", width: "100%"}} px={px}>
-               <DashboardWidgets widgetMetaDataList={widgets} entityPrimaryKey={entityPrimaryKey} tableName={tableName} childUrlParams={childUrlParams} areChildren={true} parentWidgetMetaData={widgetMetaData} wrapWidgetsInTabPanels={data.layoutType?.toLowerCase() == "tabs"} />
+               <DashboardWidgets widgetMetaDataList={widgets} entityPrimaryKey={entityPrimaryKey} tableName={tableName} childUrlParams={childUrlParams} areChildren={true} parentWidgetMetaData={widgetMetaData} wrapWidgetsInTabPanels={data.layoutType == "TABS"}/>
             </Box>
          </Widget>
       ) : null

src/qqq/components/widgets/Widget.tsx

@@ -21,23 +21,17 @@
 
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import {InputLabel} from "@mui/material";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
 import Icon from "@mui/material/Icon";
-import Switch from "@mui/material/Switch";
 import Tooltip from "@mui/material/Tooltip/Tooltip";
 import Typography from "@mui/material/Typography";
 import parse from "html-react-parser";
-import QContext from "QContext";
-import colors from "qqq/assets/theme/base/colors";
-import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
-import WidgetDropdownMenu, {DropdownOption} from "qqq/components/widgets/components/WidgetDropdownMenu";
-import {WidgetUtils} from "qqq/components/widgets/WidgetUtils";
-import HtmlUtils from "qqq/utils/HtmlUtils";
-import React, {useContext, useEffect, useState} from "react";
+import React, {useEffect, useState} from "react";
 import {NavigateFunction, useNavigate} from "react-router-dom";
+import colors from "qqq/assets/theme/base/colors";
+import WidgetDropdownMenu, {DropdownOption} from "qqq/components/widgets/components/WidgetDropdownMenu";
 
 export interface WidgetData
 {
@@ -62,7 +56,6 @@ interface Props
    labelAdditionalComponentsLeft: LabelComponent[];
    labelAdditionalElementsLeft: JSX.Element[];
    labelAdditionalComponentsRight: LabelComponent[];
-   labelAdditionalElementsRight: JSX.Element[];
    labelBoxAdditionalSx?: any;
    widgetMetaData?: QWidgetMetaData;
    widgetData?: WidgetData;
@@ -83,7 +76,6 @@ Widget.defaultProps = {
    labelAdditionalComponentsLeft: [],
    labelAdditionalElementsLeft: [],
    labelAdditionalComponentsRight: [],
-   labelAdditionalElementsRight: [],
    labelBoxAdditionalSx: {},
    omitPadding: false,
 };
@@ -117,18 +109,16 @@ export class HeaderIcon extends LabelComponent
    iconPath: string;
    color: string;
    coloredBG: boolean;
-   role: string;
 
    iconColor: string;
    bgColor: string;
 
-   constructor(iconName: string, iconPath: string, color: string, role?: string, coloredBG: boolean = true)
+   constructor(iconName: string, iconPath: string, color: string, coloredBG: boolean = true)
    {
       super();
       this.iconName = iconName;
       this.iconPath = iconPath;
       this.color = color;
-      this.role = role;
       this.coloredBG = coloredBG;
 
       this.iconColor = this.coloredBG ? "#FFFFFF" : this.color;
@@ -138,7 +128,7 @@ export class HeaderIcon extends LabelComponent
 
    render = (args: LabelComponentRenderArgs): JSX.Element =>
    {
-      const styles: any = {
+      const styles = {
          width: "1.75rem",
          height: "1.75rem",
          color: this.iconColor,
@@ -146,12 +136,6 @@ export class HeaderIcon extends LabelComponent
          borderRadius: "0.25rem"
       };
 
-      if (this.role == "topLeftInsideCard")
-      {
-         styles["order"] = -1;
-         styles["marginRight"] = "0.5rem";
-      }
-
       if (this.iconPath)
       {
          return (<Box sx={{textAlign: "center", ...styles}}><img src={this.iconPath} width="16" height="16" /></Box>);
@@ -164,79 +148,6 @@ export class HeaderIcon extends LabelComponent
 }
 
 
-/*******************************************************************************
- ** a link (actually a button) for in a widget's header
- *******************************************************************************/
-interface HeaderLinkButtonComponentProps
-{
-   label: string;
-   onClickCallback: () => void;
-   disabled?: boolean;
-   disabledTooltip?: string;
-}
-
-HeaderLinkButtonComponent.defaultProps = {
-   disabled: false,
-   disabledTooltip: null
-};
-
-export function HeaderLinkButtonComponent({label, onClickCallback, disabled, disabledTooltip}: HeaderLinkButtonComponentProps): JSX.Element
-{
-   return (
-      <Tooltip title={disabledTooltip}>
-         <span>
-            <Button disabled={disabled} onClick={() => onClickCallback()} sx={{p: 0}} disableRipple>
-               <Typography display="inline" textTransform="none" fontSize={"1.125rem"}>
-                  {label}
-               </Typography>
-            </Button>
-         </span>
-      </Tooltip>
-   );
-}
-
-
-
-
-/*******************************************************************************
- **
- *******************************************************************************/
-interface HeaderToggleComponentProps
-{
-   label: string;
-   getValue: () => boolean;
-   onClickCallback: () => void;
-   disabled?: boolean;
-   disabledTooltip?: string;
-}
-
-HeaderToggleComponent.defaultProps = {
-   disabled: false,
-   disabledTooltip: null
-};
-
-export function HeaderToggleComponent({label, getValue, onClickCallback, disabled, disabledTooltip}: HeaderToggleComponentProps): JSX.Element
-{
-   const onClick = () =>
-   {
-      onClickCallback();
-   }
-
-   return (
-      <Box alignItems="baseline" mr="-0.75rem">
-         <Tooltip title={disabledTooltip}>
-            <span>
-               <InputLabel sx={{fontSize: "1.125rem", px: "0 !important", cursor: disabled ? "default" : "pointer", opacity: disabled ? 0.65 : 1}} unselectable="on">
-                  {label} <Switch disabled={disabled} checked={getValue()} onClick={onClick} />
-               </InputLabel>
-            </span>
-         </Tooltip>
-      </Box>
-   );
-}
-
-
-
 /*******************************************************************************
  **
  *******************************************************************************/
@@ -246,17 +157,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) =>
@@ -268,7 +177,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>
       );
    };
@@ -314,30 +223,22 @@ export class Dropdown extends LabelComponent
          try
          {
             const localStorageOption = JSON.parse(localStorage.getItem(localStorageKey));
-            if (localStorageOption)
+            if(localStorageOption)
             {
                const id = localStorageOption.id;
-
-               if (this.dropdownMetaData.type == "DATE_PICKER")
+               for (let i = 0; i < this.options.length; i++)
                {
-                  defaultValue = id;
-               }
-               else
-               {
-                  for (let i = 0; i < this.options.length; i++)
+                  if (this.options[i].id == id)
                   {
-                     if (this.options[i].id == id)
-                     {
-                        defaultValue = this.options[i];
-                        args.dropdownData[args.componentIndex] = defaultValue?.id;
-                     }
+                     defaultValue = this.options[i]
+                     args.dropdownData[args.componentIndex] = defaultValue?.id;
                   }
                }
             }
          }
-         catch (e)
+         catch(e)
          {
-            console.log(`Error getting default value for dropdown [${this.dropdownName}] from local storage`, e);
+            console.log(`Error getting default value for dropdown [${this.dropdownName}] from local storage`, e)
          }
       }
 
@@ -348,7 +249,7 @@ export class Dropdown extends LabelComponent
       {
          for (let i = 0; i < this.options.length; i++)
          {
-            if (this.options[i].id == this.dropdownDefaultValue)
+            if(this.options[i].id == this.dropdownDefaultValue)
             {
                defaultValue = this.options[i];
                args.dropdownData[args.componentIndex] = defaultValue?.id;
@@ -384,7 +285,6 @@ export class Dropdown extends LabelComponent
          <Box mb={2} sx={{float: "right"}}>
             <WidgetDropdownMenu
                name={this.dropdownName}
-               type={this.dropdownMetaData.type}
                defaultValue={defaultValue}
                sx={{marginLeft: "1rem"}}
                label={label}
@@ -417,13 +317,11 @@ export class ReloadControl extends LabelComponent
 
    render = (args: LabelComponentRenderArgs): JSX.Element =>
    {
-      return (<Typography key={1} variant="body2" py={0} px={0} display="inline" position="relative" top="-0.25rem">
-         <Tooltip title="Refresh">
-            <Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={() => this.callback()}>
-               <Icon sx={{color: colors.gray.main, fontSize: 1.125}}>refresh</Icon>
-            </Button>
-         </Tooltip>
-      </Typography>);
+      return (
+         <Typography variant="body2" py={2} px={0} display="inline" position="relative" top="-0.175rem">
+            <Tooltip title="Refresh"><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={() => this.callback()}><Icon sx={{color: colors.gray.main, fontSize: 1.125}}>refresh</Icon></Button></Tooltip>
+         </Typography>
+      );
    };
 }
 
@@ -438,31 +336,15 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
 {
    const navigate = useNavigate();
    const [dropdownData, setDropdownData] = useState([]);
+   const [fullScreenWidgetClassName, setFullScreenWidgetClassName] = useState("");
    const [reloading, setReloading] = useState(false);
    const [dropdownDataJSON, setDropdownDataJSON] = useState("");
    const [labelComponentsLeft, setLabelComponentsLeft] = useState([] as LabelComponent[]);
    const [labelComponentsRight, setLabelComponentsRight] = useState([] as LabelComponent[]);
 
-   ////////////////////////////////////////////////////////////////////////////////////////////////////////
-   // support for using widget (data) label as page header, w/o it disappearing if dropdowns are changed //
-   ////////////////////////////////////////////////////////////////////////////////////////////////////////
-   const [lastSeenLabel, setLastSeenLabel] = useState("");
-   const [usingLabelAsTitle, setUsingLabelAsTitle] = useState(false);
-
-   const {helpHelpActive} = useContext(QContext);
-
    function renderComponent(component: LabelComponent, componentIndex: number)
    {
-      if (component && component.render)
-      {
-         return component.render({navigate: navigate, widgetProps: props, dropdownData: dropdownData, componentIndex: componentIndex, reloadFunction: doReload});
-      }
-      else
-      {
-         console.log("Request to render a null component or component without a render function...");
-         console.log(JSON.stringify(component));
-         return (<></>);
-      }
+      return component.render({navigate: navigate, widgetProps: props, dropdownData: dropdownData, componentIndex: componentIndex, reloadFunction: doReload});
    }
 
    useEffect(() =>
@@ -489,7 +371,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
       // for initial render, put right-components from props into the state variable //
       /////////////////////////////////////////////////////////////////////////////////
       const stateLabelComponentsRight = [] as LabelComponent[];
-      // console.log(`${props.widgetMetaData.name} initiating right-components`);
+      // console.log(`${props.widgetMetaData.name} init'ing right-components`);
       if (props.labelAdditionalComponentsRight)
       {
          props.labelAdditionalComponentsRight.map((component) => stateLabelComponentsRight.push(component));
@@ -523,14 +405,11 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
          {
             // console.log(`${props.widgetMetaData.name} building a Dropdown, data is: ${dropdownData}`);
             let defaultValue = null;
-            if (props.widgetData.dropdownDefaultValueList && props.widgetData.dropdownDefaultValueList.length >= index)
+            if(props.widgetData.dropdownDefaultValueList && props.widgetData.dropdownDefaultValueList.length >= index)
             {
                defaultValue = props.widgetData.dropdownDefaultValueList[index];
             }
-            if (props.widgetData?.dropdownLabelList && props.widgetData?.dropdownLabelList[index] && props.widgetMetaData?.dropdowns && props.widgetMetaData?.dropdowns[index] && props.widgetData?.dropdownNameList && props.widgetData?.dropdownNameList[index])
-            {
-               updatedStateLabelComponentsRight.push(new Dropdown(props.widgetData.dropdownLabelList[index], props.widgetMetaData.dropdowns[index], dropdownData, defaultValue, props.widgetData.dropdownNameList[index], handleDataChange));
-            }
+            updatedStateLabelComponentsRight.push(new Dropdown(props.widgetData.dropdownLabelList[index], props.widgetMetaData.dropdowns[index], dropdownData, defaultValue, props.widgetData.dropdownNameList[index], handleDataChange));
          });
          setLabelComponentsRight(updatedStateLabelComponentsRight);
       }
@@ -621,37 +500,18 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
       }
    };
 
-   const onExportClick = () =>
+   const toggleFullScreenWidget = () =>
    {
-      if (props.widgetData?.csvData)
+      if (fullScreenWidgetClassName)
       {
-         const csv = WidgetUtils.widgetCsvDataToString(props.widgetData);
-         const fileName = WidgetUtils.makeExportFileName(props.widgetData, props.widgetMetaData);
-         HtmlUtils.download(fileName, csv);
+         setFullScreenWidgetClassName("");
       }
       else
       {
-         alert("There is no data available to export.");
+         setFullScreenWidgetClassName("fullScreenWidget");
       }
    };
 
-   ///////////////////////////////////////////////////////////////////////////////////////////////////////
-   // add the export button to the label's left elements, if the meta-data says to show it              //
-   // don't do this for 2 types which themselves add the button (and have custom code to do the export) //
-   ///////////////////////////////////////////////////////////////////////////////////////////////////////
-   let localLabelAdditionalElementsLeft = [...props.labelAdditionalElementsLeft];
-   if (props.widgetMetaData?.showExportButton && props.widgetMetaData?.type !== "table" && props.widgetMetaData?.type !== "childRecordList")
-   {
-      if (!localLabelAdditionalElementsLeft)
-      {
-         localLabelAdditionalElementsLeft = [];
-      }
-
-      localLabelAdditionalElementsLeft.push(WidgetUtils.generateExportButton(onExportClick));
-   }
-
-   let localLabelAdditionalElementsRight = [...props.labelAdditionalElementsRight];
-
    const hasPermission = props.widgetData?.hasPermission === undefined || props.widgetData?.hasPermission === true;
 
    const isSet = (v: any): boolean =>
@@ -666,130 +526,85 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
    if (hasPermission)
    {
       needLabelBox ||= (labelComponentsLeft && labelComponentsLeft.length > 0);
-      needLabelBox ||= (localLabelAdditionalElementsLeft && localLabelAdditionalElementsLeft.length > 0);
+      needLabelBox ||= (props.labelAdditionalElementsLeft && props.labelAdditionalElementsLeft.length > 0);
       needLabelBox ||= (labelComponentsRight && labelComponentsRight.length > 0);
-      needLabelBox ||= (localLabelAdditionalElementsRight && localLabelAdditionalElementsRight.length > 0);
-      needLabelBox ||= isSet(props.widgetData?.icon);
+      needLabelBox ||= isSet(props.widgetMetaData?.icon);
       needLabelBox ||= isSet(props.widgetData?.label);
       needLabelBox ||= isSet(props.widgetMetaData?.label);
    }
 
    //////////////////////////////////////////////////////////////////////////////////////////
    // first look for a label in the widget data, which would override that in the metadata //
+   // note - previously this had a ?: and one was pl={2}, the other was pl={3}...          //
    //////////////////////////////////////////////////////////////////////////////////////////
-   const isParentWidget = props.widgetMetaData.type == "parentWidget"; // todo - do we need to know top-level parent, vs. a nested parent?
-   let labelToUse = props.widgetData?.label ?? props.widgetMetaData?.label;
-
-   if (!labelToUse)
-   {
-      /////////////////////////////////////////////////////////////////////////////////////////////
-      // prevent the label from disappearing, especially when it's being used as the page header //
-      /////////////////////////////////////////////////////////////////////////////////////////////
-      if (lastSeenLabel && isParentWidget && usingLabelAsTitle)
-      {
-         labelToUse = lastSeenLabel;
-      }
-   }
-
+   const labelToUse = props.widgetData?.label ?? props.widgetMetaData?.label;
    let labelElement = (
-      <Typography sx={{cursor: "default", pl: "auto", fontWeight: 600}} variant={isParentWidget && (props.widgetData.isLabelPageTitle || usingLabelAsTitle) ? "h3" : "h6"} display="inline">
+      <Typography sx={{cursor: "default", pl: "auto", pt: props.widgetMetaData.type == "parentWidget" ? "1rem" : "auto", fontWeight: 600}} variant="h6" display="inline">
          {labelToUse}
       </Typography>
    );
 
-   let sublabelElement = (
-      <Box height="20px">
-         <Typography sx={{position: "relative", top: "-18px"}} variant="caption">
-            {props.widgetData?.sublabel}
-         </Typography>
-      </Box>
-   );
-
-   if (labelToUse && labelToUse != lastSeenLabel)
+   if (props.widgetMetaData.tooltip)
    {
-      setLastSeenLabel(labelToUse);
-      setUsingLabelAsTitle(props.widgetData.isLabelPageTitle);
+      labelElement = <Tooltip title={props.widgetMetaData.tooltip} arrow={false} followCursor={true} placement="bottom-start">{labelElement}</Tooltip>;
    }
 
-   const helpRoles = ["ALL_SCREENS"];
-   const slotName = "label";
-   const showHelp = helpHelpActive || hasHelpContent(props.widgetMetaData?.helpContent?.get(slotName), helpRoles);
-
-   if (showHelp)
-   {
-      const formattedHelpContent = <HelpContent helpContents={props.widgetMetaData?.helpContent?.get(slotName)} roles={helpRoles} helpContentKey={`widget:${props.widgetMetaData?.name};slot:${slotName}`} />;
-      labelElement = <Tooltip title={formattedHelpContent} arrow={true} placement="bottom-start">{labelElement}</Tooltip>;
-   }
-   else if (props.widgetMetaData?.tooltip)
-   {
-      labelElement = <Tooltip title={props.widgetMetaData.tooltip} arrow={true} placement="bottom-start">{labelElement}</Tooltip>;
-   }
-
-   const isTable = props.widgetMetaData.type == "table";
-
    const errorLoading = props.widgetData?.errorLoading !== undefined && props.widgetData?.errorLoading === true;
    const widgetContent =
       <Box sx={{width: "100%", height: "100%", minHeight: props.widgetMetaData?.minHeight ? props.widgetMetaData?.minHeight : "initial"}}>
          {
             needLabelBox &&
             <Box display="flex" justifyContent="space-between" alignItems="flex-start" sx={{width: "100%", ...props.labelBoxAdditionalSx}} minHeight={"2.5rem"}>
-               <Box display="flex" flexDirection="column">
-                  <Box display="flex" alignItems="baseline">
-                     {
-                        hasPermission ?
-                           props.widgetMetaData?.icon && (
-                              <Box ml={1} mr={2} mt={-4} sx={{
-                                 display: "flex",
-                                 justifyContent: "center",
-                                 alignItems: "center",
-                                 width: "64px",
-                                 height: "64px",
-                                 borderRadius: "8px",
-                                 background: colors.info.main,
-                                 color: "#ffffff",
-                                 float: "left"
-                              }}
-                              >
-                                 <Icon fontSize="medium" color="inherit">
-                                    {props.widgetMetaData.icon}
-                                 </Icon>
-                              </Box>
-                           ) :
-                           (
-                              <Box ml={3} mt={-4} sx={{
-                                 display: "flex",
-                                 justifyContent: "center",
-                                 alignItems: "center",
-                                 width: "64px",
-                                 height: "64px",
-                                 borderRadius: "8px",
-                                 background: colors.info.main,
-                                 color: "#ffffff",
-                                 float: "left"
-                              }}
-                              >
-                                 <Icon fontSize="medium" color="inherit">lock</Icon>
-                              </Box>
-                           )
-                     }
-                     {
-                        hasPermission && labelToUse && (labelElement)
-                     }
-                     {
-                        hasPermission && (
-                           labelComponentsLeft.map((component, i) =>
-                           {
-                              return (<React.Fragment key={i}>{renderComponent(component, i)}</React.Fragment>);
-                           })
+               <Box>
+                  {
+                     hasPermission ?
+                        props.widgetMetaData?.icon && (
+                           <Box ml={1} mr={2} mt={-4} sx={{
+                              display: "flex",
+                              justifyContent: "center",
+                              alignItems: "center",
+                              width: "64px",
+                              height: "64px",
+                              borderRadius: "8px",
+                              background: colors.info.main,
+                              color: "#ffffff",
+                              float: "left"
+                           }}
+                           >
+                              <Icon fontSize="medium" color="inherit">
+                                 {props.widgetMetaData.icon}
+                              </Icon>
+                           </Box>
+                        ) :
+                        (
+                           <Box ml={3} mt={-4} sx={{
+                              display: "flex",
+                              justifyContent: "center",
+                              alignItems: "center",
+                              width: "64px",
+                              height: "64px",
+                              borderRadius: "8px",
+                              background: colors.info.main,
+                              color: "#ffffff",
+                              float: "left"
+                           }}
+                           >
+                              <Icon fontSize="medium" color="inherit">lock</Icon>
+                           </Box>
                         )
-                     }
-                     {localLabelAdditionalElementsLeft}
-                  </Box>
-                  <Box display="flex">
-                     {
-                        hasPermission && props.widgetData?.sublabel && (sublabelElement)
-                     }
-                  </Box>
+                  }
+                  {
+                     hasPermission && labelToUse && (labelElement)
+                  }
+                  {
+                     hasPermission && (
+                        labelComponentsLeft.map((component, i) =>
+                        {
+                           return (<span key={i}>{renderComponent(component, i)}</span>);
+                        })
+                     )
+                  }
+                  {props.labelAdditionalElementsLeft}
                </Box>
                <Box>
                   {
@@ -800,7 +615,6 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
                         })
                      )
                   }
-                  {localLabelAdditionalElementsRight}
                </Box>
             </Box>
          }
@@ -836,27 +650,17 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
          }
          {
             !errorLoading && props?.footerHTML && (
-               <Box mt={isTable ? "36px" : 1} ml={isTable ? 0 : 3} mr={isTable ? 0 : 3} mb={isTable ? "-12px" : 2} sx={{fontWeight: 300, color: "#7b809a", display: "flex", alignContent: "flex-end", fontSize: "14px"}}>{parse(props.footerHTML)}</Box>
+               <Box mt={1} ml={3} mr={3} mb={2} sx={{fontWeight: 300, color: "#7b809a", display: "flex", alignContent: "flex-end", fontSize: "14px"}}>{parse(props.footerHTML)}</Box>
             )
          }
       </Box>;
 
    const padding = props.omitPadding ? "auto" : "24px 16px";
-
-   ///////////////////////////////////////////////////
-   // try to make tables fill their entire "parent" //
-   ///////////////////////////////////////////////////
-   let noCardMarginBottom = "unset";
-   if (isTable)
-   {
-      noCardMarginBottom = "-8px";
-   }
-
    return props.widgetMetaData?.isCard
-      ? <Card sx={{marginTop: props.widgetMetaData?.icon ? 2 : 0, width: "100%", p: padding}} className="widget inCard">
+      ? <Card sx={{marginTop: props.widgetMetaData?.icon ? 2 : 0, width: "100%", p: padding}} className={fullScreenWidgetClassName}>
          {widgetContent}
       </Card>
-      : <span style={{width: "100%", padding: padding, marginBottom: noCardMarginBottom}} className="widget noCard">{widgetContent}</span>;
+      : <span style={{width: "100%", padding: padding}}>{widgetContent}</span>;
 }
 
 export default Widget;

src/qqq/components/widgets/WidgetBlock.tsx

@@ -1,90 +0,0 @@
-/*
- * 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 {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import {Alert, Skeleton} from "@mui/material";
-import React from "react";
-import BigNumberBlock from "qqq/components/widgets/blocks/BigNumberBlock";
-import {BlockData} from "qqq/components/widgets/blocks/BlockModels";
-import DividerBlock from "qqq/components/widgets/blocks/DividerBlock";
-import NumberIconBadgeBlock from "qqq/components/widgets/blocks/NumberIconBadgeBlock";
-import ProgressBarBlock from "qqq/components/widgets/blocks/ProgressBarBlock";
-import TableSubRowDetailRowBlock from "qqq/components/widgets/blocks/TableSubRowDetailRowBlock";
-import TextBlock from "qqq/components/widgets/blocks/TextBlock";
-import UpOrDownNumberBlock from "qqq/components/widgets/blocks/UpOrDownNumberBlock";
-import CompositeWidget from "qqq/components/widgets/CompositeWidget";
-
-
-interface WidgetBlockProps
-{
-   widgetMetaData: QWidgetMetaData;
-   block: BlockData;
-}
-
-
-/*******************************************************************************
- ** Component to render a single Block in the widget framework!
- *******************************************************************************/
-export default function WidgetBlock({widgetMetaData, block}: WidgetBlockProps): JSX.Element
-{
-   if(!block)
-   {
-      return (<Skeleton />);
-   }
-
-   if(!block.values)
-   {
-      block.values = {};
-   }
-
-   if(!block.styles)
-   {
-      block.styles = {};
-   }
-
-   if(block.blockTypeName == "COMPOSITE")
-   {
-      // @ts-ignore - special case for composite type block...
-      return (<CompositeWidget widgetMetaData={widgetMetaData} data={block} />);
-   }
-
-   switch(block.blockTypeName)
-   {
-      case "TEXT":
-         return (<TextBlock widgetMetaData={widgetMetaData} data={block} />);
-      case "NUMBER_ICON_BADGE":
-         return (<NumberIconBadgeBlock widgetMetaData={widgetMetaData} data={block} />);
-      case "UP_OR_DOWN_NUMBER":
-         return (<UpOrDownNumberBlock widgetMetaData={widgetMetaData} data={block} />);
-      case "TABLE_SUB_ROW_DETAIL_ROW":
-         return (<TableSubRowDetailRowBlock widgetMetaData={widgetMetaData} data={block} />);
-      case "PROGRESS_BAR":
-         return (<ProgressBarBlock widgetMetaData={widgetMetaData} data={block} />);
-      case "DIVIDER":
-         return (<DividerBlock widgetMetaData={widgetMetaData} data={block} />);
-      case "BIG_NUMBER":
-         return (<BigNumberBlock widgetMetaData={widgetMetaData} data={block} />);
-      default:
-         return (<Alert sx={{m: "0.5rem"}} color="warning">Unsupported block type: {block.blockTypeName}</Alert>)
-   }
-
-}

src/qqq/components/widgets/WidgetUtils.tsx

@@ -1,100 +0,0 @@
-/*
- * 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 {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import Button from "@mui/material/Button";
-import Icon from "@mui/material/Icon";
-import Tooltip from "@mui/material/Tooltip/Tooltip";
-import Typography from "@mui/material/Typography";
-import React from "react";
-import colors from "qqq/assets/theme/base/colors";
-import {WidgetData} from "qqq/components/widgets/Widget";
-import ValueUtils from "qqq/utils/qqq/ValueUtils";
-
-/*******************************************************************************
- ** Utility class used by Widgets
- **
- *******************************************************************************/
-export class WidgetUtils
-{
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public static generateExportButton = (onExportClick: () => void): JSX.Element =>
-   {
-      return (<Typography key={1} variant="body2" py={0} px={0} display="inline" position="relative" top="-0.25rem">
-         <Tooltip title="Export">
-            <Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={false}>
-               <Icon sx={{color: colors.gray.main, fontSize: 1.125}}>save_alt</Icon>
-            </Button>
-         </Tooltip>
-      </Typography>);
-   };
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public static widgetCsvDataToString = (data: WidgetData): string =>
-   {
-      function isNumeric(x: any)
-      {
-         return !isNaN(Number(x));
-      }
-
-      let csv = "";
-      for (let i = 0; i < data.csvData.length; i++)
-      {
-         for (let j = 0; j < data.csvData[i].length; j++)
-         {
-            if (j > 0)
-            {
-               csv += ",";
-            }
-
-            let cell = data.csvData[i][j];
-            if (cell && isNumeric(String(cell)))
-            {
-               csv += cell;
-            }
-            else
-            {
-               csv += `"${ValueUtils.cleanForCsv(cell)}"`;
-            }
-         }
-         csv += "\n";
-      }
-
-      return (csv);
-   };
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public static makeExportFileName = (data: WidgetData, widgetMetaData: QWidgetMetaData): string =>
-   {
-      const fileName = (data?.label ?? widgetMetaData.label) + " " + ValueUtils.formatDateTimeForFileName(new Date()) + ".csv";
-      return (fileName);
-   };
-
-}

src/qqq/components/widgets/blocks/BigNumberBlock.tsx

@@ -1,67 +0,0 @@
-/*
- * 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 BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
-import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
-
-
-/*******************************************************************************
- ** Block that renders ... a big number, optionally with some other stuff.
- **
- ** ${heading}
- ** ${number} ${context}
- *******************************************************************************/
-export default function BigNumberBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
-{
-   let flexJustifyContent = "normal";
-   let flexAlignItems = "baseline";
-
-   return (
-      <div style={{width: data.styles.width ?? "auto"}}>
-
-         <div style={{fontWeight: "700", fontSize: "0.875rem", color: "#3D3D3D", marginBottom: "-0.5rem"}}>
-            <BlockElementWrapper metaData={widgetMetaData} data={data} slot="heading">
-               <span>{data.values.heading}</span>
-            </BlockElementWrapper>
-         </div>
-
-         <div style={{display: "flex", alignItems: flexAlignItems, justifyContent: flexJustifyContent}}>
-
-            <div style={{display: "flex", alignItems: "baseline"}}>
-               <div style={{fontWeight: "700", fontSize: "2rem", marginRight: "0.25rem"}}>
-                  <BlockElementWrapper metaData={widgetMetaData} data={data} slot="number">
-                     <span style={{color: data.styles.numberColor}}>{data.values.number}</span>
-                  </BlockElementWrapper>
-               </div>
-               {
-                  data.values.context &&
-                  <div style={{fontWeight: "500", fontSize: "0.875rem", color: "#7b809a"}}>
-                     <BlockElementWrapper metaData={widgetMetaData} data={data} slot="context">
-                        <span>{data.values.context}</span>
-                     </BlockElementWrapper>
-                  </div>
-               }
-            </div>
-
-         </div>
-      </div>
-   );
-}

src/qqq/components/widgets/blocks/BlockElementWrapper.tsx

@@ -1,106 +0,0 @@
-/*
- * 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 {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import {Tooltip} from "@mui/material";
-import React, {ReactElement, useContext} from "react";
-import {Link} from "react-router-dom";
-import QContext from "QContext";
-import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
-import {BlockData, BlockLink, BlockTooltip} from "qqq/components/widgets/blocks/BlockModels";
-
-interface BlockElementWrapperProps
-{
-   data: BlockData;
-   metaData: QWidgetMetaData;
-   slot: string
-   linkProps?: any;
-   children: ReactElement;
-}
-
-/*******************************************************************************
- ** For Blocks - wrap their "slot" elements with an optional tooltip and/or link
- *******************************************************************************/
-export default function BlockElementWrapper({data, metaData, slot, linkProps, children}: BlockElementWrapperProps): JSX.Element
-{
-   const {helpHelpActive} = useContext(QContext);
-
-   let link: BlockLink;
-   let tooltip: BlockTooltip;
-
-   if(slot)
-   {
-      link = data.linkMap && data.linkMap[slot.toUpperCase()];
-      if(!link)
-      {
-         link = data.link;
-      }
-
-      tooltip = data.tooltipMap && data.tooltipMap[slot.toUpperCase()];
-      if(!tooltip)
-      {
-         tooltip = data.tooltip;
-      }
-   }
-   else
-   {
-      link = data.link;
-      tooltip = data.tooltip;
-   }
-
-   if(!tooltip)
-   {
-      const helpRoles = ["ALL_SCREENS"]
-
-      ///////////////////////////////////////////////////////////////////////////////////////////////
-      // the full keys in the helpContent table will look like:                                    //
-      // widget:MyCoolWidget;slot=myBlockId,label (if the block has a blockId in data)             //
-      // widget:MyCoolWidget;slot=label (no blockId; note, label is slot name here)                //
-      // in the widget metaData, the map of helpContent will just have the "slot" portion as a key //
-      ///////////////////////////////////////////////////////////////////////////////////////////////
-      const key = data.blockId ? `${data.blockId},${slot}` : slot;
-      const showHelp = helpHelpActive || hasHelpContent(metaData?.helpContent?.get(key), helpRoles);
-
-      if(showHelp)
-      {
-         const formattedHelpContent = <HelpContent helpContents={metaData?.helpContent?.get(key)} roles={helpRoles} helpContentKey={`widget:${metaData?.name};slot:${key}`} />;
-         tooltip = {title: formattedHelpContent, placement: "bottom"}
-      }
-   }
-
-   let rs = children;
-
-   if(link)
-   {
-      rs = <Link to={link.href} target={link.target} style={{color: "#546E7A"}} {...linkProps}>{rs}</Link>
-   }
-
-   if(tooltip)
-   {
-      let placement = tooltip.placement ? tooltip.placement.toLowerCase() : "bottom"
-
-      // @ts-ignore - placement possible values
-      rs = <Tooltip title={tooltip.title} placement={placement}>{rs}</Tooltip>
-   }
-
-   return (rs);
-}

src/qqq/components/widgets/blocks/BlockModels.ts

@@ -1,59 +0,0 @@
-/*
- * 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 {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-
-
-export interface BlockData
-{
-   blockId?: string;
-   blockTypeName: string;
-
-   tooltip?: BlockTooltip;
-   link?: BlockLink;
-   tooltipMap?: {[slot: string]: BlockTooltip};
-   linkMap?: {[slot: string]: BlockLink};
-
-   values: any;
-   styles?: any;
-}
-
-
-export interface BlockTooltip
-{
-   title: string | JSX.Element;
-   placement: string;
-}
-
-
-export interface BlockLink
-{
-   href: string;
-   target: string;
-}
-
-
-export interface StandardBlockComponentProps
-{
-   widgetMetaData: QWidgetMetaData;
-   data: BlockData;
-}
-

src/qqq/components/widgets/blocks/DividerBlock.tsx

@@ -1,33 +0,0 @@
-/*
- * 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 {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
-
-
-/*******************************************************************************
- ** Block that renders a simple dividing line
- ** margins & width are set such that it covers the padding of a card.
- ** if we need to use it differently, a style attribute should be added to its backend data.
- *******************************************************************************/
-export default function DividerBlock({}: StandardBlockComponentProps): JSX.Element
-{
-   return (<div style={{margin: "1rem -1rem", width: "calc(100% + 2rem)", borderBottom: "1px solid #E0E0E0"}} />);
-}

src/qqq/components/widgets/blocks/NumberIconBadgeBlock.tsx

@@ -1,48 +0,0 @@
-/*
- * 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 Icon from "@mui/material/Icon";
-import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
-import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
-
-/*******************************************************************************
- ** Block that renders ... a number, and an icon, like a badge.
- **
- ** ${number} ${icon}
- *******************************************************************************/
-export default function NumberIconBadgeBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
-{
-   return (
-      <div style={{display: "inline-block", whiteSpace: "nowrap", color: data.styles.color}}>
-         {
-            data.values.number &&
-            <BlockElementWrapper metaData={widgetMetaData} data={data} slot="number">
-               <span style={{color: data.styles.color, fontSize: "0.875rem"}}>{data.values.number}</span>
-            </BlockElementWrapper>
-         }
-         {
-            data.values.iconName &&
-            <BlockElementWrapper metaData={widgetMetaData} data={data} slot="icon">
-               <Icon style={{color: data.styles.color, fontSize: "1rem", position: "relative", top: "3px"}}>{data.values.iconName}</Icon>
-            </BlockElementWrapper>
-         }
-      </div>);
-}

src/qqq/components/widgets/blocks/ProgressBarBlock.tsx

@@ -1,70 +0,0 @@
-/*
- * 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 Typography from "@mui/material/Typography";
-import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
-import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
-
-
-/*******************************************************************************
- ** Block that renders a progress bar!
- **
- ** Values:
- **    ${heading}
- **    [${percent}===___] ${value ?? percent}
- **
- ** Slots:
- **    ${heading}
- **    ${bar}             ${value}
- *******************************************************************************/
-export default function ProgressBarBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
-{
-   return (
-      <Typography component="div" variant="button" color="text" fontWeight="light" sx={{textTransform: "none"}}>
-         {
-            data.values.heading &&
-            <div style={{marginBottom: "0.25rem", fontWeight: 500, color: "#3D3D3D"}}>
-               <BlockElementWrapper metaData={widgetMetaData} data={data} slot="heading">
-                  <span>{data.values.heading}</span>
-               </BlockElementWrapper>
-            </div>
-         }
-
-         <div style={{display: "flex", alignItems: "center", marginBottom: "0.75rem"}}>
-
-            <BlockElementWrapper metaData={widgetMetaData} data={data} slot="bar" linkProps={{style: {width: "100%"}}}>
-               <div style={{background: "#E0E0E0", width: "100%", borderRadius: "0.5rem", height: "1rem"}}>
-                  {
-                     data.values.percent > 0 ? <div style={{background: data.styles.barColor ?? "#0062ff", minWidth: "1rem", width: `${data.values.percent}%`, borderRadius: "0.5rem", height: "1rem"}}></div> : <></>
-                  }
-               </div>
-            </BlockElementWrapper>
-
-            <div style={{width: "60px", textAlign: "right", fontWeight: 600, color: "#3D3D3D"}}>
-               <BlockElementWrapper metaData={widgetMetaData} data={data} slot="value">
-                  <span>{data.values.value ?? `${(data.values.percent as number).toFixed(1)}%`}</span>
-               </BlockElementWrapper>
-            </div>
-
-         </div>
-      </Typography>);
-
-}

src/qqq/components/widgets/blocks/TableSubRowDetailRowBlock.tsx

@@ -1,54 +0,0 @@
-/*
- * 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 BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
-import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
-
-
-/*******************************************************************************
- ** Block that renders a label & value, meant to be used as a detail-row in a
- ** sub-row within a table widget
- **
- ** ${label} ${value}
- *******************************************************************************/
-export default function TableSubRowDetailRowBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
-{
-   return (
-      <div style={{display: "flex", maxWidth: "calc(100% - 24px)", justifyContent: "space-between"}}>
-
-         {
-            data.values.label &&
-            <div style={{overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis"}}>
-               <BlockElementWrapper metaData={widgetMetaData} data={data} slot="label">
-                  <span style={{color: data.styles.labelColor}}>{data.values.label}</span>
-               </BlockElementWrapper>
-            </div>
-         }
-
-         {
-            data.values.value &&
-            <BlockElementWrapper metaData={widgetMetaData} data={data} slot="value">
-               <span style={{color: data.styles.valueColor}}>{data.values.value}</span>
-            </BlockElementWrapper>
-         }
-      </div>
-   );
-}

src/qqq/components/widgets/blocks/TextBlock.tsx

@@ -1,37 +0,0 @@
-/*
- * 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 BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
-import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
-
-/*******************************************************************************
- ** Block that renders ... just some text.
- **
- ** ${text}
- *******************************************************************************/
-export default function TextBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
-{
-   return (
-      <BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
-         <span style={{fontSize: "1.000rem"}}>{data.values.text}</span>
-      </BlockElementWrapper>
-   );
-}

src/qqq/components/widgets/blocks/UpOrDownNumberBlock.tsx

@@ -1,81 +0,0 @@
-/*
- * 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 Icon from "@mui/material/Icon";
-import React from "react";
-import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
-import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
-
-
-/*******************************************************************************
- ** Block that renders an up/down icon, a number, and some context
- **
- ** ${icon} ${number} ${context}
- *
- ** or, if style.isStacked:
- *
- ** ${icon} ${number}
- ** ${context}
- *******************************************************************************/
-export default function UpOrDownNumberBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
-{
-   if (!data.styles)
-   {
-      data.styles = {};
-   }
-
-   if (!data.values)
-   {
-      data.values = {};
-   }
-
-   const UP_ICON = "arrow_drop_up";
-   const DOWN_ICON = "arrow_drop_down";
-
-   const defaultGreenColor = "#2BA83F";
-   const defaultRedColor = "#FB4141";
-
-   const goodOrBadColor = data.styles.colorOverride ?? (data.values.isGood ? defaultGreenColor : defaultRedColor);
-   const iconName = data.values.isUp ? UP_ICON : DOWN_ICON;
-
-   return (
-      <>
-         <div style={{display: "flex", flexDirection: data.styles.isStacked ? "column" : "row", alignItems: data.styles.isStacked ? "flex-end" : "baseline"}}>
-
-            <div style={{display: "flex", alignItems: "baseline", fontWeight: 700, fontSize: ".875rem"}}>
-               <BlockElementWrapper metaData={widgetMetaData} data={data} slot="number">
-                  <>
-                     <Icon sx={{color: goodOrBadColor, alignSelf: "flex-end", fontSize: "2.25rem !important", lineHeight: "0.875rem", height: "1rem", width: "2rem",}}>{iconName}</Icon>
-                     <span style={{color: goodOrBadColor}}>{data.values.number}</span>
-                  </>
-               </BlockElementWrapper>
-            </div>
-
-            <div style={{fontWeight: 500, fontSize: "0.875rem", color: "#7b809a", marginLeft: "0.25rem"}}>
-               <BlockElementWrapper metaData={widgetMetaData} data={data} slot="context">
-                  <span>{data.values.context}</span>
-               </BlockElementWrapper>
-            </div>
-
-         </div>
-      </>
-   );
-}

src/qqq/components/widgets/charts/StackedBarChart.tsx

@@ -39,79 +39,65 @@ ChartJS.register(
    Legend
 );
 
-export const makeOptions = (data: DefaultChartData) =>
-{
-   return({
-      maintainAspectRatio: false,
-      responsive: true,
-      animation: {
-         duration: 0
-      },
-      elements: {
-         bar: {
-            borderRadius: 4
-         }
-      },
-      onHover: function (event: any, elements: any[], chart: any)
-      {
-         if(event.type == "mousemove" && elements.length > 0 && data.urls && data.urls.length > elements[0].index && data.urls[elements[0].index])
-         {
-            chart.canvas.style.cursor = "pointer";
-         }
-         else
-         {
-            chart.canvas.style.cursor = "default";
-         }
-      },
-      plugins: {
-         tooltip: {
-            // todo - some configs around this
-            callbacks: {
-               title: function(context: any)
+export const options = {
+   maintainAspectRatio: false,
+   responsive: true,
+   animation: {
+      duration: 0
+   },
+   elements: {
+      bar: {
+         borderRadius: 4
+      }
+   },
+   plugins: {
+      tooltip: {
+         // todo - some configs around this
+         callbacks: {
+            title: function(context: any)
+            {
+               return ("");
+            },
+            label: function(context: any)
+            {
+               if(context.dataset.label.startsWith(context.label))
+               {
+                  return `${context.label}: ${context.formattedValue}`;
+               }
+               else
                {
                   return ("");
-               },
-               label: function(context: any)
-               {
-                  if(context.dataset.label.startsWith(context.label))
-                  {
-                     return `${context.label}: ${context.formattedValue}`;
-                  }
-                  else
-                  {
-                     return ("");
-                  }
-               }
-            }
-         },
-         legend: {
-            position: "bottom",
-            labels: {
-               usePointStyle: true,
-               pointStyle: "circle",
-               boxHeight: 6,
-               boxWidth: 6,
-               padding: 12,
-               font: {
-                  size: 14
                }
             }
          }
       },
-      scales: {
-         x: {
-            stacked: true,
-            grid: {display: false},
-            ticks: {autoSkip: false, maxRotation: 90}
-         },
-         y: {
-            stacked: true,
-            position: "right",
-            ticks: {precision: 0}
-         },
+      legend: {
+         position: "bottom",
+         labels: {
+            usePointStyle: true,
+            pointStyle: "circle",
+            boxHeight: 6,
+            boxWidth: 6,
+            padding: 12,
+            font: {
+               size: 14
+            }
+         }
+      }
+   },
+   scales: {
+      x: {
+         stacked: true,
+         grid: {display: false},
+         ticks: {autoSkip: false, maxRotation: 90}
       },
-   });
-}
+      y: {
+         stacked: true,
+         position: "right",
+         ticks: {precision: 0}
+      },
+   },
+};
 
 interface Props
 {
@@ -165,7 +151,7 @@ function StackedBarChart({data, chartSubheaderData}: Props): JSX.Element
       <Box>
          {chartSubheaderData && (<ChartSubheaderWithData chartSubheaderData={chartSubheaderData} />)}
          <Box width="100%" height="300px">
-            <Bar data={data} options={makeOptions(data)} getElementsAtEvent={handleClick} />
+            <Bar data={data} options={options} getElementsAtEvent={handleClick} />
          </Box>
       </Box>
    ) : <Skeleton sx={{marginLeft: "20px", marginRight: "20px", height: "200px"}} />;

src/qqq/components/widgets/charts/piechart/PieChart.tsx

@@ -70,7 +70,7 @@ function PieChart({description, chartData, chartSubheaderData}: Props): JSX.Elem
          chartData.dataset.backgroundColors = chartColors;
       }
    }
-   const {data, options} = configs(chartData?.labels || [], chartData?.dataset || {}, chartData?.dataset?.urls);
+   const {data, options} = configs(chartData?.labels || [], chartData?.dataset || {});
 
    useEffect(() =>
    {

src/qqq/components/widgets/charts/piechart/PieChartConfigs.ts

@@ -23,7 +23,7 @@ import colors from "qqq/assets/theme/base/colors";
 
 const {gradients, dark} = colors;
 
-function configs(labels: any, datasets: any, urls: string[] | undefined)
+function configs(labels: any, datasets: any)
 {
    const backgroundColors = [];
 
@@ -66,17 +66,6 @@ function configs(labels: any, datasets: any, urls: string[] | undefined)
       options: {
          maintainAspectRatio: false,
          responsive: true,
-         onHover: function (event: any, elements: any[], chart: any)
-         {
-            if(event.type == "mousemove" && elements.length > 0 && urls && urls.length > elements[0].index && urls[elements[0].index])
-            {
-               chart.canvas.style.cursor = "pointer";
-            }
-            else
-            {
-               chart.canvas.style.cursor = "default";
-            }
-         },
          plugins: {
             tooltip: {
                callbacks: {

src/qqq/components/widgets/components/WidgetDropdownMenu.tsx

@@ -19,23 +19,18 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {CalendarTodayOutlined} from "@mui/icons-material";
-import {Collapse, InputAdornment, Theme} from "@mui/material";
+import {Collapse, Theme, InputAdornment} from "@mui/material";
 import Autocomplete from "@mui/material/Autocomplete";
 import Box from "@mui/material/Box";
 import Icon from "@mui/material/Icon";
 import IconButton from "@mui/material/IconButton";
 import TextField from "@mui/material/TextField";
 import {SxProps} from "@mui/system";
-import {DatePicker, DateValidationError, LocalizationProvider, PickerChangeHandlerContext, PickerValidDate} from "@mui/x-date-pickers";
-import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
-import dayjs from "dayjs";
 import {Field, Form, Formik} from "formik";
-import QContext from "QContext";
+import React, {useState} from "react";
 import colors from "qqq/assets/theme/base/colors";
 import MDInput from "qqq/components/legacy/MDInput";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
-import React, {useContext, useEffect, useState} from "react";
 
 
 export interface DropdownOption
@@ -50,7 +45,6 @@ export interface DropdownOption
 interface Props
 {
    name: string;
-   type?: string;
    defaultValue?: any;
    label?: string;
    startIcon?: string;
@@ -102,7 +96,7 @@ function makeBackendValuesFromFrontendValues(frontendDefaultValues: StartAndEndD
    return (backendTimeValues);
 }
 
-function WidgetDropdownMenu({name, type, defaultValue, label, startIcon, width, disableClearable, allowBackAndForth, backAndForthInverted, dropdownOptions, onChangeCallback, sx}: Props): JSX.Element
+function WidgetDropdownMenu({name, defaultValue, label, startIcon, width, disableClearable, allowBackAndForth, backAndForthInverted, dropdownOptions, onChangeCallback, sx}: Props): JSX.Element
 {
    const [customTimesVisible, setCustomTimesVisible] = useState(defaultValue && defaultValue.id && defaultValue.id.startsWith("custom,"));
    const [customTimeValuesFrontend, setCustomTimeValuesFrontend] = useState(parseCustomTimeValuesFromDefaultValue(defaultValue) as StartAndEndDate);
@@ -111,27 +105,16 @@ function WidgetDropdownMenu({name, type, defaultValue, label, startIcon, width,
 
    const [isOpen, setIsOpen] = useState(false);
    const [value, setValue] = useState(defaultValue);
-   const [dateValue, setDateValue] = useState(defaultValue);
    const [inputValue, setInputValue] = useState("");
 
    const [backDisabled, setBackDisabled] = useState(false);
    const [forthDisabled, setForthDisabled] = useState(false);
 
-   const {accentColor} = useContext(QContext);
-
    const doForceOpen = (event: React.MouseEvent<HTMLDivElement>) =>
    {
       setIsOpen(true);
    };
 
-   useEffect(() =>
-   {
-      if (type == "DATE_PICKER")
-      {
-         handleOnChange(null, defaultValue, null);
-      }
-   }, [defaultValue]);
-
    function getSelectedIndex(value: DropdownOption)
    {
       let currentIndex = null;
@@ -146,19 +129,9 @@ function WidgetDropdownMenu({name, type, defaultValue, label, startIcon, width,
       return currentIndex;
    }
 
-
-   const navigateBackAndForth = (event: React.MouseEvent, direction: -1 | 1, type: string) =>
+   const navigateBackAndForth = (event: React.MouseEvent, direction: -1 | 1) =>
    {
       event.stopPropagation();
-
-      if (type == "DATE_PICKER")
-      {
-         let currentDate = new Date(dateValue);
-         currentDate.setDate(currentDate.getDate() + direction);
-         handleOnChange(null, currentDate, null);
-         return;
-      }
-
       let currentIndex = getSelectedIndex(value);
 
       if (currentIndex == null)
@@ -183,26 +156,9 @@ function WidgetDropdownMenu({name, type, defaultValue, label, startIcon, width,
    };
 
 
-   const handleDatePickerOnChange = (value: PickerValidDate, context: PickerChangeHandlerContext<DateValidationError>) =>
-   {
-      if (value.isValid())
-      {
-         handleOnChange(null, value.toDate(), null);
-      }
-   };
-
-
    const handleOnChange = (event: any, newValue: any, reason: string) =>
    {
-      if (type == "DATE_PICKER")
-      {
-         setDateValue(newValue);
-         newValue = {"id": new Date(newValue).toLocaleDateString()};
-      }
-      else
-      {
-         setValue(newValue);
-      }
+      setValue(newValue);
 
       const isTimeframeCustom = name == "timeframe" && newValue && newValue.id == "custom";
       setCustomTimesVisible(isTimeframeCustom);
@@ -294,123 +250,86 @@ function WidgetDropdownMenu({name, type, defaultValue, label, startIcon, width,
 
    const fontSize = "1rem";
    let optionPaddingLeftRems = 0.75;
-   if (startIcon)
+   if(startIcon)
    {
-      optionPaddingLeftRems += allowBackAndForth ? 1.5 : 1.75;
+      optionPaddingLeftRems += allowBackAndForth ? 1.5 : 1.75
    }
-   if (allowBackAndForth)
+   if(allowBackAndForth)
    {
       optionPaddingLeftRems += 2.5;
    }
 
-   if (type == "DATE_PICKER")
-   {
-      return (
-         <Box sx={{
-            ...sx,
-            background: "white",
-            width: "250px",
-            borderRadius: "0.75rem !important",
-            border: `1px solid ${colors.grayLines.main}`,
-            "& *": {cursor: "pointer"}
-         }} display="flex" alignItems="center" onClick={(event) => doForceOpen(event)}>
-            {allowBackAndForth && <IconButton sx={{padding: 0, margin: "8px"}} onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? 1 : -1, type)} disabled={backDisabled}><Icon>navigate_before</Icon></IconButton>}
-            <LocalizationProvider dateAdapter={AdapterDayjs}>
-               <DatePicker
-                  sx={{paddingRight: "8px"}}
-                  defaultValue={dayjs(defaultValue)}
-                  name={name}
-                  value={dayjs(dateValue)}
-                  onChange={handleDatePickerOnChange}
-                  slots={{
-                     openPickerIcon: CalendarTodayOutlined
-                  }}
-                  slotProps={{
-                     openPickerIcon: {sx: {fontSize: "1.25rem !important", color: "#757575"}},
-                     actionBar: {actions: ["today"]},
-                     textField: {variant: "standard", InputProps: {sx: {fontSize: "16px", color: "#495057"}, disableUnderline: true}}
-                  }}
-               />
-            </LocalizationProvider>
-            {allowBackAndForth && <IconButton onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? -1 : 1, type)} disabled={forthDisabled}><Icon>navigate_next</Icon></IconButton>}
-         </Box>
-      );
-   }
-   else
-   {
-      return (
-         dropdownOptions ? (
-            <Box sx={{
-               whiteSpace: "nowrap", display: "flex",
-               "& .MuiPopperUnstyled-root": {
-                  border: `1px solid ${colors.grayLines.main}`,
-                  borderTop: "none",
-                  borderRadius: "0 0 0.75rem 0.75rem",
-                  padding: 0,
-               }, "& .MuiPaper-rounded": {
-                  borderRadius: "0 0 0.75rem 0.75rem",
+   return (
+      dropdownOptions ? (
+         <Box sx={{whiteSpace: "nowrap", display: "flex",
+            "& .MuiPopperUnstyled-root": {
+               border: `1px solid ${colors.grayLines.main}`,
+               borderTop: "none",
+               borderRadius: "0 0 0.75rem 0.75rem",
+               padding: 0,
+            }, "& .MuiPaper-rounded": {
+               borderRadius: "0 0 0.75rem 0.75rem",
+            }
+         }} className="dashboardDropdownMenu">
+            <Autocomplete
+               id={`${label}-combo-box`}
+
+               defaultValue={defaultValue}
+               value={value}
+               onChange={handleOnChange}
+               inputValue={inputValue}
+               onInputChange={handleOnInputChange}
+
+               isOptionEqualToValue={(option, value) => option.id === value.id}
+
+               open={isOpen}
+               onOpen={() => setIsOpen(true)}
+               onClose={() => setIsOpen(false)}
+
+               size="small"
+               disablePortal
+               disableClearable={disableClearable}
+               options={dropdownOptions}
+               sx={{
+                  ...sx,
+                  cursor: "pointer",
+                  display: "inline-block",
+                  "& .MuiOutlinedInput-notchedOutline": {
+                     border: "none"
+                  },
+               }}
+               renderInput={(params: any) =>
+                  <>
+                     <Box sx={{width: `${width}px`, background: "white", borderRadius: isOpen ? "0.75rem 0.75rem 0 0" : "0.75rem", border: `1px solid ${colors.grayLines.main}`, "& *": {cursor: "pointer"}}} display="flex" alignItems="center" onClick={(event) => doForceOpen(event)}>
+                        {allowBackAndForth && <IconButton onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? 1 : -1)} disabled={backDisabled}><Icon>navigate_before</Icon></IconButton>}
+                        <TextField {...params} placeholder={label} sx={{
+                           "& .MuiInputBase-input": {
+                              fontSize: fontSize
+                           }
+                        }} InputProps={{...params.InputProps, startAdornment: startAdornment/*, endAdornment: endAdornment*/}}
+                        />
+                        {allowBackAndForth && <IconButton onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? -1 : 1)} disabled={forthDisabled}><Icon>navigate_next</Icon></IconButton>}
+                     </Box>
+                  </>
                }
-            }} className="dashboardDropdownMenu">
-               <Autocomplete
-                  id={`${label}-combo-box`}
+               renderOption={(props, option: DropdownOption) => (
+                  <li {...props} style={{whiteSpace: "normal", fontSize: fontSize, paddingLeft: `${optionPaddingLeftRems}rem`}}>{option.label}</li>
+               )}
 
-                  defaultValue={defaultValue}
-                  value={value}
-                  onChange={handleOnChange}
-                  inputValue={inputValue}
-                  onInputChange={handleOnInputChange}
+               noOptionsText={<Box fontSize={fontSize}>No options found</Box>}
 
-                  isOptionEqualToValue={(option, value) => option.id === value.id}
-
-                  open={isOpen}
-                  onOpen={() => setIsOpen(true)}
-                  onClose={() => setIsOpen(false)}
-
-                  size="small"
-                  disablePortal
-                  disableClearable={disableClearable}
-                  options={dropdownOptions}
-                  sx={{
-                     ...sx,
-                     cursor: "pointer",
-                     display: "inline-block",
-                     "& .MuiOutlinedInput-notchedOutline": {
-                        border: "none"
-                     },
-                  }}
-                  renderInput={(params: any) =>
-                     <>
-                        <Box sx={{width: `${width}px`, background: "white", borderRadius: isOpen ? "0.75rem 0.75rem 0 0" : "0.75rem", border: `1px solid ${colors.grayLines.main}`, "& *": {cursor: "pointer"}}} display="flex" alignItems="center" onClick={(event) => doForceOpen(event)}>
-                           {allowBackAndForth && <IconButton onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? 1 : -1, type)} disabled={backDisabled}><Icon>navigate_before</Icon></IconButton>}
-                           <TextField {...params} placeholder={label} sx={{
-                              "& .MuiInputBase-input": {
-                                 fontSize: fontSize
-                              }
-                           }} InputProps={{...params.InputProps, startAdornment: startAdornment/*, endAdornment: endAdornment*/}}
-                           />
-                           {allowBackAndForth && <IconButton onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? -1 : 1, type)} disabled={forthDisabled}><Icon>navigate_next</Icon></IconButton>}
-                        </Box>
-                     </>
-                  }
-                  renderOption={(props, option: DropdownOption) => (
-                     <li {...props} style={{whiteSpace: "normal", fontSize: fontSize, paddingLeft: `${optionPaddingLeftRems}rem`}}>{option.label}</li>
-                  )}
-
-                  noOptionsText={<Box fontSize={fontSize}>No options found</Box>}
-
-                  slotProps={{
-                     popper: {
-                        sx: {
-                           width: `${width}px!important`
-                        }
+               slotProps={{
+                  popper: {
+                     sx: {
+                        width: `${width}px!important`
                      }
-                  }}
-               />
-               {customTimes}
-            </Box>
-         ) : null
-      );
-   }
+                  }
+               }}
+            />
+            {customTimes}
+         </Box>
+      ) : null
+   );
 }
 
 export default WidgetDropdownMenu;

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

@@ -25,13 +25,14 @@ import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QC
 import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
 import {QFilterOrderBy} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterOrderBy";
 import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
-import {Chip} from "@mui/material";
 import Alert from "@mui/material/Alert";
 import Avatar from "@mui/material/Avatar";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
+import Chip from "@mui/material/Chip";
 import Divider from "@mui/material/Divider";
 import Grid from "@mui/material/Grid";
+import Icon from "@mui/material/Icon";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemAvatar from "@mui/material/ListItemAvatar";
@@ -41,6 +42,8 @@ import Snackbar from "@mui/material/Snackbar";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import Typography from "@mui/material/Typography";
+import React, {useReducer, useState} from "react";
+import AceEditor from "react-ace";
 import DataBagDataEditor, {DataBagDataEditorProps} from "qqq/components/databags/DataBagDataEditor";
 import DataBagPreview from "qqq/components/databags/DataBagPreview";
 import TabPanel from "qqq/components/misc/TabPanel";
@@ -54,8 +57,6 @@ import "ace-builds/src-noconflict/mode-java";
 import "ace-builds/src-noconflict/mode-javascript";
 import "ace-builds/src-noconflict/mode-json";
 import "ace-builds/src-noconflict/theme-github";
-import React, {useReducer, useState} from "react";
-import AceEditor from "react-ace";
 import "ace-builds/src-noconflict/ext-language_tools";
 
 const qController = Client.getInstance();
@@ -63,11 +64,12 @@ const qController = Client.getInstance();
 // Declaring props types for ViewForm
 interface Props
 {
-   dataBagId: number;
+   dataBagId: number
 }
 
 DataBagViewer.defaultProps =
-   {};
+   {
+   };
 
 export default function DataBagViewer({dataBagId}: Props): JSX.Element
 {
@@ -75,12 +77,12 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
    const [asyncLoadInited, setAsyncLoadInited] = useState(false);
    const [versionRecordList, setVersionRecordList] = useState(null as QRecord[]);
    const [selectedVersionRecord, setSelectedVersionRecord] = useState(null as QRecord);
-   const [currentVersionId, setCurrentVersionId] = useState(null as number);
+   const [currentVersionId , setCurrentVersionId] = useState(null as number);
    const [notFoundMessage, setNotFoundMessage] = useState(null);
    const [selectedTab, setSelectedTab] = useState(0);
    const [editorProps, setEditorProps] = useState(null as DataBagDataEditorProps);
    const [successText, setSuccessText] = useState(null as string);
-   const [failText, setFailText] = useState(null as string);
+   const [failText, setFailText] = useState(null as string)
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
    const [loadingSelectedVersion, _] = useState(new LoadingState(forceUpdate, "loading"));
@@ -98,13 +100,13 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
 
             const criteria = [new QFilterCriteria("dataBagId", QCriteriaOperator.EQUALS, [dataBagId])];
             const orderBys = [new QFilterOrderBy("sequenceNo", false)];
-            const filter = new QQueryFilter(criteria, orderBys, null, "AND", 0, 25);
+            const filter = new QQueryFilter(criteria, orderBys, "AND", 0, 25);
             const versions = await qController.query("dataBagVersion", filter);
             console.log("Fetched versions:");
             console.log(versions);
             setVersionRecordList(versions);
 
-            if (versions && versions.length > 0)
+            if(versions && versions.length > 0)
             {
                setCurrentVersionId(versions[0].values.get("id"));
                const latestVersion = await qController.get("dataBagVersion", versions[0].values.get("id"));
@@ -119,7 +121,7 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
          {
             if (e instanceof QException)
             {
-               if ((e as QException).status === 404)
+               if ((e as QException).status === "404")
                {
                   setNotFoundMessage("Data bag data could not be found.");
                   return;
@@ -360,7 +362,7 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
                                              <Typography variant="h6" pl={3}>Data Preview (Version {selectedVersionRecord?.values?.get("sequenceNo")})</Typography>
                                           </Box>
                                           <Box height="400px" overflow="auto" ml={1} fontSize="14px">
-                                             {loadingSelectedVersion.isNotLoading() && selectedTab == 1 && selectedVersionRecord?.values?.get("data") && <DataBagPreview json={selectedVersionRecord?.values?.get("data")} />}
+                                             {loadingSelectedVersion.isNotLoading() && selectedTab == 1 && selectedVersionRecord?.values?.get("data") && <DataBagPreview json={selectedVersionRecord?.values?.get("data")} /> }
                                              {loadingSelectedVersion.isLoadingSlow() && <Box pl={3}>Loading...</Box>}
                                           </Box>
                                        </Grid>
@@ -375,7 +377,7 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
                            <Modal open={editorProps !== null} onClose={(event, reason) => closeEditingScript(event, reason)}>
                               <DataBagDataEditor
                                  closeCallback={closeEditingScript}
-                                 {...editorProps}
+                                 {... editorProps}
                               />
                            </Modal>
                         }

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

@@ -1,209 +0,0 @@
-/*
- * 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 {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
-import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import Icon from "@mui/material/Icon";
-import type {Identifier, XYCoord} from "dnd-core";
-import colors from "qqq/assets/theme/base/colors";
-import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
-import {DragItemTypes, fieldAutoCompleteTextFieldSX, getSelectedFieldForAutoComplete, xIconButtonSX} from "qqq/components/widgets/misc/PivotTableSetupWidget";
-import {PivotTableDefinition, PivotTableGroupBy} from "qqq/models/misc/PivotTableDefinitionModels";
-import React, {FC, useRef} from "react";
-import {useDrag, useDrop} from "react-dnd";
-
-
-/*******************************************************************************
- ** component props
- *******************************************************************************/
-export interface PivotTableGroupByElementProps
-{
-   id: string;
-   index: number;
-   dragCallback: (rowsOrColumns: "rows" | "columns", dragIndex: number, hoverIndex: number) => void;
-   metaData: QInstance;
-   tableMetaData: QTableMetaData;
-   pivotTableDefinition: PivotTableDefinition;
-   usedGroupByFieldNames: string[];
-   availableFieldNames: string[];
-   isEditable: boolean;
-   groupBy: PivotTableGroupBy;
-   rowsOrColumns: "rows" | "columns";
-   callback: () => void;
-   attemptedSubmit?: boolean;
-}
-
-
-/*******************************************************************************
- ** item to support react-dnd
- *******************************************************************************/
-interface DragItem
-{
-   index: number;
-   id: string;
-   type: string;
-}
-
-/*******************************************************************************
- **
- *******************************************************************************/
-export const PivotTableGroupByElement: FC<PivotTableGroupByElementProps> = ({id, index, dragCallback, rowsOrColumns, metaData, tableMetaData, pivotTableDefinition, groupBy, usedGroupByFieldNames, availableFieldNames, isEditable, callback, attemptedSubmit}) =>
-{
-   ////////////////////////////////////////////////////////////////////////////
-   // credit: https://react-dnd.github.io/react-dnd/examples/sortable/simple //
-   ////////////////////////////////////////////////////////////////////////////
-   const ref = useRef<HTMLDivElement>(null);
-   const [{handlerId}, drop] = useDrop<DragItem, void, { handlerId: Identifier | null }>(
-      {
-         accept: rowsOrColumns == "rows" ? DragItemTypes.ROW : DragItemTypes.COLUMN,
-         collect(monitor)
-         {
-            return {
-               handlerId: monitor.getHandlerId(),
-            };
-         },
-         hover(item: DragItem, monitor)
-         {
-            if (!ref.current)
-            {
-               return;
-            }
-            const dragIndex = item.index;
-            const hoverIndex = index;
-
-            // Don't replace items with themselves
-            if (dragIndex === hoverIndex)
-            {
-               return;
-            }
-
-            // Determine rectangle on screen
-            const hoverBoundingRect = ref.current?.getBoundingClientRect();
-
-            // Get vertical middle
-            const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-
-            // Determine mouse position
-            const clientOffset = monitor.getClientOffset();
-
-            // Get pixels to the top
-            const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top;
-
-            // Only perform the move when the mouse has crossed half of the items height
-            // When dragging downwards, only move when the cursor is below 50%
-            // When dragging upwards, only move when the cursor is above 50%
-
-            // Dragging downwards
-            if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY)
-            {
-               return;
-            }
-
-            // Dragging upwards
-            if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY)
-            {
-               return;
-            }
-
-            // Time to actually perform the action
-            dragCallback(rowsOrColumns, dragIndex, hoverIndex);
-
-            // Note: we're mutating the monitor item here! Generally it's better to avoid mutations,
-            // but it's good here for the sake of performance to avoid expensive index searches.
-            item.index = hoverIndex;
-         },
-      });
-
-   const [{isDragging}, drag, preview] = useDrag({
-      type: rowsOrColumns == "rows" ? DragItemTypes.ROW : DragItemTypes.COLUMN,
-      item: () =>
-      {
-         return {id, index};
-      },
-      collect: (monitor: any) => ({
-         isDragging: monitor.isDragging(),
-      }),
-   });
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   const handleFieldChange = (event: any, newValue: any, reason: string) =>
-   {
-      groupBy.fieldName = newValue ? newValue.fieldName : null;
-      callback();
-   };
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function removeGroupBy(index: number, rowsOrColumns: "rows" | "columns")
-   {
-      pivotTableDefinition[rowsOrColumns].splice(index, 1);
-      callback();
-   }
-
-   if (!isEditable)
-   {
-      const selectedField = getSelectedFieldForAutoComplete(tableMetaData, groupBy.fieldName);
-      if (selectedField)
-      {
-         const label = selectedField.table.name == tableMetaData.name ? selectedField.field.label : selectedField.table.label + ": " + selectedField.field.label;
-         return (<Box><Box display="inline-block" mr="0.375rem" mb="0.5rem" border={`1px solid ${colors.grayLines.main}`} borderRadius="0.75rem" p="0.25rem 0.75rem">{label}</Box></Box>);
-      }
-
-      return (<React.Fragment />);
-   }
-
-   preview(drop(ref));
-
-   const showError = attemptedSubmit && !groupBy.fieldName;
-
-   return (<Box ref={ref} display="flex" p="0.5rem" pl="0" gap="0.5rem" alignItems="center" sx={{backgroundColor: "white", opacity: isDragging ? 0 : 1}} data-handler-id={handlerId}>
-      <Box>
-         <Icon ref={drag} sx={{cursor: "ns-resize"}}>drag_indicator</Icon>
-      </Box>
-      <Box width="100%">
-         <FieldAutoComplete
-            id={`${rowsOrColumns}-${index}`}
-            label={null}
-            variant="outlined"
-            textFieldSX={fieldAutoCompleteTextFieldSX}
-            metaData={metaData}
-            tableMetaData={tableMetaData}
-            handleFieldChange={handleFieldChange}
-            hiddenFieldNames={usedGroupByFieldNames}
-            availableFieldNames={availableFieldNames}
-            defaultValue={getSelectedFieldForAutoComplete(tableMetaData, groupBy.fieldName)}
-            hasError={showError}
-            noOptionsText="There are no fields available."
-         />
-      </Box>
-      <Box>
-         <Button sx={xIconButtonSX} onClick={() => removeGroupBy(index, rowsOrColumns)}><Icon>clear</Icon></Button>
-      </Box>
-   </Box>);
-};

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

@@ -1,870 +0,0 @@
-/*
- * 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 {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
-import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import Alert from "@mui/material/Alert";
-import Autocomplete from "@mui/material/Autocomplete";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-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 TextField from "@mui/material/TextField";
-import Tooltip from "@mui/material/Tooltip/Tooltip";
-import Typography from "@mui/material/Typography";
-import QContext from "QContext";
-import colors from "qqq/assets/theme/base/colors";
-import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
-import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
-import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
-import {PivotTableGroupByElement} from "qqq/components/widgets/misc/PivotTableGroupByElement";
-import {PivotTableValueElement} from "qqq/components/widgets/misc/PivotTableValueElement";
-import {buttonSX, unborderedButtonSX} from "qqq/components/widgets/misc/ReportSetupWidget";
-import Widget, {HeaderToggleComponent} from "qqq/components/widgets/Widget";
-import {PivotObjectKey, PivotTableDefinition, PivotTableFunction, pivotTableFunctionLabels, PivotTableGroupBy, PivotTableValue} from "qqq/models/misc/PivotTableDefinitionModels";
-import QQueryColumns from "qqq/models/query/QQueryColumns";
-import Client from "qqq/utils/qqq/Client";
-import FilterUtils from "qqq/utils/qqq/FilterUtils";
-import React, {useCallback, useContext, useEffect, useReducer, useState} from "react";
-import {DndProvider} from "react-dnd";
-import {HTML5Backend} from "react-dnd-html5-backend";
-
-export const DragItemTypes =
-   {
-      ROW: "row",
-      COLUMN: "column",
-      VALUE: "value"
-   };
-
-export const xIconButtonSX =
-   {
-      border: `1px solid ${colors.grayLines.main} !important`,
-      borderRadius: "0.75rem",
-      textTransform: "none",
-      fontSize: "1rem",
-      fontWeight: "400",
-      width: "40px",
-      minWidth: "40px",
-      paddingLeft: 0,
-      paddingRight: 0,
-      color: colors.error.main,
-      "&:hover": {color: colors.error.main},
-      "&:focus": {color: colors.error.main},
-      "&:focus:not(:hover)": {color: colors.error.main},
-   };
-
-export const fieldAutoCompleteTextFieldSX =
-   {
-      "& .MuiInputBase-input": {fontSize: "1rem", padding: "0 !important"}
-   };
-
-
-/*******************************************************************************
- **
- *******************************************************************************/
-export function getSelectedFieldForAutoComplete(tableMetaData: QTableMetaData, fieldName: string)
-{
-   if (fieldName)
-   {
-      let [field, fieldTable] = FilterUtils.getField(tableMetaData, fieldName);
-      if (field && fieldTable)
-      {
-         return ({field: field, table: fieldTable, fieldName: fieldName});
-      }
-   }
-
-   return (null);
-}
-
-
-/*******************************************************************************
- ** component props
- *******************************************************************************/
-interface PivotTableSetupWidgetProps
-{
-   isEditable: boolean;
-   widgetMetaData: QWidgetMetaData;
-   recordValues: { [name: string]: any };
-   onSaveCallback?: (values: { [name: string]: any }) => void;
-}
-
-
-/*******************************************************************************
- ** default values for props
- *******************************************************************************/
-PivotTableSetupWidget.defaultProps = {
-   onSaveCallback: null
-};
-
-
-const qController = Client.getInstance();
-
-/*******************************************************************************
- ** Component to edit the setup of a Pivot Table - rows, columns, values!
- *******************************************************************************/
-export default function PivotTableSetupWidget({isEditable, widgetMetaData, recordValues, onSaveCallback}: PivotTableSetupWidgetProps): JSX.Element
-{
-   const [metaData, setMetaData] = useState(null as QInstance);
-   const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
-
-   const [modalOpen, setModalOpen] = useState(false);
-   const [enabled, setEnabled] = useState(!!recordValues["usePivotTable"]);
-   const [attemptedSubmit, setAttemptedSubmit] = useState(false);
-   const [errorAlert, setErrorAlert] = useState(null as string);
-
-   const [pivotTableDefinition, setPivotTableDefinition] = useState(null as PivotTableDefinition);
-
-   const [, forceUpdate] = useReducer((x) => x + 1, 0);
-
-   ///////////////////////////////////////////////////////////////////////////////////
-   // this is a copy of pivotTableDefinition, that we'll render in the modal.       //
-   // then on-save, we'll move it to pivotTableDefinition, e.g., the actual record. //
-   ///////////////////////////////////////////////////////////////////////////////////
-   const [modalPivotTableDefinition, setModalPivotTableDefinition] = useState(null as PivotTableDefinition);
-
-   const [usedGroupByFieldNames, setUsedGroupByFieldNames] = useState([] as string[]);
-   const [usedValueFieldNames, setUsedValueByFieldNames] = useState([] as string[]);
-   const [availableFieldNames, setAvailableFieldNames] = useState([] as string[]);
-
-   const {helpHelpActive} = useContext(QContext);
-
-   //////////////////
-   // initial load //
-   //////////////////
-   useEffect(() =>
-   {
-      if (!pivotTableDefinition)
-      {
-         let originalPivotTableDefinition = recordValues["pivotTableJson"] && JSON.parse(recordValues["pivotTableJson"]) as PivotTableDefinition;
-         if (originalPivotTableDefinition)
-         {
-            setEnabled(true);
-         }
-         else if (!originalPivotTableDefinition)
-         {
-            originalPivotTableDefinition = new PivotTableDefinition();
-         }
-
-         for (let i = 0; i < originalPivotTableDefinition?.rows?.length; i++)
-         {
-            if (!originalPivotTableDefinition?.rows[i].key)
-            {
-               originalPivotTableDefinition.rows[i].key = PivotObjectKey.next();
-            }
-         }
-
-         for (let i = 0; i < originalPivotTableDefinition?.columns?.length; i++)
-         {
-            if (!originalPivotTableDefinition?.columns[i].key)
-            {
-               originalPivotTableDefinition.columns[i].key = PivotObjectKey.next();
-            }
-         }
-
-         for (let i = 0; i < originalPivotTableDefinition?.values?.length; i++)
-         {
-            if (!originalPivotTableDefinition?.values[i].key)
-            {
-               originalPivotTableDefinition.values[i].key = PivotObjectKey.next();
-            }
-         }
-
-         setPivotTableDefinition(originalPivotTableDefinition);
-         updateUsedGroupByFieldNames(originalPivotTableDefinition);
-         updateUsedValueFieldNames(modalPivotTableDefinition);
-      }
-
-      if (recordValues["columnsJson"])
-      {
-         updateAvailableFieldNames(JSON.parse(recordValues["columnsJson"]) as QQueryColumns);
-      }
-
-      (async () =>
-      {
-         setMetaData(await qController.loadMetaData());
-      })();
-   });
-
-   /////////////////////////////////////////////////////////////////////
-   // handle the table name changing - load current table's meta-data //
-   /////////////////////////////////////////////////////////////////////
-   useEffect(() =>
-   {
-      if (recordValues["tableName"] && (tableMetaData == null || tableMetaData.name != recordValues["tableName"]))
-      {
-         (async () =>
-         {
-            const tableMetaData = await qController.loadTableMetaData(recordValues["tableName"]);
-            setTableMetaData(tableMetaData);
-         })();
-      }
-   }, [recordValues]);
-
-
-   const helpRoles = isEditable ? [recordValues["id"] ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"] : ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"];
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function showHelp(slot: string)
-   {
-      return (helpHelpActive || hasHelpContent(widgetMetaData?.helpContent?.get(slot), helpRoles));
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function getHelpContent(slot: string)
-   {
-      const key = `widget:${widgetMetaData.name};slot:${slot}`;
-      return <HelpContent helpContents={widgetMetaData?.helpContent?.get(slot)} roles={helpRoles} helpContentKey={key} />;
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function toggleEnabled()
-   {
-      const newEnabled = !!!getEnabled();
-      setEnabled(newEnabled);
-      onSaveCallback({usePivotTable: newEnabled});
-
-      if (!newEnabled)
-      {
-         onSaveCallback({pivotTableJson: null});
-      }
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function getEnabled()
-   {
-      return (enabled);
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function addGroupBy(rowsOrColumns: "rows" | "columns")
-   {
-      if (!modalPivotTableDefinition[rowsOrColumns])
-      {
-         modalPivotTableDefinition[rowsOrColumns] = [];
-      }
-
-      modalPivotTableDefinition[rowsOrColumns].push(new PivotTableGroupBy());
-      validateForm()
-      forceUpdate();
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function childElementChangedCallback()
-   {
-      updateUsedGroupByFieldNames(modalPivotTableDefinition);
-      updateUsedValueFieldNames(modalPivotTableDefinition);
-      validateForm()
-      forceUpdate();
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function addValue()
-   {
-      if (!modalPivotTableDefinition.values)
-      {
-         modalPivotTableDefinition.values = [];
-      }
-
-      modalPivotTableDefinition.values.push(new PivotTableValue());
-      validateForm()
-      forceUpdate();
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function removeValue(index: number)
-   {
-      modalPivotTableDefinition.values.splice(index, 1);
-      validateForm()
-      forceUpdate();
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function updateUsedGroupByFieldNames(ptd: PivotTableDefinition = pivotTableDefinition)
-   {
-      const usedFieldNames: string[] = [];
-
-      for (let i = 0; i < ptd?.rows?.length; i++)
-      {
-         usedFieldNames.push(ptd?.rows[i].fieldName);
-      }
-
-      for (let i = 0; i < ptd?.columns?.length; i++)
-      {
-         usedFieldNames.push(ptd?.columns[i].fieldName);
-      }
-
-      setUsedGroupByFieldNames(usedFieldNames);
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function updateUsedValueFieldNames(ptd: PivotTableDefinition = pivotTableDefinition)
-   {
-      const usedFieldNames: string[] = [];
-
-      for (let i = 0; i < ptd?.values?.length; i++)
-      {
-         usedFieldNames.push(ptd?.values[i].fieldName);
-      }
-
-      setUsedValueByFieldNames(usedFieldNames);
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function updateAvailableFieldNames(columns: QQueryColumns)
-   {
-      const fieldNames: string[] = [];
-      for (let i = 0; i < columns?.columns?.length; i++)
-      {
-         if (columns.columns[i].isVisible)
-         {
-            fieldNames.push(columns.columns[i].name);
-         }
-      }
-      setAvailableFieldNames(fieldNames);
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function renderOneValue(value: PivotTableValue, index: number)
-   {
-      if (!isEditable)
-      {
-         const selectedField = getSelectedFieldForAutoComplete(tableMetaData, value.fieldName);
-         if (selectedField && value.function)
-         {
-            const label = selectedField.table.name == tableMetaData.name ? selectedField.field.label : selectedField.table.label + ": " + selectedField.field.label;
-            return (<Box mr="0.375rem" mb="0.5rem" border={`1px solid ${colors.grayLines.main}`} borderRadius="0.75rem" p="0.25rem 0.75rem">{pivotTableFunctionLabels[value.function]} of {label}</Box>);
-         }
-
-         return (<React.Fragment />);
-      }
-
-      const handleFieldChange = (event: any, newValue: any, reason: string) =>
-      {
-         value.fieldName = newValue ? newValue.fieldName : null;
-      };
-
-      const handleFunctionChange = (event: any, newValue: any, reason: string) =>
-      {
-         value.function = newValue ? newValue.id : null;
-      };
-
-      const functionOptions: any[] = [];
-      let defaultFunctionValue = null;
-      for (let pivotTableFunctionKey in PivotTableFunction)
-      {
-         // @ts-ignore any?
-         const label = "" + pivotTableFunctionLabels[pivotTableFunctionKey];
-         const option = {id: pivotTableFunctionKey, label: label};
-         functionOptions.push(option);
-
-         if (option.id == value.function)
-         {
-            defaultFunctionValue = option;
-         }
-      }
-
-      // maybe cursor:grab (and then change to "grabbing")
-      return (<Box display="flex" p="0.5rem" pl="0" gap="0.5rem" alignItems="center">
-         <Box>
-            <Icon sx={{cursor: "ns-resize"}}>drag_indicator</Icon>
-         </Box>
-         <Box width="100%">
-            <FieldAutoComplete
-               id={`values-field-${index}`}
-               label={null}
-               variant="outlined"
-               textFieldSX={fieldAutoCompleteTextFieldSX}
-               metaData={metaData}
-               tableMetaData={tableMetaData}
-               handleFieldChange={handleFieldChange}
-               defaultValue={getSelectedFieldForAutoComplete(tableMetaData, value.fieldName)}
-            />
-         </Box>
-         <Box width="330px">
-            <Autocomplete
-               id={`values-field-${index}`}
-               renderInput={(params) => (<TextField {...params} label={null} variant="outlined" sx={fieldAutoCompleteTextFieldSX} autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
-               // @ts-ignore
-               defaultValue={defaultFunctionValue}
-               options={functionOptions}
-               onChange={handleFunctionChange}
-               isOptionEqualToValue={(option, value) => option.id === value.id}
-               getOptionLabel={(option) => option.label}
-               // todo? renderOption={(props, option, state) => renderFieldOption(props, option, state)}
-               autoSelect={true}
-               autoHighlight={true}
-               disableClearable
-               // slotProps={{popper: {className: "filterCriteriaRowColumnPopper", style: {padding: 0, width: "250px"}}}}
-               // {...alsoOpen}
-            />
-         </Box>
-         <Box>
-            <Button sx={xIconButtonSX} onClick={() => removeValue(index)}><Icon>clear</Icon></Button>
-         </Box>
-      </Box>);
-   }
-
-
-   /*******************************************************************************
-    ** drag & drop callback to move one of the pivot-table group-bys (rows/columns)
-    *******************************************************************************/
-   const moveGroupBy = useCallback((rowsOrColumns: "rows" | "columns", dragIndex: number, hoverIndex: number) =>
-   {
-      const array = modalPivotTableDefinition[rowsOrColumns];
-      const dragItem = array[dragIndex];
-      array.splice(dragIndex, 1);
-      array.splice(hoverIndex, 0, dragItem);
-
-      forceUpdate();
-   }, [modalPivotTableDefinition]);
-
-
-   /*******************************************************************************
-    ** drag & drop callback to move one of the pivot-table values
-    *******************************************************************************/
-   const moveValue = useCallback((dragIndex: number, hoverIndex: number) =>
-   {
-      const array = modalPivotTableDefinition.values;
-      const dragItem = array[dragIndex];
-      array.splice(dragIndex, 1);
-      array.splice(hoverIndex, 0, dragItem);
-
-      forceUpdate();
-   }, [modalPivotTableDefinition]);
-
-
-   const noTable = (tableMetaData == null);
-   const noColumns = (!availableFieldNames || availableFieldNames.length == 0);
-
-   const selectTableFirstTooltipTitle = noTable ? "You must select a table before you can set up your pivot table" : null;
-   const selectColumnsFirstTooltipTitle = noColumns ? "You must set up your report's Columns before you can set up your Pivot Table" : null;
-   const editPopupDisabled = noTable || noColumns;
-
-   /////////////////////////////////////////////////////////////
-   // add toggle component to widget header for editable mode //
-   /////////////////////////////////////////////////////////////
-   const labelAdditionalElementsRight: JSX.Element[] = [];
-   if (isEditable)
-   {
-      labelAdditionalElementsRight.push(<HeaderToggleComponent disabled={editPopupDisabled} disabledTooltip={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle} label="Use Pivot Table?" getValue={() => enabled} onClickCallback={toggleEnabled} />);
-   }
-
-
-   /*******************************************************************************
-    ** render a group-by (row or column)
-    *******************************************************************************/
-   const renderGroupBy = useCallback((groupBy: PivotTableGroupBy, rowsOrColumns: "rows" | "columns", index: number, forModal: boolean) =>
-   {
-      return (
-         <PivotTableGroupByElement
-            key={groupBy.fieldName}
-            index={index}
-            id={`${groupBy.key}`}
-            dragCallback={moveGroupBy}
-            metaData={metaData}
-            tableMetaData={tableMetaData}
-            pivotTableDefinition={forModal ? modalPivotTableDefinition : pivotTableDefinition}
-            usedGroupByFieldNames={[...usedGroupByFieldNames, ...usedValueFieldNames]}
-            availableFieldNames={availableFieldNames}
-            isEditable={isEditable && forModal}
-            groupBy={groupBy}
-            rowsOrColumns={rowsOrColumns}
-            callback={childElementChangedCallback}
-            attemptedSubmit={attemptedSubmit}
-         />
-      );
-   },
-   [tableMetaData, usedGroupByFieldNames, availableFieldNames],
-   );
-
-
-   /*******************************************************************************
-    ** render a pivot-table value (row or column)
-    *******************************************************************************/
-   const renderValue = useCallback((value: PivotTableValue, index: number, forModal: boolean) =>
-   {
-      return (
-         <PivotTableValueElement
-            key={value.key}
-            index={index}
-            id={`${value.key}`}
-            dragCallback={moveValue}
-            metaData={metaData}
-            tableMetaData={tableMetaData}
-            pivotTableDefinition={forModal ? modalPivotTableDefinition : pivotTableDefinition}
-            availableFieldNames={availableFieldNames}
-            usedGroupByFieldNames={usedGroupByFieldNames}
-            isEditable={isEditable && forModal}
-            value={value}
-            callback={childElementChangedCallback}
-            attemptedSubmit={attemptedSubmit}
-         />
-      );
-   },
-   [tableMetaData, usedGroupByFieldNames, availableFieldNames],
-   );
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function openEditor()
-   {
-      if (recordValues["tableName"])
-      {
-         setModalPivotTableDefinition(Object.assign({}, pivotTableDefinition));
-         setModalOpen(true);
-         setAttemptedSubmit(false);
-      }
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function closeEditor(event?: {}, reason?: "backdropClick" | "escapeKeyDown")
-   {
-      if (reason == "backdropClick" || reason == "escapeKeyDown")
-      {
-         return;
-      }
-
-      setModalOpen(false);
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function renderGroupBys(forModal: boolean, rowsOrColumns: "rows" | "columns")
-   {
-      const ptd = forModal ? modalPivotTableDefinition : pivotTableDefinition;
-
-      return <>
-         <h5>{rowsOrColumns == "rows" ? "Rows" : "Columns"}</h5>
-         <Box fontSize="1rem">
-            {
-               tableMetaData && (<div>{ptd[rowsOrColumns]?.map((groupBy, i) => renderGroupBy(groupBy, rowsOrColumns, i, forModal))}</div>)
-            }
-         </Box>
-         {
-            (forModal || (isEditable && !ptd[rowsOrColumns]?.length)) &&
-            <Box mt={forModal ? "0.5rem" : "0"} mb="1rem">
-               <Tooltip title={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle}>
-                  <span><Button disabled={editPopupDisabled} sx={forModal ? buttonSX : unborderedButtonSX} onClick={() => forModal ? addGroupBy(rowsOrColumns) : openEditor()}>+ Add new {rowsOrColumns == "rows" ? "row" : "column"}</Button></span>
-               </Tooltip>
-            </Box>
-         }
-         {
-            !isEditable && !forModal && !ptd[rowsOrColumns]?.length &&
-            <Box color={colors.gray.main} fontSize="1rem">Your pivot table has no {rowsOrColumns}.</Box>
-         }
-      </>;
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function renderValues(forModal: boolean)
-   {
-      const ptd = forModal ? modalPivotTableDefinition : pivotTableDefinition;
-
-      return <>
-         <h5>Values</h5>
-         <Box fontSize="1rem">
-            {
-               tableMetaData && (<div>{ptd?.values?.map((value, i) => renderValue(value, i, forModal))}</div>)
-            }
-         </Box>
-         {
-            (forModal || (isEditable && !ptd?.values?.length)) &&
-            <Box mt={forModal ? "0.5rem" : "0"} mb="1rem">
-               <Tooltip title={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle}>
-                  <span><Button disabled={editPopupDisabled} sx={forModal ? buttonSX : unborderedButtonSX} onClick={() => forModal ? addValue() : openEditor()}>+ Add new value</Button></span>
-               </Tooltip>
-            </Box>
-         }
-         {
-            !isEditable && !forModal && !ptd?.values?.length &&
-            <Box color={colors.gray.main} fontSize="1rem">Your pivot table has no values.</Box>
-         }
-      </>;
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function validateForm(submitting: boolean = false)
-   {
-      ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-      // if this isn't a call from the on-submit handler, and we haven't previously attempted a submit, then return w/o setting any alerts //
-      // this is like a version of considering "touched"...                                                                                //
-      ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-      if(!submitting && !attemptedSubmit)
-      {
-         return;
-      }
-
-      let missingValues = 0;
-
-      for (let i = 0; i < modalPivotTableDefinition?.rows?.length; i++)
-      {
-         if (!modalPivotTableDefinition.rows[i].fieldName)
-         {
-            missingValues++;
-         }
-      }
-
-      for (let i = 0; i < modalPivotTableDefinition?.columns?.length; i++)
-      {
-         if (!modalPivotTableDefinition.columns[i].fieldName)
-         {
-            missingValues++;
-         }
-      }
-
-      for (let i = 0; i < modalPivotTableDefinition?.values?.length; i++)
-      {
-         if (!modalPivotTableDefinition.values[i].fieldName)
-         {
-            missingValues++;
-         }
-         if (!modalPivotTableDefinition.values[i].function)
-         {
-            missingValues++;
-         }
-      }
-
-      if (missingValues == 0)
-      {
-         setErrorAlert(null);
-
-         ////////////////////////////////////////////////////////////////////////////////////
-         // this is to catch the case of - user attempted to submit, and there were errors //
-         // now they've fixed 'em - so go back to a 'clean' state - so if they add more    //
-         // boxes, they won't immediately show errors, until a re-submit                   //
-         ////////////////////////////////////////////////////////////////////////////////////
-         if(attemptedSubmit)
-         {
-            setAttemptedSubmit(false);
-         }
-         return (false);
-      }
-
-      setErrorAlert(`Missing value in ${missingValues} field${missingValues == 1 ? "" : "s"}.`);
-      return (true);
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function saveClicked()
-   {
-      setAttemptedSubmit(true);
-
-      if (validateForm(true))
-      {
-         return;
-      }
-
-      if (!onSaveCallback)
-      {
-         console.log("onSaveCallback was not defined");
-         return;
-      }
-
-      setPivotTableDefinition(Object.assign({}, modalPivotTableDefinition));
-      updateUsedGroupByFieldNames(modalPivotTableDefinition);
-      updateUsedValueFieldNames(modalPivotTableDefinition);
-
-      onSaveCallback({pivotTableJson: JSON.stringify(modalPivotTableDefinition)});
-
-      closeEditor();
-   }
-
-
-   ////////////
-   // render //
-   ////////////
-   return (<Widget widgetMetaData={widgetMetaData} labelAdditionalElementsRight={labelAdditionalElementsRight}>
-      {
-         <React.Fragment>
-            <DndProvider backend={HTML5Backend}>
-               {
-                  enabled &&
-                  <Box display="flex" justifyContent="space-between">
-                     <Box>
-                        {
-                           showHelp("sectionSubhead") &&
-                           <Box color={colors.gray.main} pb={"0.5rem"} fontSize={"0.875rem"}>
-                              {getHelpContent("sectionSubhead")}
-                           </Box>
-                        }
-                     </Box>
-                     {
-                        isEditable &&
-                        <Tooltip title={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle}>
-                           <span>
-                              <Button disabled={editPopupDisabled} onClick={() => openEditor()} sx={{p: 0}} disableRipple>
-                                 <Typography display="inline" textTransform="none" fontSize={"1.125rem"}>
-                                    Edit Pivot Table
-                                 </Typography>
-                              </Button>
-                           </span>
-                        </Tooltip>
-                     }
-                  </Box>
-               }
-               {
-                  (!enabled || !pivotTableDefinition) && !isEditable &&
-                  <Box fontSize="1rem">Your report does not use a Pivot Table.</Box>
-               }
-               {
-                  enabled && pivotTableDefinition &&
-                  <>
-                     <Grid container spacing="16">
-
-                        <Grid item lg={4} md={6} xs={12}>{renderGroupBys(false, "rows")}</Grid>
-                        <Grid item lg={4} md={6} xs={12}>{renderGroupBys(false, "columns")}</Grid>
-                        <Grid item lg={4} md={6} xs={12}>{renderValues(false)}</Grid>
-
-                     </Grid>
-                     {
-                        modalOpen &&
-                        <Modal open={modalOpen} onClose={(event, reason) => closeEditor(event, reason)}>
-                           <div>
-                              <Box sx={{position: "absolute", width: "100%"}}>
-                                 <Card sx={{m: "2rem", p: "2rem", overflowY: "auto", height: "calc(100vh - 4rem)"}}>
-                                    <h3>Edit Pivot Table</h3>
-                                    {
-                                       showHelp("modalSubheader") &&
-                                       <Box color={colors.gray.main}>
-                                          {getHelpContent("modalSubheader")}
-                                       </Box>
-                                    }
-                                    {
-                                       errorAlert && <Alert icon={<Icon>error_outline</Icon>} color="error" onClose={() => setErrorAlert(null)}>{errorAlert}</Alert>
-                                    }
-                                    <Grid container spacing="16" overflow="auto" mt="0.5rem" mb="1rem" height="100%">
-
-                                       <Grid item lg={4} md={6} xs={12}>{renderGroupBys(true, "rows")}</Grid>
-                                       <Grid item lg={4} md={6} xs={12}>{renderGroupBys(true, "columns")}</Grid>
-                                       <Grid item lg={4} md={6} xs={12}>{renderValues(true)}</Grid>
-
-                                    </Grid>
-                                    <Box>
-                                       <Box display="flex" justifyContent="flex-end">
-                                          <QCancelButton disabled={false} onClickHandler={closeEditor} />
-                                          <QSaveButton label="OK" iconName="check" disabled={false} onClickHandler={saveClicked} />
-                                       </Box>
-                                    </Box>
-                                 </Card>
-                              </Box>
-                           </div>
-                        </Modal>
-                     }
-                  </>
-               }
-            </DndProvider>
-         </React.Fragment>
-      }
-   </Widget>);
-}
-
-/* this was a rough-draft of what a preview of a pivot could look like...
-   <Box mt={"1rem"}>
-      <h5>Preview</h5>
-      <table>
-         <tr>
-            <th style={{textAlign: "left", fontSize: "0.875rem"}}></th>
-            <th style={{textAlign: "left", fontSize: "0.875rem"}}>Column Labels</th>
-         </tr>
-         {
-            pivotTableDefinition?.columns?.map((column, i) =>
-               (
-                  <tr key={column.key}>
-                     <th style={{textAlign: "left", fontSize: "0.875rem"}}></th>
-                     <th style={{textAlign: "left", fontSize: "0.875rem"}}>{column.fieldName}</th>
-                  </tr>
-               ))
-         }
-         <tr>
-            <th style={{textAlign: "left", fontSize: "0.875rem"}}>Row Labels</th>
-            {
-               pivotTableDefinition?.values?.map((value, i) =>
-                  (
-                     <th key={value.key} style={{textAlign: "left", fontSize: "0.875rem"}}>{value.function} of {value.fieldName}</th>
-                  ))
-            }
-         </tr>
-         {
-            pivotTableDefinition?.rows?.map((row, i) =>
-               (
-                  <tr key={row.key}>
-                     <th style={{textAlign: "left", fontSize: "0.875rem", paddingLeft: (i * 1) + "rem"}}>{row.fieldName}</th>
-                  </tr>
-               ))
-         }
-      </table>
-   </Box>
-*/

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

@@ -1,319 +0,0 @@
-/*
- * 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 {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 Autocomplete from "@mui/material/Autocomplete";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import Icon from "@mui/material/Icon";
-import TextField from "@mui/material/TextField";
-import type {Identifier, XYCoord} from "dnd-core";
-import colors from "qqq/assets/theme/base/colors";
-import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
-import {DragItemTypes, fieldAutoCompleteTextFieldSX, getSelectedFieldForAutoComplete, xIconButtonSX} from "qqq/components/widgets/misc/PivotTableSetupWidget";
-import {functionsPerFieldType, PivotTableDefinition, pivotTableFunctionLabels, PivotTableValue} from "qqq/models/misc/PivotTableDefinitionModels";
-import React, {FC, useReducer, useRef, useState} from "react";
-import {useDrag, useDrop} from "react-dnd";
-
-
-/*******************************************************************************
- ** component props
- *******************************************************************************/
-export interface PivotTableValueElementProps
-{
-   id: string;
-   index: number;
-   dragCallback: (dragIndex: number, hoverIndex: number) => void;
-   metaData: QInstance;
-   tableMetaData: QTableMetaData;
-   pivotTableDefinition: PivotTableDefinition;
-   availableFieldNames: string[];
-   usedGroupByFieldNames: string[];
-   isEditable: boolean;
-   value: PivotTableValue;
-   callback: () => void;
-   attemptedSubmit?: boolean;
-}
-
-
-/*******************************************************************************
- ** item to support react-dnd
- *******************************************************************************/
-interface DragItem
-{
-   index: number;
-   id: string;
-   type: string;
-}
-
-
-/*******************************************************************************
- ** Element to render 1 pivot-table value.
- *******************************************************************************/
-export const PivotTableValueElement: FC<PivotTableValueElementProps> = ({id, index, dragCallback, metaData, tableMetaData, pivotTableDefinition, availableFieldNames, usedGroupByFieldNames, value, isEditable, callback, attemptedSubmit}) =>
-{
-   const [defaultFunctionValue, setDefaultFunctionValue] = useState(null);
-   const [, forceUpdate] = useReducer((x) => x + 1, 0);
-
-   ////////////////////////////////////////////////////////////////////////////
-   // credit: https://react-dnd.github.io/react-dnd/examples/sortable/simple //
-   ////////////////////////////////////////////////////////////////////////////
-   const ref = useRef<HTMLDivElement>(null);
-   const [{handlerId}, drop] = useDrop<DragItem, void, { handlerId: Identifier | null }>(
-      {
-         accept: DragItemTypes.VALUE,
-         collect(monitor)
-         {
-            return {
-               handlerId: monitor.getHandlerId(),
-            };
-         },
-         hover(item: DragItem, monitor)
-         {
-            if (!ref.current)
-            {
-               return;
-            }
-            const dragIndex = item.index;
-            const hoverIndex = index;
-
-            // Don't replace items with themselves
-            if (dragIndex === hoverIndex)
-            {
-               return;
-            }
-
-            // Determine rectangle on screen
-            const hoverBoundingRect = ref.current?.getBoundingClientRect();
-
-            // Get vertical middle
-            const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-
-            // Determine mouse position
-            const clientOffset = monitor.getClientOffset();
-
-            // Get pixels to the top
-            const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top;
-
-            // Only perform the move when the mouse has crossed half of the items height
-            // When dragging downwards, only move when the cursor is below 50%
-            // When dragging upwards, only move when the cursor is above 50%
-
-            // Dragging downwards
-            if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY)
-            {
-               return;
-            }
-
-            // Dragging upwards
-            if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY)
-            {
-               return;
-            }
-
-            // Time to actually perform the action
-            dragCallback(dragIndex, hoverIndex);
-
-            // Note: we're mutating the monitor item here! Generally it's better to avoid mutations,
-            // but it's good here for the sake of performance to avoid expensive index searches.
-            item.index = hoverIndex;
-         },
-      });
-
-   const [{isDragging}, drag] = useDrag({
-      type: DragItemTypes.VALUE,
-      item: () =>
-      {
-         return {id, index};
-      },
-      collect: (monitor: any) => ({
-         isDragging: monitor.isDragging(),
-      }),
-   });
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function getFunctionsForField(field: QFieldMetaData)
-   {
-      if(field)
-      {
-         let type = field.type;
-         if (field.possibleValueSourceName)
-         {
-            type = QFieldType.STRING;
-         }
-
-         if(functionsPerFieldType[type])
-         {
-            return (functionsPerFieldType[type]);
-         }
-      }
-
-      //////////////////////////////////////
-      // return broadest list if no field //
-      //////////////////////////////////////
-      return (functionsPerFieldType[QFieldType.INTEGER]);
-   }
-
-
-   /*******************************************************************************
-    ** event handler for user selecting a field
-    *******************************************************************************/
-   function handleFieldChange(event: any, newValue: any, reason: string)
-   {
-      value.fieldName = newValue ? newValue.fieldName : null;
-
-      if(newValue)
-      {
-         /////////////////////////////////////////////////////////////////////////////////////////
-         // if newly selected field doesn't have the currently selected function, then clear it //
-         /////////////////////////////////////////////////////////////////////////////////////////
-         const newSelectedField = getSelectedFieldForAutoComplete(tableMetaData, newValue.fieldName);
-         if (newSelectedField)
-         {
-            if(getFunctionsForField(newSelectedField.field).indexOf(value.function) == -1)
-            {
-               setDefaultFunctionValue(null);
-               handleFunctionChange(null, null, null);
-               forceUpdate();
-            }
-         }
-      }
-
-      callback();
-   }
-
-
-   /*******************************************************************************
-    ** event handler for user selecting a function
-    *******************************************************************************/
-   function handleFunctionChange(event: any, newValue: any, reason: string)
-   {
-      value.function = newValue ? newValue.id : null;
-      callback();
-   }
-
-
-   /*******************************************************************************
-    ** event handler for clicking remove button
-    *******************************************************************************/
-   function removeValue(index: number)
-   {
-      pivotTableDefinition.values.splice(index, 1);
-      callback();
-   }
-
-   const selectedField = getSelectedFieldForAutoComplete(tableMetaData, value.fieldName);
-
-   /////////////////////////////////////////////////////////////////////
-   // if we're not on an edit screen, return a simpler read-only view //
-   /////////////////////////////////////////////////////////////////////
-   if (!isEditable)
-   {
-      let label = "--";
-      if (selectedField && value.function)
-      {
-         label = pivotTableFunctionLabels[value.function] + " of " + (selectedField.table.name == tableMetaData.name ? selectedField.field.label : selectedField.table.label + ": " + selectedField.field.label);
-      }
-
-      return (<Box><Box display="inline-block" mr="0.375rem" mb="0.5rem" border={`1px solid ${colors.grayLines.main}`} borderRadius="0.75rem" p="0.25rem 0.75rem">{label}</Box></Box>);
-   }
-
-   ///////////////////////////////////////////////////////////////////////////////
-   // figure out functions to display in drop down, plus selected/default value //
-   ///////////////////////////////////////////////////////////////////////////////
-   const functionOptions: any[] = [];
-   const availableFunctions = getFunctionsForField(selectedField?.field);
-   for (let pivotTableFunction of availableFunctions)
-   {
-      const label = pivotTableFunctionLabels[pivotTableFunction];
-      const option = {id: pivotTableFunction, label: label};
-      functionOptions.push(option);
-
-      if (option.id == value.function && JSON.stringify(option) != JSON.stringify(defaultFunctionValue))
-      {
-         setDefaultFunctionValue(option);
-      }
-   }
-
-   drag(drop(ref));
-
-   const showValueError = attemptedSubmit && !value.fieldName;
-   const showFunctionError = attemptedSubmit && !value.function;
-
-   return (<Box ref={ref} display="flex" p="0.5rem" pl="0" gap="0.5rem" alignItems="center" sx={{backgroundColor: "white", opacity: isDragging ? 0 : 1}} data-handler-id={handlerId}>
-      <Box>
-         <Icon sx={{cursor: "ns-resize"}}>drag_indicator</Icon>
-      </Box>
-      <Box width="100%">
-         <FieldAutoComplete
-            id={`values-field-${index}`}
-            label={null}
-            variant="outlined"
-            textFieldSX={fieldAutoCompleteTextFieldSX}
-            metaData={metaData}
-            tableMetaData={tableMetaData}
-            handleFieldChange={handleFieldChange}
-            availableFieldNames={availableFieldNames}
-            hiddenFieldNames={usedGroupByFieldNames}
-            defaultValue={selectedField}
-            hasError={showValueError}
-            noOptionsText="There are no fields available."
-         />
-      </Box>
-      <Box width="370px">
-         <Autocomplete
-            id={`values-function-${index}`}
-            renderInput={(params) =>
-            {
-               const inputProps = params.InputProps;
-               const originalEndAdornment = inputProps.endAdornment;
-               inputProps.endAdornment = <Box>
-                  {showFunctionError && <Icon color="error">error_outline</Icon>}
-                  {originalEndAdornment}
-               </Box>;
-
-               return (<TextField {...params} label={null} variant="outlined" sx={fieldAutoCompleteTextFieldSX} autoComplete="off" type="search" InputProps={inputProps} />)
-            }}
-            // @ts-ignore
-            value={defaultFunctionValue}
-            inputValue={defaultFunctionValue?.label ?? ""}
-            options={functionOptions}
-            onChange={handleFunctionChange}
-            isOptionEqualToValue={(option, value) => option.id === value.id}
-            getOptionLabel={(option) => option.label}
-            autoSelect={true}
-            autoHighlight={true}
-            disableClearable
-         />
-      </Box>
-      <Box>
-         <Button sx={xIconButtonSX} onClick={() => removeValue(index)}><Icon>clear</Icon></Button>
-      </Box>
-   </Box>);
-
-};

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 Widget, {AddNewRecordButton, LabelComponent, WidgetData} from "qqq/components/widgets/Widget";
+import {DataGridPro, GridCallbackDetails, GridEventListener, GridFilterModel, gridPreferencePanelStateSelector, GridRowParams, GridSelectionModel, GridToolbarColumnsButton, GridToolbarContainer, GridToolbarDensitySelector, GridToolbarExportContainer, GridToolbarFilterButton, MuiEvent, useGridApiContext, useGridApiEventHandler, useGridSelector} from "@mui/x-data-grid-pro";
+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;
-   addNewRecordCallback?: () => void;
-   disableRowClick: boolean;
-   allowRecordEdit: boolean;
-   editRecordCallback?: (rowIndex: number) => void;
-   allowRecordDelete: boolean;
-   deleteRecordCallback?: (rowIndex: number) => void;
+   data: any;
 }
 
-RecordGridWidget.defaultProps =
-   {
-      disableRowClick: false,
-      allowRecordEdit: false,
-      allowRecordDelete: false
-   };
+RecordGridWidget.defaultProps = {};
 
 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);
@@ -225,7 +178,7 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
    if(widgetMetaData?.showExportButton)
    {
       labelAdditionalElementsLeft.push(
-         <Typography key={1} variant="body2" px={0} display="inline" position="relative">
+         <Typography key={1} variant="body2" py={2} px={0} display="inline" position="relative">
             <Tooltip title={tooltipTitle}><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={isExportDisabled}><Icon sx={{color: "#757575", fontSize: 1.25}}>save_alt</Icon></Button></Tooltip>
          </Typography>
       );
@@ -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/components/widgets/misc/ReportSetupWidget.tsx

@@ -1,374 +0,0 @@
-/*
- * 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 {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
-import {Alert, Collapse} from "@mui/material";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import Card from "@mui/material/Card";
-import Modal from "@mui/material/Modal";
-import Tooltip from "@mui/material/Tooltip/Tooltip";
-import QContext from "QContext";
-import colors from "qqq/assets/theme/base/colors";
-import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
-import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
-import AdvancedQueryPreview from "qqq/components/query/AdvancedQueryPreview";
-import {getCurrentSortIndicator} from "qqq/components/query/BasicAndAdvancedQueryControls";
-import Widget, {HeaderLinkButtonComponent} from "qqq/components/widgets/Widget";
-import QQueryColumns, {Column} from "qqq/models/query/QQueryColumns";
-import RecordQuery from "qqq/pages/records/query/RecordQuery";
-import Client from "qqq/utils/qqq/Client";
-import FilterUtils from "qqq/utils/qqq/FilterUtils";
-import React, {useContext, useEffect, useRef, useState} from "react";
-
-interface ReportSetupWidgetProps
-{
-   isEditable: boolean;
-   widgetMetaData: QWidgetMetaData;
-   recordValues: {[name: string]: any};
-   onSaveCallback?: (values: {[name: string]: any}) => void;
-}
-
-ReportSetupWidget.defaultProps = {
-   onSaveCallback: null
-};
-
-export const buttonSX =
-   {
-      border: `1px solid ${colors.grayLines.main} !important`,
-      borderRadius: "0.75rem",
-      textTransform: "none",
-      fontSize: "1rem",
-      fontWeight: "400",
-      paddingLeft: "1rem",
-      paddingRight: "1rem",
-      opacity: "1",
-      color: colors.dark.main,
-      "&:hover": {color: colors.dark.main},
-      "&:focus": {color: colors.dark.main},
-      "&:focus:not(:hover)": {color: colors.dark.main},
-   };
-
-export const unborderedButtonSX = Object.assign({}, buttonSX);
-unborderedButtonSX.border = "none !important";
-unborderedButtonSX.opacity = "0.7";
-
-
-const qController = Client.getInstance();
-
-/*******************************************************************************
- ** Component for editing the main setup of a report - that is: filter & columns
- *******************************************************************************/
-export default function ReportSetupWidget({isEditable, widgetMetaData, recordValues, onSaveCallback}: ReportSetupWidgetProps): JSX.Element
-{
-   const [modalOpen, setModalOpen] = useState(false);
-   const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
-
-   const [alertContent, setAlertContent] = useState(null as string);
-
-   //////////////////////////////////////////////////////////////////////////////////////////////////
-   // we'll actually keep 2 copies of the query filter around here -                               //
-   // the one in the record (as json) is one that the backend likes (e.g., possible values as ids) //
-   // this "frontend" one is one that the frontend can use (possible values as objects w/ labels). //
-   //////////////////////////////////////////////////////////////////////////////////////////////////
-   const [frontendQueryFilter, setFrontendQueryFilter] = useState(null as QQueryFilter);
-
-   const {helpHelpActive} = useContext(QContext);
-
-   const recordQueryRef = useRef();
-
-   /////////////////////////////
-   // load values from record //
-   /////////////////////////////
-   let queryFilter = recordValues["queryFilterJson"] && JSON.parse(recordValues["queryFilterJson"]) as QQueryFilter;
-   let usingDefaultEmptyFilter = false;
-   if(!queryFilter)
-   {
-      queryFilter = new QQueryFilter();
-      usingDefaultEmptyFilter = true;
-   }
-
-   let columns: QQueryColumns = null;
-   if(recordValues["columnsJson"])
-   {
-      columns = QQueryColumns.buildFromJSON(recordValues["columnsJson"]);
-   }
-
-   //////////////////////////////////////////////////////////////////////
-   // load tableMetaData initially, and if/when selected table changes //
-   //////////////////////////////////////////////////////////////////////
-   useEffect(() =>
-   {
-      if (recordValues["tableName"] && (tableMetaData == null || tableMetaData.name != recordValues["tableName"]))
-      {
-         (async () =>
-         {
-            const tableMetaData = await qController.loadTableMetaData(recordValues["tableName"])
-            setTableMetaData(tableMetaData);
-
-            const queryFilterForFrontend = Object.assign({}, queryFilter);
-            await FilterUtils.cleanupValuesInFilerFromQueryString(qController, tableMetaData, queryFilterForFrontend)
-            setFrontendQueryFilter(queryFilterForFrontend)
-         })();
-      }
-   }, [recordValues]);
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function openEditor()
-   {
-      if(recordValues["tableName"])
-      {
-         setModalOpen(true);
-      }
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function saveClicked()
-   {
-      if(!onSaveCallback)
-      {
-         console.log("onSaveCallback was not defined");
-         return;
-      }
-
-      // @ts-ignore possibly 'undefined'.
-      const view = recordQueryRef?.current?.getCurrentView();
-
-      view.queryColumns.sortColumnsFixingPinPositions();
-
-      //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-      // keep the query filter that came from the recordQuery screen as the front-end version (w/ possible value objects) //
-      // but prep a copy of it for the backend, to stringify as json in the record being edited                           //
-      //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-      setFrontendQueryFilter(view.queryFilter);
-      const filter = FilterUtils.prepQueryFilterForBackend(tableMetaData, view.queryFilter);
-
-      onSaveCallback({queryFilterJson: JSON.stringify(filter), columnsJson: JSON.stringify(view.queryColumns)});
-
-      closeEditor();
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function closeEditor(event?: {}, reason?: "backdropClick" | "escapeKeyDown")
-   {
-      if(reason == "backdropClick" || reason == "escapeKeyDown")
-      {
-         return;
-      }
-
-      setModalOpen(false);
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function renderColumn(column: Column): JSX.Element
-   {
-      const [field, table] = FilterUtils.getField(tableMetaData, column.name)
-
-      if(!column || !column.isVisible || column.name == "__check__" || !field)
-      {
-         return (<React.Fragment />);
-      }
-
-      const tableLabelPart = table.name != tableMetaData.name ? table.label + ": " : "";
-
-      return (<Box mr="0.375rem" mb="0.5rem" border={`1px solid ${colors.grayLines.main}`} borderRadius="0.75rem" p="0.25rem 0.75rem">
-         {tableLabelPart}{field.label}
-      </Box>);
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function mayShowQueryPreview(): boolean
-   {
-      if(tableMetaData)
-      {
-         if(frontendQueryFilter?.criteria?.length > 0 || frontendQueryFilter?.subFilters?.length > 0)
-         {
-            return (true);
-         }
-      }
-
-      return (false);
-   }
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function mayShowColumnsPreview(): boolean
-   {
-      if(tableMetaData)
-      {
-         for(let i = 0; i<columns?.columns?.length; i++)
-         {
-            if(columns.columns[i].isVisible && columns.columns[i].name != "__check__")
-            {
-               return (true);
-            }
-         }
-      }
-
-      return (false);
-   }
-
-   const helpRoles = isEditable ? [recordValues["id"] ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"] : ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"];
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function showHelp(slot: string)
-   {
-      return (helpHelpActive || hasHelpContent(widgetMetaData?.helpContent?.get(slot), helpRoles));
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function getHelpContent(slot: string)
-   {
-      const key = `widget:${widgetMetaData.name};slot:${slot}`;
-      return <HelpContent helpContents={widgetMetaData?.helpContent?.get(slot)} roles={helpRoles} helpContentKey={key} />;
-   }
-
-   /////////////////////////////////////////////////
-   // add link to widget header for opening modal //
-   /////////////////////////////////////////////////
-   const selectTableFirstTooltipTitle = tableMetaData ? null : "You must select a table before you can set up your report filters and columns";
-   const labelAdditionalElementsRight: JSX.Element[] = []
-   if(isEditable)
-   {
-      labelAdditionalElementsRight.push(<HeaderLinkButtonComponent label="Edit Filters and Columns" onClickCallback={openEditor} disabled={tableMetaData == null} disabledTooltip={selectTableFirstTooltipTitle} />)
-   }
-
-
-   return (<Widget widgetMetaData={widgetMetaData} labelAdditionalElementsRight={labelAdditionalElementsRight}>
-      <React.Fragment>
-         {
-            showHelp("sectionSubhead") &&
-            <Box color={colors.gray.main} pb={"0.5rem"} fontSize={"0.875rem"}>
-               {getHelpContent("sectionSubhead")}
-            </Box>
-         }
-         <Collapse in={Boolean(alertContent)}>
-            <Alert severity="error" sx={{mt: 1.5, mb: 0.5}} onClose={() => setAlertContent(null)}>{alertContent}</Alert>
-         </Collapse>
-         <Box pt="0.5rem">
-            <Box display="flex" justifyContent="space-between" alignItems="center">
-               <h5>Query Filter</h5>
-               <Box fontSize="0.75rem" fontWeight="700">{mayShowQueryPreview() && getCurrentSortIndicator(frontendQueryFilter, tableMetaData, null)}</Box>
-            </Box>
-            {
-               mayShowQueryPreview() &&
-               <AdvancedQueryPreview tableMetaData={tableMetaData} queryFilter={frontendQueryFilter} isEditable={false} isQueryTooComplex={frontendQueryFilter.subFilters?.length > 0} removeCriteriaByIndexCallback={null} />
-            }
-            {
-               !mayShowQueryPreview() &&
-               <Box width="100%" sx={{fontSize: "1rem", background: "#FFFFFF"}} minHeight={"2.5rem"} p={"0.5rem"} pb={"0.125rem"} borderRadius="0.75rem" border={`1px solid ${colors.grayLines.main}`}>
-                  {
-                     isEditable &&
-                     <Tooltip title={selectTableFirstTooltipTitle}>
-                        <span><Button disabled={!recordValues["tableName"]} sx={{mb: "0.125rem", ...unborderedButtonSX}} onClick={openEditor}>+ Add Filters</Button></span>
-                     </Tooltip>
-                  }
-                  {
-                     !isEditable && <Box color={colors.gray.main}>Your report has no filters.</Box>
-                  }
-               </Box>
-            }
-         </Box>
-         <Box pt="1rem">
-            <h5>Columns</h5>
-            <Box display="flex" flexWrap="wrap" fontSize="1rem">
-               {
-                  mayShowColumnsPreview() &&
-                  columns.columns.map((column, i) => <React.Fragment key={i}>{renderColumn(column)}</React.Fragment>)
-               }
-               {
-                  !mayShowColumnsPreview() &&
-                  <Box width="100%" sx={{fontSize: "1rem", background: "#FFFFFF"}} minHeight={"2.375rem"} p={"0.5rem"} pb={"0.125rem"}>
-                     {
-                        isEditable &&
-                        <Tooltip title={selectTableFirstTooltipTitle}>
-                           <span><Button disabled={!recordValues["tableName"]} sx={unborderedButtonSX} onClick={openEditor}>+ Add Columns</Button></span>
-                        </Tooltip>
-                     }
-                     {
-                        !isEditable && <Box color={colors.gray.main}>Your report has no columns.</Box>
-                     }
-                  </Box>
-               }
-            </Box>
-         </Box>
-         {
-            modalOpen &&
-            <Modal open={modalOpen} onClose={(event, reason) => closeEditor(event, reason)}>
-               <div>
-                  <Box sx={{position: "absolute", overflowY: "auto", maxHeight: "100%", width: "100%"}}>
-                     <Card sx={{m: "2rem", p: "2rem"}}>
-                        <h3>Edit Filters and Columns</h3>
-                        {
-                           showHelp("modalSubheader") &&
-                           <Box color={colors.gray.main} pb={"0.5rem"}>
-                              {getHelpContent("modalSubheader")}
-                           </Box>
-                        }
-                        {
-                           tableMetaData && <RecordQuery
-                              ref={recordQueryRef}
-                              table={tableMetaData}
-                              usage="reportSetup"
-                              isModal={true}
-                              initialQueryFilter={usingDefaultEmptyFilter ? null : frontendQueryFilter}
-                              initialColumns={columns}
-                           />
-                        }
-
-                        <Box>
-                           <Box display="flex" justifyContent="flex-end">
-                              <QCancelButton disabled={false} onClickHandler={closeEditor} />
-                              <QSaveButton label="OK" iconName="check" disabled={false} onClickHandler={saveClicked} />
-                           </Box>
-                        </Box>
-                     </Card>
-                  </Box>
-               </div>
-            </Modal>
-         }
-      </React.Fragment>
-   </Widget>);
-}

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

@@ -46,6 +46,9 @@ import Snackbar from "@mui/material/Snackbar";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import Typography from "@mui/material/Typography";
+import React, {useReducer, useState} from "react";
+import AceEditor from "react-ace";
+import {Link} from "react-router-dom";
 import TabPanel from "qqq/components/misc/TabPanel";
 import ScriptDocsForm from "qqq/components/scripts/ScriptDocsForm";
 import ScriptEditor, {ScriptEditorProps} from "qqq/components/scripts/ScriptEditor";
@@ -62,9 +65,6 @@ import "ace-builds/src-noconflict/mode-javascript";
 import "ace-builds/src-noconflict/mode-velocity";
 import "ace-builds/src-noconflict/mode-json";
 import "ace-builds/src-noconflict/theme-github";
-import React, {useReducer, useState} from "react";
-import AceEditor from "react-ace";
-import {Link} from "react-router-dom";
 import "ace-builds/src-noconflict/ext-language_tools";
 
 const qController = Client.getInstance();
@@ -97,16 +97,16 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
    const [versionRecordList, setVersionRecordList] = useState(null as QRecord[]);
    const [selectedVersionRecord, setSelectedVersionRecord] = useState(null as QRecord);
    const [scriptLogs, setScriptLogs] = useState({} as any);
-   const [scriptTypeRecord, setScriptTypeRecord] = useState(null as QRecord);
-   const [scriptTypeFileSchemaList, setScriptTypeFileSchemaList] = useState(null as QRecord[]);
+   const [scriptTypeRecord, setScriptTypeRecord] = useState(null as QRecord)
+   const [scriptTypeFileSchemaList, setScriptTypeFileSchemaList] = useState(null as QRecord[])
    const [availableFileNames, setAvailableFileNames] = useState([] as string[]);
    const [selectedFileName, setSelectedFileName] = useState("");
-   const [currentVersionId, setCurrentVersionId] = useState(null as number);
+   const [currentVersionId , setCurrentVersionId] = useState(null as number);
    const [notFoundMessage, setNotFoundMessage] = useState(null);
    const [selectedTab, setSelectedTab] = useState(0);
    const [editorProps, setEditorProps] = useState(null as ScriptEditorProps);
    const [successText, setSuccessText] = useState(null as string);
-   const [failText, setFailText] = useState(null as string);
+   const [failText, setFailText] = useState(null as string)
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
    const [loadingSelectedVersion, _] = useState(new LoadingState(forceUpdate, "loading"));
@@ -129,13 +129,13 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
 
             let fileMode = scriptTypeRecord.values.get("fileMode");
             let scriptTypeFileSchemaList: QRecord[] = null;
-            if (fileMode == 1) // SINGLE
+            if(fileMode == 1) // SINGLE
             {
                scriptTypeFileSchemaList = [new QRecord({values: {name: "Script.js", fileType: "javascript"}})];
             }
-            else if (fileMode == 2) // MULTI_PRE_DEFINED
+            else if(fileMode == 2) // MULTI_PRE_DEFINED
             {
-               const filter = new QQueryFilter([new QFilterCriteria("scriptTypeId", QCriteriaOperator.EQUALS, [scriptRecord.values.get("scriptTypeId")])], [new QFilterOrderBy("id")]);
+               const filter = new QQueryFilter([new QFilterCriteria("scriptTypeId", QCriteriaOperator.EQUALS, [scriptRecord.values.get("scriptTypeId")])], [new QFilterOrderBy("id")])
                scriptTypeFileSchemaList = await qController.query("scriptTypeFileSchema", filter);
             }
             else // MULTI AD_HOC
@@ -145,22 +145,22 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
             }
 
             setScriptTypeFileSchemaList(scriptTypeFileSchemaList);
-            if (scriptTypeFileSchemaList)
+            if(scriptTypeFileSchemaList)
             {
-               const availableFileNames = scriptTypeFileSchemaList.map((fileSchemaRecord) => fileSchemaRecord.values.get("name"));
+               const availableFileNames = scriptTypeFileSchemaList.map((fileSchemaRecord) => fileSchemaRecord.values.get("name"))
                setAvailableFileNames(availableFileNames);
-               setSelectedFileName(availableFileNames[0]);
+               setSelectedFileName(availableFileNames[0])
             }
 
             const criteria = [new QFilterCriteria("scriptId", QCriteriaOperator.EQUALS, [scriptId])];
             const orderBys = [new QFilterOrderBy("sequenceNo", false)];
-            const filter = new QQueryFilter(criteria, orderBys, null, "AND", 0, 25);
+            const filter = new QQueryFilter(criteria, orderBys, "AND", 0, 25);
             const versions = await qController.query("scriptRevision", filter);
             console.log("Fetched versions:");
             console.log(versions);
             setVersionRecordList(versions);
 
-            if (versions && versions.length > 0)
+            if(versions && versions.length > 0)
             {
                selectVersion(versions[0]);
             }
@@ -169,7 +169,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
          {
             if (e instanceof QException)
             {
-               if ((e as QException).status === 404)
+               if ((e as QException).status === "404")
                {
                   setNotFoundMessage("Script code could not be found.");
                   return;
@@ -253,31 +253,31 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
    const handleSelectFile = (event: SelectChangeEvent) =>
    {
       setSelectedFileName(event.target.value);
-   };
+   }
 
    const getSelectedFileCode = (): string =>
    {
       return (getSelectedVersionCode()[selectedFileName] ?? "");
-   };
+   }
 
    const getSelectedFileType = (): string =>
    {
       for (let i = 0; i < scriptTypeFileSchemaList.length; i++)
       {
          let name = scriptTypeFileSchemaList[i].values.get("name");
-         if (name == selectedFileName)
+         if(name == selectedFileName)
          {
             return (scriptTypeFileSchemaList[i].values.get("fileType"));
          }
       }
 
       return ("javascript"); // have some default...
-   };
+   }
 
-   const getSelectedVersionCode = (): { [name: string]: string } =>
+   const getSelectedVersionCode = (): {[name: string]: string} =>
    {
-      let rs: { [name: string]: string } = {};
-      let files = selectedVersionRecord?.associatedRecords?.get("files");
+      let rs: {[name: string]: string} = {}
+      let files = selectedVersionRecord?.associatedRecords?.get("files")
 
       for (let j = 0; j < files?.length; j++)
       {
@@ -286,7 +286,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
       }
 
       return (rs);
-   };
+   }
 
    function getVersionsList(versionRecordList: QRecord[], selectedVersionRecord: QRecord)
    {
@@ -344,11 +344,11 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
 
    const getScriptLogs = (scriptRevisionId: number) =>
    {
-      if (!scriptLogs[scriptRevisionId])
+      if(!scriptLogs[scriptRevisionId])
       {
          (async () =>
          {
-            let filter = new QQueryFilter([new QFilterCriteria("scriptRevisionId", QCriteriaOperator.EQUALS, [scriptRevisionId])], [new QFilterOrderBy("id", false)], null, "AND", 0, 100);
+            let filter = new QQueryFilter([new QFilterCriteria("scriptRevisionId", QCriteriaOperator.EQUALS, [scriptRevisionId])], [new QFilterOrderBy("id", false)], "AND", 0, 100);
             scriptLogs[scriptRevisionId] = await qController.query("scriptLog", filter);
             setScriptLogs(scriptLogs);
             forceUpdate();
@@ -368,7 +368,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
       }
 
       return (<ScriptLogsView logs={logs} />);
-   };
+   }
 
    let editButtonTooltip = "";
    let editButtonText = "Create New Version";
@@ -556,7 +556,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
                            <Modal open={editorProps !== null} onClose={(event, reason) => closeEditingScript(event, reason)}>
                               <ScriptEditor
                                  closeCallback={closeEditingScript}
-                                 {...editorProps}
+                                 {... editorProps}
                               />
                            </Modal>
                         }

src/qqq/components/widgets/tables/DataTable.tsx

@@ -18,7 +18,6 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
 import {tooltipClasses, TooltipProps} from "@mui/material";
 import Autocomplete from "@mui/material/Autocomplete";
 import Box from "@mui/material/Box";
@@ -30,19 +29,17 @@ import TableContainer from "@mui/material/TableContainer";
 import TableRow from "@mui/material/TableRow";
 import Tooltip from "@mui/material/Tooltip";
 import parse from "html-react-parser";
-import React, {useEffect, useMemo, useState} from "react";
-import {useAsyncDebounce, useExpanded, useGlobalFilter, usePagination, useSortBy, useTable} from "react-table";
+import {useEffect, useMemo, useState} from "react";
+import {useAsyncDebounce, useGlobalFilter, usePagination, useSortBy, useTable, useExpanded} from "react-table";
 import colors from "qqq/assets/theme/base/colors";
 import MDInput from "qqq/components/legacy/MDInput";
 import MDPagination from "qqq/components/legacy/MDPagination";
 import MDTypography from "qqq/components/legacy/MDTypography";
-import CompositeWidget from "qqq/components/widgets/CompositeWidget";
 import DataTableBodyCell from "qqq/components/widgets/tables/cells/DataTableBodyCell";
 import DataTableHeadCell from "qqq/components/widgets/tables/cells/DataTableHeadCell";
 import DefaultCell from "qqq/components/widgets/tables/cells/DefaultCell";
 import ImageCell from "qqq/components/widgets/tables/cells/ImageCell";
 import {TableDataInput} from "qqq/components/widgets/tables/TableCard";
-import WidgetBlock from "qqq/components/widgets/WidgetBlock";
 
 interface Props
 {
@@ -60,7 +57,6 @@ interface Props
    };
    isSorted?: boolean;
    noEndBorder?: boolean;
-   widgetMetaData: QWidgetMetaData;
 }
 
 DataTable.defaultProps = {
@@ -96,7 +92,6 @@ function DataTable({
    pagination,
    isSorted,
    noEndBorder,
-   widgetMetaData
 }: Props): JSX.Element
 {
    let defaultValue: any;
@@ -173,17 +168,6 @@ function DataTable({
       );
    }
 
-   if(table.columnHeaderTooltips)
-   {
-      for (let column of columnsToMemo)
-      {
-         if(table.columnHeaderTooltips[column.accessor])
-         {
-            column.tooltip = table.columnHeaderTooltips[column.accessor];
-         }
-      }
-   }
-
    const columns = useMemo<any>(() => columnsToMemo, [table]);
    const data = useMemo<any>(() => table.rows, [table]);
    const gridTemplateColumns = widths.join(" ");
@@ -296,36 +280,21 @@ function DataTable({
       entriesEnd = pageSize * (pageIndex + 1);
    }
 
-   let visibleFooterRows = 1;
-   if(expanded && expanded[`${table.rows.length-1}`])
-   {
-      //////////////////////////////////////////////////
-      // todo - should count how many are expanded... //
-      //////////////////////////////////////////////////
-      visibleFooterRows = 2;
-   }
-
    function getTable(includeHead: boolean, rows: any, isFooter: boolean)
    {
       let boxStyle = {};
       if(fixedStickyLastRow)
       {
          boxStyle = isFooter
-            ? {borderTop: `0.0625rem solid ${colors.grayLines.main};`, backgroundColor: "#EEEEEE"}
-            : {flexGrow: 1, overflowY: "scroll", scrollbarGutter: "stable", marginBottom: "-1px"};
+            ? {borderTop: `0.0625rem solid ${colors.grayLines.main};`, overflow: "auto", scrollbarGutter: "stable"}
+            : {height: fixedHeight ? `${fixedHeight}px` : "360px", overflowY: "scroll", scrollbarGutter: "stable", marginBottom: "-1px"};
       }
 
-      let innerBoxStyle = {};
-      if(fixedStickyLastRow && isFooter)
-      {
-         innerBoxStyle = {overflowY: "auto", scrollbarGutter: "stable"};
-      }
-
-      return <Box sx={boxStyle}><Box sx={innerBoxStyle}>
+      return <Box sx={boxStyle}>
          <Table {...getTableProps()}>
             {
                includeHead && (
-                  <Box component="thead" sx={{position: "sticky", top: 0, background: "white", zIndex: 10}}>
+                  <Box component="thead" sx={{position: "sticky", top: 0, background: "white"}}>
                      {headerGroups.map((headerGroup: any, i: number) => (
                         <TableRow key={i} {...headerGroup.getHeaderGroupProps()} sx={{display: "grid", gridTemplateColumns: gridTemplateColumns}}>
                            {headerGroup.headers.map((column: any) => (
@@ -335,7 +304,6 @@ function DataTable({
                                     {...column.getHeaderProps(isSorted && column.getSortByToggleProps())}
                                     align={column.align ? column.align : "left"}
                                     sorted={setSortedValue(column)}
-                                    tooltip={column.tooltip}
                                  >
                                     {column.render("header")}
                                  </DataTableHeadCell>
@@ -373,23 +341,13 @@ function DataTable({
                      overrideNoEndBorder = true;
                   }
 
-                  let background = "initial";
-                  if(isFooter)
-                  {
-                     background = "#EEEEEE";
-                  }
-                  else if(row.depth > 0 || row.isExpanded)
-                  {
-                     background = "#FAFAFA";
-                  }
-
                   return (
-                     <TableRow sx={{verticalAlign: "top", display: "grid", gridTemplateColumns: gridTemplateColumns, background: background}} key={key} {...row.getRowProps()}>
+                     <TableRow sx={{verticalAlign: "top", display: "grid", gridTemplateColumns: gridTemplateColumns, background: (row.depth > 0 ? "#FAFAFA" : "initial")}} key={key} {...row.getRowProps()}>
                         {row.cells.map((cell: any) => (
                            cell.column.type !== "hidden" && (
                               <DataTableBodyCell
                                  key={key}
-                                 noBorder={noEndBorder || overrideNoEndBorder || row.isExpanded}
+                                 noBorder={noEndBorder || overrideNoEndBorder}
                                  depth={row.depth}
                                  align={cell.column.align ? cell.column.align : "left"}
                                  {...cell.getCellProps()}
@@ -414,21 +372,7 @@ function DataTable({
                                  }
                                  {
                                     cell.column.type === "html" && (
-                                       <DefaultCell isFooter={isFooter}>{parse(cell.value ?? "")}</DefaultCell>
-                                    )
-                                 }
-                                 {
-                                    cell.column.type === "composite" && (
-                                       <DefaultCell isFooter={isFooter}>
-                                          <CompositeWidget widgetMetaData={widgetMetaData} data={cell.value} />
-                                       </DefaultCell>
-                                    )
-                                 }
-                                 {
-                                    cell.column.type === "block" && (
-                                       <DefaultCell isFooter={isFooter}>
-                                          <WidgetBlock widgetMetaData={widgetMetaData} block={cell.value} />
-                                       </DefaultCell>
+                                       <DefaultCell isFooter={isFooter}>{parse(cell.value)}</DefaultCell>
                                     )
                                  }
                                  {
@@ -453,11 +397,11 @@ function DataTable({
 
             </TableBody>
          </Table>
-      </Box></Box>
+      </Box>
    }
 
    return (
-      <TableContainer sx={{boxShadow: "none", height: fixedHeight ? `${fixedHeight}px` : "auto"}}>
+      <TableContainer sx={{boxShadow: "none"}}>
          {entriesPerPage && ((hidePaginationDropdown !== undefined && !hidePaginationDropdown) || canSearch) ? (
             <Box display="flex" justifyContent="space-between" alignItems="center" p={3}>
                {entriesPerPage && (hidePaginationDropdown === undefined || !hidePaginationDropdown) && (
@@ -504,16 +448,14 @@ function DataTable({
             </Box>
          ) : null}
 
-         <Box display="flex" justifyContent="space-between" flexDirection="column" height="100%">
-            {
-               fixedStickyLastRow ? (
-                  <>
-                     {getTable(true, page.slice(0, page.length - visibleFooterRows), false)}
-                     {getTable(false, page.slice(page.length - visibleFooterRows), true)}
-                  </>
-               ) : getTable(true, page, false)
-            }
-         </Box>
+         {
+            fixedStickyLastRow ? (
+               <>
+                  {getTable(true, page.slice(0, page.length -1), false)}
+                  {getTable(false, page.slice(page.length-1), true)}
+               </>
+            ) : getTable(true, page, false)
+         }
 
          <Box
             display="flex"

src/qqq/components/widgets/tables/TableCard.tsx

@@ -20,7 +20,6 @@
  */
 
 import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
-import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
 import {Skeleton} from "@mui/material";
 import Box from "@mui/material/Box";
 import Table from "@mui/material/Table";
@@ -43,7 +42,6 @@ import Client from "qqq/utils/qqq/Client";
 export interface TableDataInput
 {
    columns: { [key: string]: any }[];
-   columnHeaderTooltips?: { [columnName: string]: string | JSX.Element }
    rows: { [key: string]: any }[];
 }
 
@@ -59,11 +57,10 @@ interface Props
    fixedStickyLastRow?: boolean;
    fixedHeight?: number;
    data: TableDataInput;
-   widgetMetaData: QWidgetMetaData;
 }
 
 const qController = Client.getInstance();
-function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown, fixedStickyLastRow, fixedHeight, widgetMetaData}: Props): JSX.Element
+function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown, fixedStickyLastRow, fixedHeight}: Props): JSX.Element
 {
    const [qInstance, setQInstance] = useState(null as QInstance);
 
@@ -77,7 +74,7 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown,
    }, []);
 
    return (
-      <Box className="tableCard" mx={-2} mb="-28px" pt="11px" pb="0.25rem">
+      <Box py={1} mx={-2}>
          {
             data && data.columns && !noRowsFoundHTML ?
                <DataTable
@@ -88,10 +85,9 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown,
                   fixedHeight={fixedHeight}
                   showTotalEntries={false}
                   isSorted={false}
-                  widgetMetaData={widgetMetaData}
                />
                : noRowsFoundHTML ?
-                  <Box p={3} pt={0} pb={3} sx={{textAlign: "center"}}>
+                  <Box p={3} pt={1} pb={1} sx={{textAlign: "center"}}>
                      <MDTypography
                         variant="subtitle2"
                         color="secondary"

src/qqq/components/widgets/tables/TableWidget.tsx

@@ -21,14 +21,16 @@
 
 
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import Button from "@mui/material/Button";
+import Icon from "@mui/material/Icon";
+import Tooltip from "@mui/material/Tooltip/Tooltip";
+import Typography from "@mui/material/Typography";
 // @ts-ignore
 import {htmlToText} from "html-to-text";
-import React, {useContext, useEffect, useState} from "react";
-import QContext from "QContext";
-import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
+import React, {useEffect, useState} from "react";
+import colors from "qqq/assets/theme/base/colors";
 import TableCard from "qqq/components/widgets/tables/TableCard";
 import Widget, {WidgetData} from "qqq/components/widgets/Widget";
-import {WidgetUtils} from "qqq/components/widgets/WidgetUtils";
 import HtmlUtils from "qqq/utils/HtmlUtils";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
 
@@ -48,7 +50,6 @@ function TableWidget(props: Props): JSX.Element
    const [isExportDisabled, setIsExportDisabled] = useState(false); // hmm, would like true here, but it broke...
    const [csv, setCsv] = useState(null as string);
    const [fileName, setFileName] = useState(null as string);
-   const {helpHelpActive} = useContext(QContext);
 
    const rows = props.widgetData?.rows;
    const columns = props.widgetData?.columns;
@@ -104,7 +105,7 @@ function TableWidget(props: Props): JSX.Element
 
          setCsv(csv);
 
-         const fileName = WidgetUtils.makeExportFileName(props.widgetData, props.widgetMetaData);
+         const fileName = (props.widgetData.label ?? props.widgetMetaData.label) + " " + ValueUtils.formatDateTimeForFileName(new Date()) + ".csv";
          setFileName(fileName)
 
          console.log(`useEffect, setting fileName ${fileName}`);
@@ -114,13 +115,7 @@ function TableWidget(props: Props): JSX.Element
 
    const onExportClick = () =>
    {
-      if(props.widgetData?.csvData)
-      {
-         const csv = WidgetUtils.widgetCsvDataToString(props.widgetData);
-         const fileName = WidgetUtils.makeExportFileName(props.widgetData, props.widgetMetaData);
-         HtmlUtils.download(fileName, csv);
-      }
-      else if(csv)
+      if(csv)
       {
          HtmlUtils.download(fileName, csv);
       }
@@ -133,24 +128,11 @@ function TableWidget(props: Props): JSX.Element
    const labelAdditionalElementsLeft: JSX.Element[] = [];
    if(props.widgetMetaData?.showExportButton)
    {
-      labelAdditionalElementsLeft.push(WidgetUtils.generateExportButton(onExportClick));
-   }
-
-   //////////////////////////////////////////////////////
-   // look for column-header tooltips from helpContent //
-   //////////////////////////////////////////////////////
-   const columnHeaderTooltips: {[columnName: string]: JSX.Element} = {}
-   for (let column of props.widgetData?.columns ?? [])
-   {
-      const helpRoles = ["ALL_SCREENS"]
-      const slotName = `columnHeader=${column.accessor}`;
-      const showHelp = helpHelpActive || hasHelpContent(props.widgetMetaData?.helpContent?.get(slotName), helpRoles);
-
-      if(showHelp)
-      {
-         const formattedHelpContent = <HelpContent helpContents={props.widgetMetaData?.helpContent?.get(slotName)} roles={helpRoles} helpContentKey={`widget:${props.widgetMetaData?.name};slot:${slotName}`} />;
-         columnHeaderTooltips[column.accessor] = formattedHelpContent;
-      }
+      labelAdditionalElementsLeft.push(
+         <Typography key={1} variant="body2" py={2} px={0} display="inline" position="relative" top="-0.25rem">
+            <Tooltip title="Export"><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={false}><Icon sx={{color: colors.gray.main, fontSize: 1.125}}>save_alt</Icon></Button></Tooltip>
+         </Typography>
+      );
    }
 
    return (
@@ -168,8 +150,7 @@ function TableWidget(props: Props): JSX.Element
             hidePaginationDropdown={props.widgetData?.hidePaginationDropdown}
             fixedStickyLastRow={props.widgetData?.fixedStickyLastRow}
             fixedHeight={props.widgetData?.fixedHeight}
-            data={{columns: props.widgetData?.columns, rows: props.widgetData?.rows, columnHeaderTooltips: columnHeaderTooltips}}
-            widgetMetaData={props.widgetMetaData}
+            data={{columns: props.widgetData?.columns, rows: props.widgetData?.rows}}
          />
       </Widget>
    );

src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx

@@ -21,8 +21,8 @@
 
 import Box from "@mui/material/Box";
 import {Theme} from "@mui/material/styles";
-import colors from "qqq/assets/theme/base/colors";
 import {ReactNode} from "react";
+import colors from "qqq/assets/theme/base/colors";
 
 // Declaring prop types for DataTableBodyCell
 interface Props
@@ -39,7 +39,7 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
          component="td"
          textAlign={align}
          py={1.5}
-         px={1.5}
+         px={3}
          sx={({palette: {light}, typography: {size}, borders: {borderWidth}}: Theme) => ({
             borderBottom: noBorder ? "none" : `${borderWidth[1]} solid ${colors.grayLines.main}`,
             fontSize: "0.875rem",
@@ -49,7 +49,7 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
             "@media (max-width: 1440px)": {
                fontSize: "0.875rem"
             },
-            "&:nth-of-type(1)": {
+            "&:nth-child(1)": {
                paddingLeft: "1rem"
             },
             "&:last-child": {

src/qqq/components/widgets/tables/cells/DataTableHeadCell.tsx

@@ -22,10 +22,9 @@
 import Box from "@mui/material/Box";
 import Icon from "@mui/material/Icon";
 import {Theme} from "@mui/material/styles";
-import Tooltip from "@mui/material/Tooltip";
+import {ReactNode} from "react";
 import colors from "qqq/assets/theme/base/colors";
 import {useMaterialUIController} from "qqq/context";
-import {ReactNode} from "react";
 
 // Declaring props types for DataTableHeadCell
 interface Props
@@ -34,10 +33,9 @@ interface Props
    children: ReactNode;
    sorted?: false | "none" | "asce" | "desc";
    align?: "left" | "right" | "center";
-   tooltip?: string | JSX.Element;
 }
 
-function DataTableHeadCell({width, children, sorted, align, tooltip, ...rest}: Props): JSX.Element
+function DataTableHeadCell({width, children, sorted, align, ...rest}: Props): JSX.Element
 {
    const [controller] = useMaterialUIController();
    const {darkMode} = controller;
@@ -47,10 +45,10 @@ function DataTableHeadCell({width, children, sorted, align, tooltip, ...rest}: P
          component="th"
          width={width}
          py={1.5}
-         px={1.5}
+         px={3}
          sx={({palette: {light}, borders: {borderWidth}}: Theme) => ({
             borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`,
-            "&:nth-of-type(1)": {
+            "&:nth-child(1)": {
                paddingLeft: "1rem"
             },
             "&:last-child": {
@@ -75,43 +73,39 @@ function DataTableHeadCell({width, children, sorted, align, tooltip, ...rest}: P
                userSelect: sorted && "none",
             })}
          >
-            <>
-               {
-                  tooltip ? <Tooltip title={tooltip}><span style={{cursor: "default"}}>{children}</span></Tooltip> : children
-               }
-               {sorted && (
+            {children}
+            {sorted && (
+               <Box
+                  position="absolute"
+                  top={0}
+                  right={align !== "right" ? "16px" : 0}
+                  left={align === "right" ? "-5px" : "unset"}
+                  sx={({typography: {size}}: any) => ({
+                     fontSize: size.lg,
+                  })}
+               >
                   <Box
-                     position="absolute"
-                     top={0}
-                     right={align !== "right" ? "16px" : 0}
-                     left={align === "right" ? "-5px" : "unset"}
-                     sx={({typography: {size}}: any) => ({
-                        fontSize: size.lg,
-                     })}
+                     sx={{
+                        position: "absolute",
+                        top: -6,
+                        color: sorted === "asce" ? "text" : "secondary",
+                        opacity: sorted === "asce" ? 1 : 0.5
+                     }}
                   >
-                     <Box
-                        sx={{
-                           position: "absolute",
-                           top: -6,
-                           color: sorted === "asce" ? "text" : "secondary",
-                           opacity: sorted === "asce" ? 1 : 0.5
-                        }}
-                     >
-                        <Icon>arrow_drop_up</Icon>
-                     </Box>
-                     <Box
-                        sx={{
-                           position: "absolute",
-                           top: 0,
-                           color: sorted === "desc" ? "text" : "secondary",
-                           opacity: sorted === "desc" ? 1 : 0.5
-                        }}
-                     >
-                        <Icon>arrow_drop_down</Icon>
-                     </Box>
+                     <Icon>arrow_drop_up</Icon>
                   </Box>
-               )}
-            </>
+                  <Box
+                     sx={{
+                        position: "absolute",
+                        top: 0,
+                        color: sorted === "desc" ? "text" : "secondary",
+                        opacity: sorted === "desc" ? 1 : 0.5
+                     }}
+                  >
+                     <Icon>arrow_drop_down</Icon>
+                  </Box>
+               </Box>
+            )}
          </Box>
       </Box>
    );

src/qqq/models/fields/FieldRules.ts

@@ -1,50 +0,0 @@
-/*
- * 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/>.
- */
-
-
-/*******************************************************************************
- **
- *******************************************************************************/
-export interface FieldRule
-{
-   trigger: FieldRuleTrigger;
-   sourceField: string;
-   action: FieldRuleAction;
-   targetField: string;
-}
-
-
-/*******************************************************************************
- **
- *******************************************************************************/
-export enum FieldRuleTrigger
-{
-   ON_CHANGE = "ON_CHANGE"
-}
-
-
-/*******************************************************************************
- **
- *******************************************************************************/
-export enum FieldRuleAction
-{
-   CLEAR_TARGET_FIELD = "CLEAR_TARGET_FIELD"
-}

src/qqq/models/misc/PivotTableDefinitionModels.ts

@@ -1,159 +0,0 @@
-/*
- * 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 {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
-
-
-/*******************************************************************************
- ** put a unique key value in all the pivot table group-by and value objects,
- ** to help react rendering be sane.
- *******************************************************************************/
-export class PivotObjectKey
-{
-   private static value = new Date().getTime();
-
-   static next(): number
-   {
-      return PivotObjectKey.value++;
-   }
-}
-
-
-/*******************************************************************************
- ** Full definition of pivot table
- *******************************************************************************/
-export class PivotTableDefinition
-{
-   rows: PivotTableGroupBy[];
-   columns: PivotTableGroupBy[];
-   values: PivotTableValue[];
-}
-
-
-/*******************************************************************************
- ** A field that the pivot table is grouped by, either as a row or column
- *******************************************************************************/
-export class PivotTableGroupBy
-{
-   fieldName: string;
-   key: number;
-
-   constructor()
-   {
-      this.key = PivotObjectKey.next();
-   }
-}
-
-
-/*******************************************************************************
- ** A field & function that serves as the computed values in the pivot table
- *******************************************************************************/
-export class PivotTableValue
-{
-   fieldName: string;
-   function: PivotTableFunction;
-
-   key: number;
-
-   constructor()
-   {
-      this.key = PivotObjectKey.next();
-   }
-}
-
-
-/*******************************************************************************
- ** Functions that can be applied to pivot table values
- *******************************************************************************/
-export enum PivotTableFunction
-{
-   SUM = "SUM",
-   COUNT = "COUNT",
-   AVERAGE = "AVERAGE",
-   MAX = "MAX",
-   MIN = "MIN",
-   PRODUCT = "PRODUCT",
-
-   ///////////////////////////////////////////////////////////////////////////////
-   // i don't think we have a useful version of count-nums --unless we allowed  //
-   // it on string fields, and counted if they looked like numbers? is that     //
-   // what we should do? ... leave here as zombie in case that request comes in //
-   ///////////////////////////////////////////////////////////////////////////////
-   // COUNT_NUMS = "COUNT_NUMS",
-
-   STD_DEV = "STD_DEV",
-   STD_DEVP = "STD_DEVP",
-   VAR = "VAR",
-   VARP = "VARP",
-}
-
-const allFunctions = [
-   PivotTableFunction.SUM,
-   PivotTableFunction.COUNT,
-   PivotTableFunction.AVERAGE,
-   PivotTableFunction.MAX,
-   PivotTableFunction.MIN,
-   PivotTableFunction.PRODUCT,
-   // PivotTableFunction.COUNT_NUMS,
-   PivotTableFunction.STD_DEV,
-   PivotTableFunction.STD_DEVP,
-   PivotTableFunction.VAR,
-   PivotTableFunction.VARP
-];
-
-const onlyCount = [PivotTableFunction.COUNT];
-
-const functionsForDates = [PivotTableFunction.COUNT, PivotTableFunction.AVERAGE, PivotTableFunction.MAX, PivotTableFunction.MIN];
-
-export const functionsPerFieldType: { [type: string]: PivotTableFunction[] } = {};
-functionsPerFieldType[QFieldType.STRING] = onlyCount;
-functionsPerFieldType[QFieldType.BOOLEAN] = onlyCount;
-functionsPerFieldType[QFieldType.BLOB] = onlyCount;
-functionsPerFieldType[QFieldType.HTML] = onlyCount;
-functionsPerFieldType[QFieldType.PASSWORD] = onlyCount;
-functionsPerFieldType[QFieldType.TEXT] = onlyCount;
-functionsPerFieldType[QFieldType.TIME] = onlyCount;
-
-functionsPerFieldType[QFieldType.INTEGER] = allFunctions;
-functionsPerFieldType[QFieldType.DECIMAL] = allFunctions;
-// functionsPerFieldType[QFieldType.LONG] = allFunctions;
-
-functionsPerFieldType[QFieldType.DATE] = functionsForDates;
-functionsPerFieldType[QFieldType.DATE_TIME] = functionsForDates;
-
-
-//////////////////////////////////////
-// labels for pivot table functions //
-//////////////////////////////////////
-export const pivotTableFunctionLabels =
-   {
-      "SUM": "Sum",
-      "COUNT": "Count",
-      "AVERAGE": "Average",
-      "MAX": "Max",
-      "MIN": "Min",
-      "PRODUCT": "Product",
-      // "COUNT_NUMS": "Count Numbers",
-      "STD_DEV": "StdDev",
-      "STD_DEVP": "StdDevp",
-      "VAR": "Var",
-      "VARP": "Varp"
-   };

src/qqq/models/query/QQueryColumns.ts

@@ -23,13 +23,14 @@
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {GridPinnedColumns} from "@mui/x-data-grid-pro";
+import quickSightChart from "qqq/components/widgets/misc/QuickSightChart";
 import DataGridUtils from "qqq/utils/DataGridUtils";
 import TableUtils from "qqq/utils/qqq/TableUtils";
 
 /*******************************************************************************
  ** member object
  *******************************************************************************/
-export interface Column
+interface Column
 {
    name: string;
    isVisible: boolean;
@@ -80,19 +81,11 @@ export default class QQueryColumns
       fields.forEach((field) =>
       {
          const column: Column = {name: field.name, isVisible: true, width: DataGridUtils.getColumnWidthForField(field, table)};
+         queryColumns.columns.push(column);
 
          if (field.name == table.primaryKeyField)
          {
             column.pinned = "left";
-
-            //////////////////////////////////////////////////
-            // insert the primary key field after __check__ //
-            //////////////////////////////////////////////////
-            queryColumns.columns.splice(1, 0, column);
-         }
-         else
-         {
-            queryColumns.columns.push(column);
          }
       });
 
@@ -400,42 +393,6 @@ export default class QQueryColumns
       return columnVisibilityModel;
    };
 
-
-   /*******************************************************************************
-    ** sort the columns list, so that pinned columns go to the front (left) or back
-    ** (right) of the list.
-    *******************************************************************************/
-   public sortColumnsFixingPinPositions = (): void =>
-   {
-      /////////////////////////////////////////////////////////////////////////////////////////////
-      // do a sort to push pinned-left columns to the start, and pinned-right columns to the end //
-      // and otherwise, leave everything alone                                                   //
-      /////////////////////////////////////////////////////////////////////////////////////////////
-      this.columns = this.columns.sort((a: Column, b: Column) =>
-      {
-         if(a.pinned == "left" && b.pinned != "left")
-         {
-            return -1;
-         }
-         else if(b.pinned == "left" && a.pinned != "left")
-         {
-            return 1;
-         }
-         else if(a.pinned == "right" && b.pinned != "right")
-         {
-            return 1;
-         }
-         else if(b.pinned == "right" && a.pinned != "right")
-         {
-            return -1;
-         }
-         else
-         {
-            return (0);
-         }
-      });
-   }
-
 }
 
 

src/qqq/models/query/RecordQueryView.ts

@@ -63,8 +63,6 @@ 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/apps/Home.tsx

@@ -31,6 +31,8 @@ import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 import Divider from "@mui/material/Divider";
 import Grid from "@mui/material/Grid";
+import React, {useContext, useEffect, useState} from "react";
+import {Link, useLocation} from "react-router-dom";
 import QContext from "QContext";
 import colors from "qqq/assets/theme/base/colors";
 import MDTypography from "qqq/components/legacy/MDTypography";
@@ -39,8 +41,6 @@ import DashboardWidgets from "qqq/components/widgets/DashboardWidgets";
 import MiniStatisticsCard from "qqq/components/widgets/statistics/MiniStatisticsCard";
 import BaseLayout from "qqq/layouts/BaseLayout";
 import Client from "qqq/utils/qqq/Client";
-import React, {useContext, useEffect, useState} from "react";
-import {Link, useLocation} from "react-router-dom";
 
 const qController = Client.getInstance();
 
@@ -62,7 +62,7 @@ function AppHome({app}: Props): JSX.Element
    const [updatedTableCounts, setUpdatedTableCounts] = useState(new Date());
    const [widgets, setWidgets] = useState([] as any[]);
 
-   const {pageHeader, recordAnalytics, setPageHeader} = useContext(QContext);
+   const {pageHeader, setPageHeader} = useContext(QContext);
 
    const location = useLocation();
 
@@ -75,20 +75,9 @@ function AppHome({app}: Props): JSX.Element
       })();
    }, []);
 
-   const mdbMetaData = app?.supplementalAppMetaData?.get("materialDashboard");
-   let showAppLabelOnHomeScreen = true;
-   let includeTableCountsOnHomeScreen = true;
-   if(mdbMetaData)
-   {
-      showAppLabelOnHomeScreen = mdbMetaData.showAppLabelOnHomeScreen;
-      includeTableCountsOnHomeScreen = mdbMetaData.includeTableCountsOnHomeScreen;
-   }
-
    useEffect(() =>
    {
-      setPageHeader(null);
-      recordAnalytics({location: window.location, title: "App: " + app.label});
-      recordAnalytics({category: "appEvents", action: "loadAppScreen", label: app.label});
+      setPageHeader(app.label);
 
       if (!qInstance)
       {
@@ -132,60 +121,48 @@ function AppHome({app}: Props): JSX.Element
       const tableCountTexts = new Map<string, string>();
       newTables.forEach((table) =>
       {
-         if(includeTableCountsOnHomeScreen)
-         {
-            tableCounts.set(table.name, {isLoading: true, value: null});
-            setTimeout(async () =>
-            {
-               const tableMetaData = await qController.loadTableMetaData(table.name);
-               let countResult = null;
-               if (tableMetaData.capabilities.has(Capability.TABLE_COUNT) && tableMetaData.readPermission)
-               {
-                  try
-                  {
-                     [countResult] = await qController.count(table.name);
+         tableCounts.set(table.name, {isLoading: true, value: null});
 
-                     if (countResult !== null && countResult !== undefined)
-                     {
-                        tableCountNumbers.set(table.name, countResult.toLocaleString());
-                        tableCountTexts.set(table.name, countResult === 1 ? "total record" : "total records");
-                     }
-                     else
-                     {
-                        tableCountNumbers.set(table.name, "–");
-                        tableCountTexts.set(table.name, " ");
-                     }
-                  }
-                  catch (e)
+         setTimeout(async () =>
+         {
+            const tableMetaData = await qController.loadTableMetaData(table.name);
+            let countResult = null;
+            if(tableMetaData.capabilities.has(Capability.TABLE_COUNT) && tableMetaData.readPermission)
+            {
+               try
+               {
+                  [countResult] = await qController.count(table.name);
+
+                  if (countResult !== null && countResult !== undefined)
+                  {
+                     tableCountNumbers.set(table.name, countResult.toLocaleString());
+                     tableCountTexts.set(table.name, countResult === 1 ? "total record" : "total records");
+                  }
+                  else
                   {
-                     console.log("Caught: " + e);
                      tableCountNumbers.set(table.name, "–");
                      tableCountTexts.set(table.name, " ");
                   }
                }
-               else
+               catch(e)
                {
+                  console.log("Caught: " + e);
                   tableCountNumbers.set(table.name, "–");
                   tableCountTexts.set(table.name, " ");
                }
+            }
+            else
+            {
+               tableCountNumbers.set(table.name, "–");
+               tableCountTexts.set(table.name, " ");
+            }
 
-               tableCounts.set(table.name, {isLoading: false, value: countResult});
-               setTableCounts(tableCounts);
-               setTableCountNumbers(tableCountNumbers);
-               setTableCountTexts(tableCountTexts);
-               setUpdatedTableCounts(new Date());
-            }, 1);
-         }
-         else
-         {
-            tableCounts.set(table.name, {isLoading: false, value: null});
-            tableCountNumbers.set(table.name, " ");
-            tableCountTexts.set(table.name, " ");
-
+            tableCounts.set(table.name, {isLoading: false, value: countResult});
             setTableCounts(tableCounts);
             setTableCountNumbers(tableCountNumbers);
             setTableCountTexts(tableCountTexts);
-         }
+            setUpdatedTableCounts(new Date());
+         }, 1);
       });
       setTableCounts(tableCounts);
 
@@ -231,12 +208,6 @@ function AppHome({app}: Props): JSX.Element
    {
       return (
          <BaseLayout>
-            {
-               showAppLabelOnHomeScreen &&
-               <Typography textTransform="capitalize" variant="h3">
-                  {app.label}
-               </Typography>
-            }
             <Grid container spacing={3}>
                <Grid item xs={12} lg={12}>
                   <Card sx={{overflow: "visible"}}>
@@ -282,19 +253,13 @@ function AppHome({app}: Props): JSX.Element
 
    return (
       <BaseLayout>
-         {
-            showAppLabelOnHomeScreen &&
-            <Typography textTransform="capitalize" variant="h3">
-               {app.label}
-            </Typography>
-         }
          <Box>
             {app.widgets && app.widgets.length > 0 && (
-               <Box pb={app.sections ? 2.375 : 4} pt={"0.5rem"}>
+               <Box pb={app.sections ? 2.375 : 0}>
                   <DashboardWidgets widgetMetaDataList={widgets} />
                </Box>
             )}
-            <Grid container spacing={3} mt={"-1rem"}>
+            <Grid container spacing={3}>
                {
                   app.sections ? (
                      <Grid item xs={12} lg={12}>
@@ -314,7 +279,7 @@ function AppHome({app}: Props): JSX.Element
                                  </Box>
                                  {
                                     section.processes ? (
-                                       <Box p={3} pl={3} pt={0} pb={1}>
+                                       <Box p={3} pl={5} pt={0} pb={1}>
                                           <MDTypography variant="h6">Actions</MDTypography>
                                        </Box>
                                     ) : null
@@ -355,7 +320,7 @@ function AppHome({app}: Props): JSX.Element
                                  }
                                  {
                                     section.reports ? (
-                                       <Box p={3} pl={3} pt={0} pb={1}>
+                                       <Box p={3} pl={5} pt={0} pb={1}>
                                           <MDTypography variant="h6">Reports</MDTypography>
                                        </Box>
                                     ) : null
@@ -398,7 +363,7 @@ function AppHome({app}: Props): JSX.Element
                                  }
                                  {
                                     section.tables ? (
-                                       <Box p={3} pl={3} pb={1} pt={0}>
+                                       <Box p={3} pl={5} pb={1} pt={0}>
                                           <MDTypography variant="h6">Data</MDTypography>
                                        </Box>
                                     ) : null
@@ -410,13 +375,6 @@ function AppHome({app}: Props): JSX.Element
                                              section.tables.map((tableName) =>
                                              {
                                                 let table = app.childMap.get(tableName);
-                                                let count = "";
-                                                let percentage = "";
-                                                if(includeTableCountsOnHomeScreen)
-                                                {
-                                                   count = !tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "..." : (tableCountNumbers.get(table.name));
-                                                   percentage = !tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "" : (tableCountTexts.get(table.name));
-                                                }
                                                 return (
                                                    <Grid key={table.name} item xs={12} md={12} lg={tileSizeLg}>
                                                       {hasTablePermission(tableName) ?
@@ -424,8 +382,8 @@ function AppHome({app}: Props): JSX.Element
                                                             <Box className="big-icon" mb={3}>
                                                                <MiniStatisticsCard
                                                                   title={{fontWeight: "bold", text: table.label}}
-                                                                  count={count}
-                                                                  percentage={{color: "info", text: percentage}}
+                                                                  count={!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "..." : (tableCountNumbers.get(table.name))}
+                                                                  percentage={{color: "info", text: (!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "" : (tableCountTexts.get(table.name)))}}
                                                                   icon={{color: "info", component: <Icon>{table.iconName || app.iconName}</Icon>}}
                                                                />
                                                             </Box>
@@ -433,8 +391,8 @@ function AppHome({app}: Props): JSX.Element
                                                          <Box mb={3} title="You do not have permission to access this table">
                                                             <MiniStatisticsCard
                                                                title={{fontWeight: "bold", text: table.label}}
-                                                               count={count}
-                                                               percentage={{color: "info", text: percentage}}
+                                                               count={!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "..." : (tableCountNumbers.get(table.name))}
+                                                               percentage={{color: "info", text: (!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "" : (tableCountTexts.get(table.name)))}}
                                                                icon={{color: "info", component: <Icon>{table.iconName || app.iconName}</Icon>}}
                                                                isDisabled={true}
                                                             />

src/qqq/pages/processes/ProcessRun.tsx

@@ -47,6 +47,9 @@ import {DataGridPro, GridColDef} from "@mui/x-data-grid-pro";
 import FormData from "form-data";
 import {Form, Formik} from "formik";
 import parse from "html-react-parser";
+import React, {useContext, useEffect, useState} from "react";
+import {useLocation, useNavigate, useParams} from "react-router-dom";
+import * as Yup from "yup";
 import QContext from "QContext";
 import {QCancelButton, QSubmitButton} from "qqq/components/buttons/DefaultButtons";
 import QDynamicForm from "qqq/components/forms/DynamicForm";
@@ -63,9 +66,6 @@ import {TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT} from "qqq/pages/records/query/Reco
 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, useState} from "react";
-import {useLocation, useNavigate, useParams} from "react-router-dom";
-import * as Yup from "yup";
 
 
 interface Props
@@ -91,7 +91,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
    const processNameParam = useParams().processName;
    const processName = process === null ? processNameParam : process.name;
    let tableVariantLocalStorageKey: string | null = null;
-   if (table)
+   if(table)
    {
       tableVariantLocalStorageKey = `${TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT}.${table.name}`;
    }
@@ -124,7 +124,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
    const [showErrorDetail, setShowErrorDetail] = useState(false);
    const [showFullHelpText, setShowFullHelpText] = useState(false);
 
-   const {pageHeader, recordAnalytics, setPageHeader} = useContext(QContext);
+   const {pageHeader, setPageHeader} = useContext(QContext);
 
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // for setting the processError state - call this function, which will also set the isUserFacingError state //
@@ -226,19 +226,8 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
       setShowFullHelpText(!showFullHelpText);
    };
 
-   const download = (processValues: {[key: string]: string}) =>
+   const download = (url: string, fileName: string) =>
    {
-      let url;
-      let fileName = processValues.downloadFileName;
-      if(processValues.serverFilePath)
-      {
-         url = `/download/${encodeURIComponent(processValues.downloadFileName)}?filePath=${encodeURIComponent(processValues.serverFilePath)}`;
-      }
-      else if(processValues.storageTableName && processValues.storageReference)
-      {
-         url = `/download/${encodeURIComponent(processValues.downloadFileName)}?storageTableName=${encodeURIComponent(processValues.storageTableName)}&storageReference=${encodeURIComponent(processValues.storageReference)}`;
-      }
-
       /////////////////////////////////////////////////////////////////////////////////////////////
       // todo - this could be simplified, i think?                                               //
       // it was originally built like this when we had to submit full access token to backend... //
@@ -427,10 +416,10 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
                //////////////////////////////////////////////////
                step.components && (step.components.map((component: QFrontendComponent, index: number) =>
                {
-                  let helpRoles = ["PROCESS_SCREEN", "ALL_SCREENS"];
-                  if (component.type == QComponentType.BULK_EDIT_FORM)
+                  let helpRoles = ["PROCESS_SCREEN", "ALL_SCREENS"]
+                  if(component.type == QComponentType.BULK_EDIT_FORM)
                   {
-                     helpRoles = ["EDIT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"];
+                     helpRoles = ["EDIT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"]
                   }
 
                   return (
@@ -567,7 +556,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
                                        Download
                                     </Box>
                                     <Box display="flex" py={1} pr={2}>
-                                       <MDTypography variant="button" fontWeight="bold" onClick={() => download(processValues)} sx={{cursor: "pointer"}}>
+                                       <MDTypography variant="button" fontWeight="bold" onClick={() => download(`/download/${processValues.downloadFileName}?filePath=${processValues.serverFilePath}`, processValues.downloadFileName)} sx={{cursor: "pointer"}}>
                                           <Box display="flex" alignItems="center" gap={1} py={1} pr={2}>
                                              <Icon fontSize="large">download_for_offline</Icon>
                                              {processValues.downloadFileName}
@@ -1079,7 +1068,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
 
    const handlePermissionDenied = (e: any): boolean =>
    {
-      if ((e as QException).status === 403)
+      if ((e as QException).status === "403")
       {
          setProcessError(`You do not have permission to run this ${isReport ? "report" : "process"}.`, true);
          return (true);
@@ -1157,10 +1146,6 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
             const processMetaData = await Client.getInstance().loadProcessMetaData(processName);
             setProcessMetaData(processMetaData);
             setSteps(processMetaData.frontendSteps);
-
-            recordAnalytics({location: window.location, title: "Process: " + processMetaData?.label});
-            recordAnalytics({category: "processEvents", action: "startProcess", label: processMetaData?.label});
-
             if (processMetaData.tableName && !tableMetaData)
             {
                try
@@ -1266,8 +1251,6 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
 
       setTimeout(async () =>
       {
-         recordAnalytics({category: "processEvents", action: "processStep", label: activeStep.label});
-
          const processResponse = await Client.getInstance().processStep(
             processName,
             processUUID,

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

@@ -21,7 +21,6 @@
 
 import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
-import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QTableSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableSection";
 import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete";
@@ -147,11 +146,6 @@ function ColumnStats({tableMetaData, fieldMetaData, fieldTableName, filter}: Pro
             const rows = DataGridUtils.makeRows(valueCounts, fakeTableMetaData);
             const columns = DataGridUtils.setupGridColumns(fakeTableMetaData, null, null, "bySection");
 
-            if(fieldMetaData.type == QFieldType.DATE_TIME)
-            {
-               columns[0].headerName = fieldMetaData.label + " (grouped by hour)"
-            }
-
             columns.forEach((c) =>
             {
                c.filterable = false;

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

@@ -28,6 +28,9 @@ import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
 import Grid from "@mui/material/Grid";
 import Snackbar from "@mui/material/Snackbar";
+import React, {useContext, useReducer, useState} from "react";
+import AceEditor from "react-ace";
+import {useParams} from "react-router-dom";
 import QContext from "QContext";
 import ScriptViewer from "qqq/components/widgets/misc/ScriptViewer";
 import BaseLayout from "qqq/layouts/BaseLayout";
@@ -38,9 +41,6 @@ import "ace-builds/src-noconflict/mode-java";
 import "ace-builds/src-noconflict/mode-javascript";
 import "ace-builds/src-noconflict/mode-json";
 import "ace-builds/src-noconflict/theme-github";
-import React, {useContext, useReducer, useState} from "react";
-import AceEditor from "react-ace";
-import {useParams} from "react-router-dom";
 import "ace-builds/src-noconflict/ext-language_tools";
 
 const qController = Client.getInstance();
@@ -69,9 +69,13 @@ function RecordDeveloperView({table}: Props): JSX.Element
    const [associatedScripts, setAssociatedScripts] = useState([] as any[]);
    const [notFoundMessage, setNotFoundMessage] = useState(null);
 
+   const [selectedTabs, setSelectedTabs] = useState({} as any);
+   const [viewingRevisions, setViewingRevisions] = useState({} as any);
+   const [scriptLogs, setScriptLogs] = useState({} as any);
+
    const [alertText, setAlertText] = useState(null as string);
 
-   const {setPageHeader, recordAnalytics} = useContext(QContext);
+   const {setPageHeader} = useContext(QContext);
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
    if (!asyncLoadInited)
@@ -86,8 +90,6 @@ function RecordDeveloperView({table}: Props): JSX.Element
          const tableMetaData = await qController.loadTableMetaData(tableName);
          setTableMetaData(tableMetaData);
 
-         recordAnalytics({location: window.location, title: "Developer Mode: " + tableMetaData.label});
-
          //////////////////////////////
          // load top-level meta-data //
          //////////////////////////////
@@ -119,7 +121,7 @@ function RecordDeveloperView({table}: Props): JSX.Element
          {
             if (e instanceof QException)
             {
-               if ((e as QException).status === 404)
+               if ((e as QException).status === "404")
                {
                   setNotFoundMessage(`${tableMetaData.label} ${id} could not be found.`);
                   return;

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

@@ -46,16 +46,16 @@ import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import Modal from "@mui/material/Modal";
 import Tooltip from "@mui/material/Tooltip/Tooltip";
+import React, {useContext, useEffect, useState} from "react";
+import {useLocation, useNavigate, useParams} from "react-router-dom";
 import QContext from "QContext";
 import colors from "qqq/assets/theme/base/colors";
 import AuditBody from "qqq/components/audits/AuditBody";
-import {QActionsMenuButton, QCancelButton, QDeleteButton, QEditButton, standardWidth} from "qqq/components/buttons/DefaultButtons";
+import {QActionsMenuButton, QCancelButton, QDeleteButton, QEditButton} from "qqq/components/buttons/DefaultButtons";
 import EntityForm from "qqq/components/forms/EntityForm";
-import MDButton from "qqq/components/legacy/MDButton";
 import {GotoRecordButton} from "qqq/components/misc/GotoRecordDialog";
 import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
 import QRecordSidebar from "qqq/components/misc/RecordSidebar";
-import ShareModal from "qqq/components/sharing/ShareModal";
 import DashboardWidgets from "qqq/components/widgets/DashboardWidgets";
 import BaseLayout from "qqq/layouts/BaseLayout";
 import ProcessRun from "qqq/pages/processes/ProcessRun";
@@ -65,8 +65,6 @@ import Client from "qqq/utils/qqq/Client";
 import ProcessUtils from "qqq/utils/qqq/ProcessUtils";
 import TableUtils from "qqq/utils/qqq/TableUtils";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
-import React, {useContext, useEffect, useState} from "react";
-import {useLocation, useNavigate, useParams} from "react-router-dom";
 
 const qController = Client.getInstance();
 
@@ -84,10 +82,6 @@ RecordView.defaultProps =
 
 const TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT = "qqq.tableVariant";
 
-
-/*******************************************************************************
- ** Record View Screen component.
- *******************************************************************************/
 function RecordView({table, launchProcess}: Props): JSX.Element
 {
    const {id} = useParams();
@@ -123,14 +117,11 @@ function RecordView({table, launchProcess}: Props): JSX.Element
    const [launchingProcess, setLaunchingProcess] = useState(launchProcess);
    const [showEditChildForm, setShowEditChildForm] = useState(null as any);
    const [showAudit, setShowAudit] = useState(false);
-   const [showShareModal, setShowShareModal] = useState(false);
-
-   const [isDeleteSubmitting, setIsDeleteSubmitting] = useState(false);
 
    const openActionsMenu = (event: any) => setActionsMenu(event.currentTarget);
    const closeActionsMenu = () => setActionsMenu(null);
 
-   const {accentColor, setPageHeader, tableMetaData, setTableMetaData, tableProcesses, setTableProcesses, dotMenuOpen, keyboardHelpOpen, helpHelpActive, recordAnalytics, userId: currentUserId} = useContext(QContext);
+   const {accentColor, setPageHeader, tableMetaData, setTableMetaData, tableProcesses, setTableProcesses, dotMenuOpen, keyboardHelpOpen, helpHelpActive} = useContext(QContext);
 
    if (localStorage.getItem(tableVariantLocalStorageKey))
    {
@@ -157,9 +148,9 @@ function RecordView({table, launchProcess}: Props): JSX.Element
    ///////////////////////
    useEffect(() =>
    {
-      if (tableMetaData == null)
+      if(tableMetaData == null)
       {
-         (async () =>
+         (async() =>
          {
             const tableMetaData = await qController.loadTableMetaData(tableName);
             setTableMetaData(tableMetaData);
@@ -171,54 +162,54 @@ function RecordView({table, launchProcess}: Props): JSX.Element
          const type = (e.target as any).type;
          const validType = (type !== "text" && type !== "textarea" && type !== "input" && type !== "search");
 
-         if (validType && !dotMenuOpen && !keyboardHelpOpen && !showAudit && !showEditChildForm)
+         if(validType && !dotMenuOpen && !keyboardHelpOpen && !showAudit && !showEditChildForm)
          {
-            if (!e.metaKey && !e.ctrlKey && e.key === "n" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission)
+            if (! e.metaKey && e.key === "n" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission)
             {
-               e.preventDefault();
+               e.preventDefault()
                gotoCreate();
             }
-            else if (!e.metaKey && !e.ctrlKey && e.key === "e" && table.capabilities.has(Capability.TABLE_UPDATE) && table.editPermission)
+            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.ctrlKey && e.key === "c" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission)
+            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.ctrlKey && e.key === "d" && table.capabilities.has(Capability.TABLE_DELETE) && table.deletePermission)
+            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.ctrlKey && e.key === "a" && metaData && metaData.tables.has("audit"))
+            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);
-      };
-   }, [dotMenuOpen, keyboardHelpOpen, showEditChildForm, showAudit, metaData, location]);
+         document.removeEventListener("keydown", down)
+      }
+   }, [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, //
@@ -276,7 +267,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
          // if our table is in the -4 index, and there's `createChild` in the -2 index, try to open a createChild form //
          // e.g., person/42/createChild/address (to create an address under person 42)                                 //
          ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-         if (pathParts[pathParts.length - 4] === tableName && pathParts[pathParts.length - 2] == "createChild")
+         if(pathParts[pathParts.length - 4] === tableName && pathParts[pathParts.length - 2] == "createChild")
          {
             (async () =>
             {
@@ -307,7 +298,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
             }
          }
 
-         if (hashParts[0] == "#audit")
+         if(hashParts[0] == "#audit")
          {
             setShowAudit(true);
             return;
@@ -316,11 +307,11 @@ function RecordView({table, launchProcess}: Props): JSX.Element
          ///////////////////////////////////////////////////////////////////////////////////
          // look for anchor links - e.g., table section names.  return w/ no-op if found. //
          ///////////////////////////////////////////////////////////////////////////////////
-         if (tableSections)
+         if(tableSections)
          {
             for (let i = 0; i < tableSections.length; i++)
             {
-               if ("#" + tableSections[i].name === location.hash)
+               if("#" + tableSections[i].name === location.hash)
                {
                   return;
                }
@@ -354,11 +345,11 @@ function RecordView({table, launchProcess}: Props): JSX.Element
          section.fieldNames.forEach((fieldName) =>
          {
             const [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
-            if (tableForField && tableForField.name != tableMetaData.name)
+            if(tableForField && tableForField.name != tableMetaData.name)
             {
                visibleJoinTables.add(tableForField.name);
             }
-         });
+         })
       }
 
       return (visibleJoinTables);
@@ -370,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)
@@ -393,8 +384,6 @@ function RecordView({table, launchProcess}: Props): JSX.Element
          const tableMetaData = await qController.loadTableMetaData(tableName);
          setTableMetaData(tableMetaData);
 
-         recordAnalytics({location: window.location, title: "View: " + tableMetaData.label});
-
          //////////////////////////////////////////////////////////////////
          // load top-level meta-data (e.g., to find processes for table) //
          //////////////////////////////////////////////////////////////////
@@ -412,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);
 
@@ -428,7 +417,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
 
          let queryJoins: QueryJoin[] = null;
          const visibleJoinTables = getVisibleJoinTables(tableMetaData);
-         if (visibleJoinTables.size > 0)
+         if(visibleJoinTables.size > 0)
          {
             queryJoins = TableUtils.getQueryJoins(tableMetaData, visibleJoinTables);
          }
@@ -441,7 +430,6 @@ function RecordView({table, launchProcess}: Props): JSX.Element
          {
             record = await qController.get(tableName, id, tableVariant, null, queryJoins);
             setRecord(record);
-            recordAnalytics({category: "tableEvents", action: "view", label: tableMetaData?.label + " / " + record?.recordLabel});
          }
          catch (e)
          {
@@ -451,7 +439,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                {
                   HistoryUtils.ensurePathNotInHistory(location.pathname);
                }
-               catch (e)
+               catch(e)
                {
                   console.error("Error pushing history: " + e);
                }
@@ -459,13 +447,13 @@ function RecordView({table, launchProcess}: Props): JSX.Element
 
             if (e instanceof QException)
             {
-               if ((e as QException).status === 404)
+               if ((e as QException).status === "404")
                {
                   setNotFoundMessage(`${tableMetaData.label} ${id} could not be found.`);
                   historyPurge(location.pathname);
                   return;
                }
-               else if ((e as QException).status === 403)
+               else if ((e as QException).status === "403")
                {
                   setNotFoundMessage(`You do not have permission to view ${tableMetaData.label} records`);
                   historyPurge(location.pathname);
@@ -476,13 +464,13 @@ function RecordView({table, launchProcess}: Props): JSX.Element
 
          setPageHeader(record.recordLabel);
 
-         if (!launchingProcess)
+         if(!launchingProcess)
          {
             try
             {
                HistoryUtils.push({label: `${tableMetaData?.label}: ${record.recordLabel}`, path: location.pathname, iconName: table.iconName});
             }
-            catch (e)
+            catch(e)
             {
                console.error("Error pushing history: " + e);
             }
@@ -517,7 +505,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                sectionFieldElements.set(section.name,
                   <Grid id={section.name} key={section.name} item lg={widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12} xs={12} sx={{display: "flex", alignItems: "stretch", flexGrow: 1, scrollMarginTop: "100px"}}>
                      <Box width="100%" flexGrow={1} alignItems="stretch">
-                        <DashboardWidgets key={section.name} tableName={tableMetaData.name} widgetMetaDataList={[widgetMetaData]} record={record} entityPrimaryKey={record.values.get(tableMetaData.primaryKeyField)} omitWrappingGridContainer={true} />
+                        <DashboardWidgets key={section.name} tableName={tableMetaData.name} widgetMetaDataList={[widgetMetaData]} entityPrimaryKey={record.values.get(tableMetaData.primaryKeyField)} omitWrappingGridContainer={true} />
                      </Box>
                   </Grid>
                );
@@ -534,30 +522,27 @@ 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;
+                           let label = field.label;
 
-                              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 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}>
-                                    <>
-                                       {
-                                          showHelp && formattedHelpContent ? <Tooltip title={formattedHelpContent}>{labelElement}</Tooltip> : labelElement
-                                       }
-                                       <div style={{display: "inline-block", width: 0}}>&nbsp;</div>
-                                       <Typography variant="button" textTransform="none" fontWeight="regular" color="rgb(123, 128, 154)">
-                                          {ValueUtils.getDisplayValue(field, record, "view", fieldName)}
-                                       </Typography>
-                                    </>
-                                 </Box>
-                              );
-                           }
+                           return (
+                              <Box key={fieldName} flexDirection="row" pr={2}>
+                                 <>
+                                    {
+                                       showHelp && formattedHelpContent ? <Tooltip title={formattedHelpContent}>{labelElement}</Tooltip> : labelElement
+                                    }
+                                    <div style={{display: "inline-block", width: 0}}>&nbsp;</div>
+                                    <Typography variant="button" textTransform="none" fontWeight="regular" color="rgb(123, 128, 154)">
+                                       {ValueUtils.getDisplayValue(field, record, "view", fieldName)}
+                                    </Typography>
+                                 </>
+                              </Box>
+                           )
                         })
                      }
                   </Box>
@@ -605,7 +590,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
          setSectionFieldElements(sectionFieldElements);
          setNonT1TableSections(nonT1TableSections);
 
-         if (location.state)
+         if(location.state)
          {
             let state: any = location.state;
             if (state["createSuccess"] || state["updateSuccess"])
@@ -618,9 +603,9 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                setWarningMessage(state["warning"]);
             }
 
-            delete state["createSuccess"];
-            delete state["updateSuccess"];
-            delete state["warning"];
+            delete state["createSuccess"]
+            delete state["updateSuccess"]
+            delete state["warning"]
 
             window.history.replaceState(state, "");
          }
@@ -631,7 +616,6 @@ function RecordView({table, launchProcess}: Props): JSX.Element
    const handleClickDeleteButton = () =>
    {
       setDeleteConfirmationOpen(true);
-      setIsDeleteSubmitting(false);
    };
 
    const handleDeleteConfirmClose = () =>
@@ -641,27 +625,22 @@ function RecordView({table, launchProcess}: Props): JSX.Element
 
    const handleDelete = (event: { preventDefault: () => void }) =>
    {
-      setIsDeleteSubmitting(true);
       event?.preventDefault();
       (async () =>
       {
-         recordAnalytics({category: "tableEvents", action: "delete", label: tableMetaData?.label + " / " + record?.recordLabel});
-
          await qController.delete(tableName, id)
             .then(() =>
             {
-               setIsDeleteSubmitting(false);
                const path = pathParts.slice(0, -1).join("/");
                navigate(path, {state: {deleteSuccess: true}});
             })
             .catch((error) =>
             {
-               setIsDeleteSubmitting(false);
                setDeleteConfirmationOpen(false);
                console.log("Caught:");
                console.log(error);
 
-               if (error.message.toLowerCase().startsWith("warning"))
+               if(error.message.toLowerCase().startsWith("warning"))
                {
                   const path = pathParts.slice(0, -1).join("/");
                   navigate(path, {state: {deleteSuccess: true, warning: error.message}});
@@ -772,68 +751,6 @@ function RecordView({table, launchProcess}: Props): JSX.Element
       </Menu>
    );
 
-
-   /*******************************************************************************
-    ** function to open the sharing modal
-    *******************************************************************************/
-   const openShareModal = () =>
-   {
-      setShowShareModal(true);
-   };
-
-
-   /*******************************************************************************
-    ** function to close the sharing modal
-    *******************************************************************************/
-   const closeShareModal = () =>
-   {
-      setShowShareModal(false);
-   };
-
-
-   /*******************************************************************************
-    ** render the share button (if allowed for table)
-    *******************************************************************************/
-   const renderShareButton = () =>
-   {
-      if (tableMetaData && tableMetaData.shareableTableMetaData)
-      {
-         let shareDisabled = true;
-         let disabledTooltipText = "";
-         if(tableMetaData.shareableTableMetaData.thisTableOwnerIdFieldName && record)
-         {
-            const ownerId = record.values.get(tableMetaData.shareableTableMetaData.thisTableOwnerIdFieldName);
-            if(ownerId != currentUserId)
-            {
-               disabledTooltipText = `Only the owner of a ${tableMetaData.label} may share it.`
-               shareDisabled = true;
-            }
-            else
-            {
-               disabledTooltipText = "";
-               shareDisabled = false;
-            }
-         }
-         else
-         {
-            shareDisabled = false;
-         }
-
-         return (<Box width={standardWidth} mr={2}>
-            <Tooltip title={disabledTooltipText}>
-               <span>
-                  <MDButton id="shareButton" type="button" color="info" size="small" onClick={() => openShareModal()} fullWidth startIcon={<Icon>group_add</Icon>} disabled={shareDisabled}>
-                     Share
-                  </MDButton>
-               </span>
-            </Tooltip>
-         </Box>);
-      }
-
-      return (<React.Fragment />);
-   };
-
-
    const openModalProcess = (process: QProcessMetaData = null) =>
    {
       navigate(process.name);
@@ -850,7 +767,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
       //////////////////////////////////////////////////////////////////////////
       // when closing a modal process, navigate up to the record being viewed //
       //////////////////////////////////////////////////////////////////////////
-      if (location.hash)
+      if(location.hash)
       {
          navigate(location.pathname);
       }
@@ -884,7 +801,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
       /////////////////////////////////////////////////
       // navigate back up to the record being viewed //
       /////////////////////////////////////////////////
-      if (location.hash)
+      if(location.hash)
       {
          navigate(location.pathname);
       }
@@ -911,7 +828,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
       /////////////////////////////////////////////////
       // navigate back up to the record being viewed //
       /////////////////////////////////////////////////
-      if (location.hash)
+      if(location.hash)
       {
          navigate(location.pathname);
       }
@@ -925,7 +842,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
 
    return (
       <BaseLayout>
-         <Box className="recordView">
+         <Box>
             <Grid container>
                <Grid item xs={12}>
                   <Box mb={3}>
@@ -947,7 +864,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);
                                     }}>
@@ -989,7 +906,6 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                                                    </Typography>
                                                    <Box display="flex">
                                                       <GotoRecordButton metaData={metaData} tableMetaData={tableMetaData} />
-                                                      {renderShareButton()}
                                                       <QActionsMenuButton isOpen={actionsMenu} onClickHandler={openActionsMenu} />
                                                    </Box>
                                                    {renderActionsMenu}
@@ -1038,7 +954,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                                  </DialogContent>
                                  <DialogActions>
                                     <Button onClick={handleDeleteConfirmClose}>No</Button>
-                                    <Button onClick={handleDelete} autoFocus disabled={isDeleteSubmitting}>
+                                    <Button onClick={handleDelete} autoFocus>
                                        Yes
                                     </Button>
                                  </DialogActions>
@@ -1086,11 +1002,6 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                                  </Modal>
                               }
 
-                              {
-                                 showShareModal && tableMetaData && record &&
-                                 <ShareModal open={showShareModal} onClose={closeShareModal} tableMetaData={tableMetaData} record={record}></ShareModal>
-                              }
-
                            </Box>
                      }
                   </Box>

src/qqq/styles/qqq-override-styles.css

@@ -158,7 +158,6 @@ but we've turned off the click-to-sort function, so remove hand cursor */
    white-space: normal;
    height: auto;
 }
-
 .MuiDataGrid-filterForm
 {
    align-items: flex-end;
@@ -174,12 +173,10 @@ but we've turned off the click-to-sort function, so remove hand cursor */
 {
    width: 200px;
 }
-
 .MuiDataGrid-filterForm .MuiDataGrid-filterFormValueInput
 {
    width: 300px;
 }
-
 .MuiDataGrid-filterForm .MuiDataGrid-filterFormOperatorInput
 {
    width: 150px;
@@ -190,14 +187,13 @@ but we've turned off the click-to-sort function, so remove hand cursor */
 {
    padding-top: 4px;
 }
-
 .MuiDataGrid-filterForm .MuiDataGrid-filterFormValueInput .MuiAutocomplete-root .MuiAutocomplete-endAdornment svg
 {
    height: 0.625em;
 }
 
 /* fix strange size bug on filter autocompletes */
-.MuiDataGrid-filterForm .MuiDataGrid-filterFormValueInput > .MuiBox-root > .MuiBox-root:has(>.MuiAutocomplete-root)
+.MuiDataGrid-filterForm .MuiDataGrid-filterFormValueInput>.MuiBox-root>.MuiBox-root:has(>.MuiAutocomplete-root)
 {
    margin-bottom: 0;
    width: 100%;
@@ -212,31 +208,16 @@ but we've turned off the click-to-sort function, so remove hand cursor */
 }
 
 /* clears the ‘X’ from Internet Explorer */
-input[type=search]::-ms-clear
-{
-   display: none;
-   width: 0;
-   height: 0;
-}
-
-input[type=search]::-ms-reveal
-{
-   display: none;
-   width: 0;
-   height: 0;
-}
-
+input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
+input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
 /* clears the ‘X’ from Chrome */
 input[type="search"]::-webkit-search-decoration,
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration
-{
-   display: none;
-}
+input[type="search"]::-webkit-search-results-decoration { display: none; }
 
 /* Shrink the big margin-bottom on modal processes */
-.modalProcess > .MuiBox-root > .MuiBox-root
+.modalProcess>.MuiBox-root>.MuiBox-root
 {
    margin-bottom: 24px;
 }
@@ -289,7 +270,6 @@ input[type="search"]::-webkit-search-results-decoration
    color: initial !important;
    border: 1px solid rgb(206, 212, 218);
 }
-
 .MuiDataGrid-filterForm .MuiAutocomplete-tag .MuiSvgIcon-root
 {
    color: initial !important;
@@ -307,7 +287,7 @@ input[type="search"]::-webkit-search-results-decoration
    right: 0.125rem;
 }
 
-.devDocumentation ul > li
+.devDocumentation ul>li
 {
    margin-left: 30px;
 }
@@ -660,7 +640,6 @@ input[type="search"]::-webkit-search-results-decoration
    border: 1px solid #BDBDBD;
    border-radius: 0.5rem !important;
 }
-
 .MuiToggleButtonGroup-root .MuiButtonBase-root
 {
    text-transform: none;
@@ -671,25 +650,11 @@ input[type="search"]::-webkit-search-results-decoration
    border: none;
    flex: 1 1 0px;
 }
-
 .MuiToggleButtonGroup-root .MuiButtonBase-root.Mui-selected
 {
    background: rgba(117, 117, 117, 0.20);
 }
-
 .MuiToggleButtonGroup-root .MuiButtonBase-root.Mui-disabled
 {
    border: none;
 }
-
-.entityForm h5,
-.recordView h5
-{
-   font-weight: 500;
-}
-
-.MuiPickersDay-root.Mui-selected, .MuiPickersDay-root.MuiPickersDay-dayWithMargin:hover
-{
-   color: white;
-   background-color: #0062FF !important;
-}

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,10 +159,7 @@ export default class DataGridUtils
                /////////////////////////////////////////////////////////////////////////////////////////
                // DataGrid gets very upset about a null or undefined here, so, try to make it happier //
                /////////////////////////////////////////////////////////////////////////////////////////
-               if(!allowEmptyId)
-               {
-                  row["id"] = "--";
-               }
+               row["id"] = "--";
             }
          }
 
@@ -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/GoogleAnalyticsUtils.ts

@@ -1,143 +0,0 @@
-/*
- * 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 {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
-import Client from "qqq/utils/qqq/Client";
-import ReactGA from "react-ga4";
-
-
-export interface PageView
-{
-   location: Location;
-   title: string;
-}
-
-export interface UserEvent
-{
-   action: string;
-   category: string;
-   label?: string;
-}
-
-export type AnalyticsModel = PageView | UserEvent;
-
-const qController = Client.getInstance();
-
-/*******************************************************************************
- ** Utilities for working with Google Analytics (through react-ga4)^
- *******************************************************************************/
-export default class GoogleAnalyticsUtils
-{
-   private metaData: QInstance = null;
-   private active: boolean = false;
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   constructor()
-   {
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   private send = (model: AnalyticsModel) =>
-   {
-      if(!this.active)
-      {
-         return;
-      }
-
-      if(model.hasOwnProperty("location"))
-      {
-         const pageView = model as PageView;
-         ReactGA.send({hitType: "pageview", page: pageView.location.pathname + pageView.location.search, title: pageView.title});
-      }
-      else if(model.hasOwnProperty("action") || model.hasOwnProperty("category") || model.hasOwnProperty("label"))
-      {
-         const userEvent = model as UserEvent;
-         ReactGA.event({action: userEvent.action, category: userEvent.category, label: userEvent.label})
-      }
-      else
-      {
-         console.log("Unrecognizable analytics model", model);
-      }
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   private setup = async (): Promise<void> =>
-   {
-      this.metaData = await qController.loadMetaData();
-
-      let sessionValues: {[key: string]: any} = null;
-      try
-      {
-         sessionValues = JSON.parse(localStorage.getItem("sessionValues"));
-      }
-      catch(e)
-      {
-         console.log("Error reading session values from localStorage: " + e);
-      }
-
-      if (this.metaData.environmentValues.get("GOOGLE_ANALYTICS_ENABLED") == "true" && this.metaData.environmentValues.get("GOOGLE_ANALYTICS_TRACKING_ID"))
-      {
-         this.active = true;
-
-         if(sessionValues && sessionValues["googleAnalyticsValues"])
-         {
-            ReactGA.gtag("set", "user_properties", sessionValues["googleAnalyticsValues"]);
-         }
-
-         ReactGA.initialize(this.metaData.environmentValues.get("GOOGLE_ANALYTICS_TRACKING_ID"),
-            {
-               gaOptions: {},
-               gtagOptions: {}
-            });
-      }
-      else
-      {
-         this.active = false;
-      }
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public recordAnalytics = (model: AnalyticsModel) =>
-   {
-      if(this.metaData == null)
-      {
-         (async () =>
-         {
-            await this.setup();
-         })()
-      }
-
-      this.send(model);
-   }
-
-}

src/qqq/utils/qqq/Client.ts

@@ -35,7 +35,7 @@ class Client
    {
       console.log(`Caught Exception: ${JSON.stringify(exception)}`);
 
-      if (exception && exception.status == 401 && Client.unauthorizedCallback)
+      if(exception && exception.status == "401" && Client.unauthorizedCallback)
       {
          console.log("This is a 401 - calling the unauthorized callback.");
          Client.unauthorizedCallback();

src/qqq/utils/qqq/FilterUtils.tsx

@@ -32,7 +32,6 @@ import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryF
 import {ThisOrLastPeriodExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/ThisOrLastPeriodExpression";
 import Box from "@mui/material/Box";
 import {GridSortModel} from "@mui/x-data-grid-pro";
-import {validateCriteria} from "qqq/components/query/FilterCriteriaRow";
 import TableUtils from "qqq/utils/qqq/TableUtils";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
 
@@ -65,6 +64,7 @@ class FilterUtils
       let rs = [];
       for (let i = 0; i < param.length; i++)
       {
+         console.log(param[i]);
          if (param[i] && param[i].id && param[i].label)
          {
             /////////////////////////////////////////////////////////////
@@ -115,11 +115,8 @@ class FilterUtils
             // e.g., ...values=[1]...                                                       //
             // but we need them to be possibleValue objects (w/ id & label) so the label    //
             // can be shown in the filter dropdown.  So, make backend call to look them up. //
-            // also, there are cases where we can get a null or "" as the only value in the //
-            // values array - avoid sending that to the backend, as it comes back w/ all    //
-            // possible values, and a general "bad time"                                    //
             //////////////////////////////////////////////////////////////////////////////////
-            if (values && values.length > 0 && values[0] !== null && values[0] !== undefined && values[0] !== "")
+            if (values && values.length > 0)
             {
                values = await qController.possibleValues(fieldTable.name, null, field.name, "", values);
             }
@@ -160,14 +157,6 @@ 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]);
-      }
    }
 
 
@@ -272,45 +261,39 @@ class FilterUtils
    /*******************************************************************************
     **
     *******************************************************************************/
-   public static canFilterWorkAsBasic(tableMetaData: QTableMetaData, filter: QQueryFilter): { canFilterWorkAsBasic: boolean; canFilterWorkAsAdvanced: boolean, reasonsWhyItCannot?: string[] }
+   public static canFilterWorkAsBasic(tableMetaData: QTableMetaData, filter: QQueryFilter): { canFilterWorkAsBasic: boolean; reasonsWhyItCannot?: string[] }
    {
       const reasonsWhyItCannot: string[] = [];
 
-      if (filter == null)
+      if(filter == null)
       {
-         return ({canFilterWorkAsBasic: true, canFilterWorkAsAdvanced: true});
+         return ({canFilterWorkAsBasic: true});
       }
 
-      if (filter.booleanOperator == "OR")
+      if(filter.booleanOperator == "OR")
       {
-         reasonsWhyItCannot.push("Filter uses the 'OR' operator.");
+         reasonsWhyItCannot.push("Filter uses the 'OR' operator.")
       }
 
-      if (filter.subFilters?.length > 0)
+      if(filter.criteria)
       {
-         reasonsWhyItCannot.push("Filter contains sub-filters.");
-         return ({canFilterWorkAsBasic: false, canFilterWorkAsAdvanced: false, reasonsWhyItCannot: reasonsWhyItCannot});
-      }
-
-      if (filter.criteria)
-      {
-         const usedFields: { [name: string]: boolean } = {};
-         const warnedFields: { [name: string]: boolean } = {};
+         const usedFields: {[name: string]: boolean} = {};
+         const warnedFields: {[name: string]: boolean} = {};
          for (let i = 0; i < filter.criteria.length; i++)
          {
             const criteriaName = filter.criteria[i].fieldName;
-            if (!criteriaName)
+            if(!criteriaName)
             {
                continue;
             }
 
-            if (usedFields[criteriaName])
+            if(usedFields[criteriaName])
             {
-               if (!warnedFields[criteriaName])
+               if(!warnedFields[criteriaName])
                {
                   const [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, criteriaName);
                   let fieldLabel = field.label;
-                  if (tableForField.name != tableMetaData.name)
+                  if(tableForField.name != tableMetaData.name)
                   {
                      let fieldLabel = `${tableForField.label}: ${field.label}`;
                   }
@@ -322,13 +305,13 @@ class FilterUtils
          }
       }
 
-      if (reasonsWhyItCannot.length == 0)
+      if(reasonsWhyItCannot.length == 0)
       {
-         return ({canFilterWorkAsBasic: true, canFilterWorkAsAdvanced: true});
+         return ({canFilterWorkAsBasic: true});
       }
       else
       {
-         return ({canFilterWorkAsBasic: false, canFilterWorkAsAdvanced: true, reasonsWhyItCannot: reasonsWhyItCannot});
+         return ({canFilterWorkAsBasic: false, reasonsWhyItCannot: reasonsWhyItCannot});
       }
    }
 
@@ -336,11 +319,11 @@ class FilterUtils
     ** get the values associated with a criteria as a string, e.g., for showing
     ** in a tooltip.
     *******************************************************************************/
-   public static getValuesString(fieldMetaData: QFieldMetaData, criteria: QFilterCriteria, maxValuesToShow: number = 3, andMoreFormat: "andNOther" | "+N" = "andNOther"): string
+   public static getValuesString(fieldMetaData: QFieldMetaData, criteria: QFilterCriteria, maxValuesToShow: number = 3): string
    {
       let valuesString = "";
 
-      if (criteria.operator == QCriteriaOperator.IS_BLANK || criteria.operator == QCriteriaOperator.IS_NOT_BLANK)
+      if(criteria.operator == QCriteriaOperator.IS_BLANK || criteria.operator == QCriteriaOperator.IS_NOT_BLANK)
       {
          ///////////////////////////////////////////////
          // we don't want values for these operators. //
@@ -357,10 +340,6 @@ class FilterUtils
          {
             maxLoops = maxValuesToShow;
          }
-         else if (maxValuesToShow == 1 && criteria.values.length > 1)
-         {
-            maxLoops = 1;
-         }
 
          for (let i = 0; i < maxLoops; i++)
          {
@@ -378,22 +357,17 @@ class FilterUtils
             else if (value.type == "ThisOrLastPeriod")
             {
                const expression = new ThisOrLastPeriodExpression(value);
-               let startOfPrefix = "";
-               if (fieldMetaData.type == QFieldType.DATE_TIME || expression.timeUnit != "DAYS")
-               {
-                  startOfPrefix = "start of ";
-               }
-               labels.push(`${startOfPrefix}${expression.toString()}`);
+               labels.push(expression.toString());
             }
-            else if (fieldMetaData.type == QFieldType.BOOLEAN)
+            else if(fieldMetaData.type == QFieldType.BOOLEAN)
             {
-               labels.push(value == true ? "yes" : "no");
+               labels.push(value == true ? "yes" : "no")
             }
-            else if (fieldMetaData.type == QFieldType.DATE_TIME)
+            else if(fieldMetaData.type == QFieldType.DATE_TIME)
             {
                labels.push(ValueUtils.formatDateTime(value));
             }
-            else if (fieldMetaData.type == QFieldType.DATE)
+            else if(fieldMetaData.type == QFieldType.DATE)
             {
                labels.push(ValueUtils.formatDate(value));
             }
@@ -409,16 +383,7 @@ class FilterUtils
 
          if (maxLoops < criteria.values.length)
          {
-            const n = criteria.values.length - maxLoops;
-            switch (andMoreFormat)
-            {
-               case "andNOther":
-                  labels.push(` and ${n} other value${n == 1 ? "" : "s"}.`);
-                  break;
-               case "+N":
-                  labels[labels.length - 1] += ` +${n}`;
-                  break;
-            }
+            labels.push(" and " + (criteria.values.length - maxLoops) + " other values.");
          }
 
          valuesString = (labels.join(", "));
@@ -465,7 +430,7 @@ class FilterUtils
       for (let i = 0; i < queryFilter?.orderBys?.length; i++)
       {
          const orderBy = queryFilter.orderBys[i];
-         gridSortModel.push({field: orderBy.fieldName, sort: orderBy.isAscending ? "asc" : "desc"});
+         gridSortModel.push({field: orderBy.fieldName, sort: orderBy.isAscending ? "asc" : "desc"})
       }
       return (gridSortModel);
    }
@@ -476,7 +441,7 @@ class FilterUtils
     *******************************************************************************/
    public static operatorToHumanString(criteria: QFilterCriteria, field: QFieldMetaData): string
    {
-      if (criteria == null || criteria.operator == null)
+      if(criteria == null || criteria.operator == null)
       {
          return (null);
       }
@@ -486,7 +451,7 @@ class FilterUtils
 
       try
       {
-         switch (criteria.operator)
+         switch(criteria.operator)
          {
             case QCriteriaOperator.EQUALS:
                return ("equals");
@@ -510,35 +475,35 @@ class FilterUtils
             case QCriteriaOperator.NOT_CONTAINS:
                return ("does not contain");
             case QCriteriaOperator.LESS_THAN:
-               if (isDate || isDateTime)
+               if(isDate || isDateTime)
                {
-                  return ("is before");
+                  return ("is before")
                }
                return ("less than");
             case QCriteriaOperator.LESS_THAN_OR_EQUALS:
-               if (isDate)
+               if(isDate)
                {
-                  return ("is on or before");
+                  return ("is on or before")
                }
-               if (isDateTime)
+               if(isDateTime)
                {
-                  return ("is at or before");
+                  return ("is at or before")
                }
                return ("less than or equals");
             case QCriteriaOperator.GREATER_THAN:
-               if (isDate || isDateTime)
+               if(isDate || isDateTime)
                {
-                  return ("is after");
+                  return ("is after")
                }
                return ("greater than or equals");
             case QCriteriaOperator.GREATER_THAN_OR_EQUALS:
-               if (isDate)
+               if(isDate)
                {
-                  return ("is on or after");
+                  return ("is on or after")
                }
-               if (isDateTime)
+               if(isDateTime)
                {
-                  return ("is at or after");
+                  return ("is at or after")
                }
                return ("greater than or equals");
             case QCriteriaOperator.IS_BLANK:
@@ -551,10 +516,10 @@ class FilterUtils
                return ("is not between");
          }
       }
-      catch (e)
+      catch(e)
       {
          console.log(`Error getting operator human string for ${JSON.stringify(criteria)}: ${e}`);
-         return criteria?.operator;
+         return criteria?.operator
       }
    }
 
@@ -564,7 +529,7 @@ class FilterUtils
     *******************************************************************************/
    public static criteriaToHumanString(table: QTableMetaData, criteria: QFilterCriteria, styled = false): string | JSX.Element
    {
-      if (criteria == null)
+      if(criteria == null)
       {
          return (null);
       }
@@ -573,7 +538,7 @@ class FilterUtils
       const fieldLabel = TableUtils.getFieldFullLabel(table, criteria.fieldName);
       const valuesString = FilterUtils.getValuesString(field, criteria);
 
-      if (styled)
+      if(styled)
       {
          return (
             <Box display="inline" whiteSpace="nowrap" color="#FFFFFF" mb={"0.5rem"}>
@@ -582,7 +547,7 @@ class FilterUtils
                {valuesString && <Box display="inline" p="0.125rem" pr="0.5rem" sx={{background: "#009971"}} borderRadius="0 0.5rem 0.5rem 0"> {valuesString}</Box>}
                &nbsp;
             </Box>
-         );
+         )
       }
       else
       {
@@ -590,81 +555,6 @@ 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--;
-            }
-         }
-      }
-   }
-
-
-   /*******************************************************************************
-    ** make a new query filter, based on the input one, but w/ values good for the
-    ** backend.  such as, possible values as just ids, not objects w/ a label;
-    ** date-times formatted properly and in UTC
-    *******************************************************************************/
-   public static prepQueryFilterForBackend(tableMetaData: QTableMetaData, sourceFilter: QQueryFilter, pageNumber?: number, rowsPerPage?: number): QQueryFilter
-   {
-      const filterForBackend = new QQueryFilter([], sourceFilter.orderBys, sourceFilter.subFilters, sourceFilter.booleanOperator);
-      for (let i = 0; i < sourceFilter?.criteria?.length; i++)
-      {
-         const criteria = sourceFilter.criteria[i];
-         const {criteriaIsValid} = validateCriteria(criteria, null);
-         if (criteriaIsValid)
-         {
-            if (criteria.operator == QCriteriaOperator.IS_BLANK || criteria.operator == QCriteriaOperator.IS_NOT_BLANK)
-            {
-               ///////////////////////////////////////////////////////////////////////////////////////////
-               // do this to avoid submitting an empty-string argument for blank/not-blank operators... //
-               ///////////////////////////////////////////////////////////////////////////////////////////
-               filterForBackend.criteria.push(new QFilterCriteria(criteria.fieldName, criteria.operator, []));
-            }
-            else
-            {
-               ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
-               // else push a clone of the criteria - since it may get manipulated below (convertFilterPossibleValuesToIds) //
-               ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
-               const [field] = FilterUtils.getField(tableMetaData, criteria.fieldName);
-               filterForBackend.criteria.push(new QFilterCriteria(criteria.fieldName, criteria.operator, FilterUtils.cleanseCriteriaValueForQQQ(criteria.values, field)));
-            }
-         }
-      }
-
-      /////////////////////////////////////////
-      // recursively prep subfilters as well //
-      /////////////////////////////////////////
-      let subFilters = [] as QQueryFilter[];
-      for (let j = 0; j < sourceFilter?.subFilters?.length; j++)
-      {
-         subFilters.push(FilterUtils.prepQueryFilterForBackend(tableMetaData, sourceFilter.subFilters[j]));
-      }
-
-      filterForBackend.subFilters = subFilters;
-
-      if(pageNumber !== undefined && rowsPerPage !== undefined)
-      {
-         filterForBackend.skip = pageNumber * rowsPerPage;
-         filterForBackend.limit = rowsPerPage;
-      }
-
-      return filterForBackend;
-   };
 }
 
 export default FilterUtils;

src/qqq/utils/qqq/TableUtils.ts

@@ -30,101 +30,61 @@ 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 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)
+         if (allowedKeys)
          {
-            ////////////////////////////////////////////////////////////////
-            // put the field names in a set, for better inclusion testing //
-            ////////////////////////////////////////////////////////////////
-            const allowedFieldNameSet = new Set<string>();
-            if(allowedFieldNames)
-            {
-               allowedFieldNames.forEach((k: string) => allowedFieldNameSet.add(k));
-            }
+            const allowedKeySet = new Set<string>();
+            allowedKeys.forEach((k: string) => allowedKeySet.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;
-
-               for (let j = 0; j < section.fieldNames?.length; j++)
+               if (section.fieldNames)
                {
-                  if (allowedFieldNameSet.has(section.fieldNames[j]))
+                  for (let j = 0; j < section.fieldNames.length; j++)
                   {
-                     includeSection = true;
-                     break;
+                     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);
          }
-
-         ////////////////////////////////////////////////////////////////
-         // if there are no filters to apply, then return all sections //
-         ////////////////////////////////////////////////////////////////
-         return (tableMetaData.sections);
-      }
-
-      ///////////////////////////////////////////////////////////////////////////////////////////////
-      // 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)
-      {
-         fieldNames = [];
-         for (const fieldName in tableMetaData.fields.keys())
+         else
          {
-            if (allowedFieldNames[fieldName])
-            {
-               fieldNames.push(fieldName);
-            }
+            return (tableMetaData.sections);
          }
       }
-
-      return ([new QTableSection({
-         iconName: "description", label: "All Fields", name: "allFields", fieldNames: [...fieldNames],
-      })]);
+      else
+      {
+         let fieldNames = [...tableMetaData.fields.keys()];
+         if (allowedKeys)
+         {
+            fieldNames = [];
+            for (const fieldName in tableMetaData.fields.keys())
+            {
+               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, null];
+      return (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
       }
    }
 

src/qqq/utils/qqq/ValueUtils.tsx

@@ -219,16 +219,6 @@ class ValueUtils
 
       if (field.type === QFieldType.DATE_TIME)
       {
-         if(displayValue && displayValue != rawValue)
-         {
-            //////////////////////////////////////////////////////////////////////////////
-            // if the date-time actually has a displayValue set, and it isn't just the  //
-            // raw-value being copied into the display value by whoever called us, then //
-            // return the display value.                                                //
-            //////////////////////////////////////////////////////////////////////////////
-            return displayValue;
-         }
-
          if (!rawValue)
          {
             return ("");
@@ -280,7 +270,6 @@ class ValueUtils
       {
          date = new Date(date);
       }
-
       // @ts-ignore
       return (`${date.toString("yyyy-MM-dd hh:mm:ss")} ${date.getHours() < 12 ? "AM" : "PM"} ${date.getTimezone()}`);
    }

src/setupProxy.js

@@ -47,8 +47,6 @@ module.exports = function (app)
    app.use("/download/*", getRequestHandler());
    app.use("/metaData/*", getRequestHandler());
    app.use("/data/*", getRequestHandler());
-   app.use("/possibleValues/*", getRequestHandler());
-   app.use("/possibleValues", getRequestHandler());
    app.use("/widget/*", getRequestHandler());
    app.use("/serverInfo", getRequestHandler());
    app.use("/manageSession", getRequestHandler());

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/junit/TestUtils.java

@@ -29,7 +29,6 @@ import com.kingsrook.qqq.backend.core.model.metadata.authentication.QAuthenticat
 import com.kingsrook.qqq.backend.core.model.metadata.fields.QFieldMetaData;
 import com.kingsrook.qqq.backend.core.model.metadata.fields.QFieldType;
 import com.kingsrook.qqq.backend.core.model.metadata.tables.QTableMetaData;
-import com.kingsrook.qqq.backend.core.modules.backend.implementations.memory.MemoryBackendModule;
 
 
 /*******************************************************************************
@@ -76,7 +75,7 @@ public class TestUtils
    {
       return (new QBackendMetaData()
          .withName(DEFAULT_BACKEND_NAME)
-         .withBackendType(MemoryBackendModule.class));
+         .withBackendType("memory"));
    }
 
 

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/lib/QSeleniumLib.java

@@ -29,7 +29,6 @@ import java.util.Objects;
 import java.util.Set;
 import java.util.concurrent.CompletableFuture;
 import java.util.concurrent.TimeUnit;
-import java.util.function.Function;
 import com.kingsrook.qqq.backend.core.utils.SleepUtils;
 import org.apache.commons.io.FileUtils;
 import org.apache.logging.log4j.LogManager;
@@ -505,33 +504,7 @@ public class QSeleniumLib
     *******************************************************************************/
    public WebElement waitForSelectorContaining(String cssSelector, String textContains)
    {
-      return (waitForSelectorMatchingPredicate(cssSelector, "containing text [" + textContains + "]", (WebElement element) ->
-      {
-         return (element.getText() != null && element.getText().toLowerCase().contains(textContains.toLowerCase()));
-      }));
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public WebElement waitForSelectorContainingTextMatchingRegex(String cssSelector, String regExp)
-   {
-      return (waitForSelectorMatchingPredicate(cssSelector, "matching regexp [" + regExp + "]", (WebElement element) ->
-      {
-         return (element.getText() != null && element.getText().matches(regExp));
-      }));
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   private WebElement waitForSelectorMatchingPredicate(String cssSelector, String description, Function<WebElement, Boolean> predicate)
-   {
-      LOG.debug("Waiting for element matching selector [" + cssSelector + "] " + description);
+      LOG.debug("Waiting for element matching selector [" + cssSelector + "] containing text [" + textContains + "].");
       long start = System.currentTimeMillis();
 
       do
@@ -541,9 +514,9 @@ public class QSeleniumLib
          {
             try
             {
-               if(predicate.apply(element))
+               if(element.getText() != null && element.getText().toLowerCase().contains(textContains.toLowerCase()))
                {
-                  LOG.debug("Found element matching selector [" + cssSelector + "] " + description);
+                  LOG.debug("Found element matching selector [" + cssSelector + "] containing text [" + textContains + "].");
                   Actions actions = new Actions(driver);
                   actions.moveToElement(element);
                   conditionallyAutoHighlight(element);
@@ -564,7 +537,7 @@ public class QSeleniumLib
       }
       while(start + (1000 * WAIT_SECONDS) > System.currentTimeMillis());
 
-      fail("Failed to find element matching selector [" + cssSelector + "] " + description + " after [" + WAIT_SECONDS + "] seconds.");
+      fail("Failed to find element matching selector [" + cssSelector + "] containing text [" + textContains + "] after [" + WAIT_SECONDS + "] seconds.");
       return (null);
    }
 

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/lib/QueryScreenLib.java

@@ -22,9 +22,6 @@
 package com.kingsrook.qqq.frontend.materialdashboard.selenium.lib;
 
 
-import java.util.List;
-import com.kingsrook.qqq.backend.core.utils.CollectionUtils;
-import com.kingsrook.qqq.backend.core.utils.StringUtils;
 import org.openqa.selenium.By;
 import org.openqa.selenium.Keys;
 import org.openqa.selenium.WebElement;
@@ -106,7 +103,7 @@ public class QueryScreenLib
    /*******************************************************************************
     **
     *******************************************************************************/
-   public void clickFilterBuilderButton()
+   public void clickFilterButton()
    {
       qSeleniumLib.waitForSelectorContaining("BUTTON", "FILTER BUILDER").click();
    }
@@ -184,11 +181,10 @@ public class QueryScreenLib
    }
 
 
-
    /*******************************************************************************
     **
     *******************************************************************************/
-   public void addAdvancedQueryFilterInput(int index, String fieldLabel, String operator, String value, String booleanOperator)
+   public void addAdvancedQueryFilterInput(QSeleniumLib qSeleniumLib, int index, String fieldLabel, String operator, String value, String booleanOperator)
    {
       if(index > 0)
       {
@@ -225,91 +221,10 @@ public class QueryScreenLib
       operatorInput.sendKeys("\n");
       qSeleniumLib.waitForMillis(100);
 
-      if(StringUtils.hasContent(value))
-      {
-         WebElement valueInput = subFormForField.findElement(By.cssSelector(".filterValuesColumn INPUT"));
-         valueInput.click();
-         valueInput.sendKeys(value);
-         qSeleniumLib.waitForMillis(100);
-      }
+      WebElement valueInput = subFormForField.findElement(By.cssSelector(".filterValuesColumn INPUT"));
+      valueInput.click();
+      valueInput.sendKeys(value);
+      qSeleniumLib.waitForMillis(100);
    }
 
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public void addBasicFilter(String fieldLabel)
-   {
-      qSeleniumLib.waitForSelectorContaining("BUTTON", "Add Filter").click();
-      qSeleniumLib.waitForSelectorContaining(".fieldListMenuBody-addQuickFilter LI", fieldLabel).click();
-      qSeleniumLib.clickBackdrop();
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public void setBasicFilter(String fieldLabel, String operatorLabel, String value)
-   {
-      qSeleniumLib.waitForSelectorContaining("BUTTON", fieldLabel).click();
-      qSeleniumLib.waitForMillis(250);
-      qSeleniumLib.waitForSelector("#criteriaOperator").click();
-      qSeleniumLib.waitForSelectorContaining("LI", operatorLabel).click();
-
-      if(StringUtils.hasContent(value))
-      {
-         qSeleniumLib.waitForSelector(".filterValuesColumn INPUT").click();
-         // todo - no, not in a listbox/LI here...
-         qSeleniumLib.waitForSelectorContaining(".MuiAutocomplete-listbox LI", value).click();
-         System.out.println(value);
-      }
-
-      qSeleniumLib.clickBackdrop();
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public void setBasicFilterPossibleValues(String fieldLabel, String operatorLabel, List<String> values)
-   {
-      qSeleniumLib.waitForSelectorContaining("BUTTON", fieldLabel).click();
-      qSeleniumLib.waitForMillis(250);
-      qSeleniumLib.waitForSelector("#criteriaOperator").click();
-      qSeleniumLib.waitForSelectorContaining("LI", operatorLabel).click();
-
-      if(CollectionUtils.nullSafeHasContents(values))
-      {
-         qSeleniumLib.waitForSelector(".filterValuesColumn INPUT").click();
-         for(String value : values)
-         {
-            qSeleniumLib.waitForSelectorContaining(".MuiAutocomplete-listbox LI", value).click();
-         }
-      }
-
-      qSeleniumLib.clickBackdrop();
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public void waitForAdvancedQueryStringMatchingRegex(String regEx)
-   {
-      qSeleniumLib.waitForSelectorContainingTextMatchingRegex(".advancedQueryString", regEx);
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public void waitForBasicFilterButtonMatchingRegex(String regEx)
-   {
-      qSeleniumLib.waitForSelectorContainingTextMatchingRegex("BUTTON", regEx);
-   }
 }

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/lib/javalin/QSeleniumJavalin.java

@@ -27,7 +27,6 @@ import java.util.Collections;
 import java.util.LinkedHashMap;
 import java.util.List;
 import java.util.Map;
-import java.util.stream.Collectors;
 import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QSeleniumLib;
 import io.javalin.Javalin;
 import org.apache.logging.log4j.LogManager;
@@ -285,6 +284,7 @@ public class QSeleniumJavalin
 
       do
       {
+         // LOG.debug("  captured paths: " + captured.stream().map(CapturedContext::getPath).collect(Collectors.joining(",")));
          for(CapturedContext context : captured)
          {
             if(context.getPath().equals(path))
@@ -301,7 +301,6 @@ public class QSeleniumJavalin
       }
       while(start + (1000 * WAIT_SECONDS) > System.currentTimeMillis());
 
-      LOG.debug("  captured paths: \n   " + captured.stream().map(cc -> cc.getPath() + "[" + cc.getBody() + "]").collect(Collectors.joining("\n   ")));
       fail("Failed to capture a request for path [" + path + "] with body containing [" + bodyContaining + "] after [" + WAIT_SECONDS + "] seconds.");
       return (null);
    }

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/query/QueryScreenFilterInUrlAdvancedModeTest.java

@@ -82,7 +82,7 @@ public class QueryScreenFilterInUrlAdvancedModeTest extends QBaseSeleniumTest
       qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
       queryScreenLib.waitForQueryToHaveRan();
       queryScreenLib.assertFilterButtonBadge(1);
-      queryScreenLib.clickFilterBuilderButton();
+      queryScreenLib.clickFilterButton();
       qSeleniumLib.waitForSelector("input[value=\"is not empty\"]");
 
       ///////////////////////////////
@@ -93,7 +93,7 @@ public class QueryScreenFilterInUrlAdvancedModeTest extends QBaseSeleniumTest
       qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
       queryScreenLib.waitForQueryToHaveRan();
       queryScreenLib.assertFilterButtonBadge(1);
-      queryScreenLib.clickFilterBuilderButton();
+      queryScreenLib.clickFilterButton();
       qSeleniumLib.waitForSelector("input[value=\"is between\"]");
       qSeleniumLib.waitForSelector("input[value=\"1701\"]");
       qSeleniumLib.waitForSelector("input[value=\"74656\"]");
@@ -116,7 +116,7 @@ public class QueryScreenFilterInUrlAdvancedModeTest extends QBaseSeleniumTest
       qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
       queryScreenLib.waitForQueryToHaveRan();
       queryScreenLib.assertFilterButtonBadge(1);
-      queryScreenLib.clickFilterBuilderButton();
+      queryScreenLib.clickFilterButton();
       qSeleniumLib.waitForSelector("input[value=\"is any of\"]");
       qSeleniumLib.waitForSelectorContaining(".MuiChip-label", "St. Louis");
       qSeleniumLib.waitForSelectorContaining(".MuiChip-label", "Chesterfield");
@@ -129,7 +129,7 @@ public class QueryScreenFilterInUrlAdvancedModeTest extends QBaseSeleniumTest
       qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
       queryScreenLib.waitForQueryToHaveRan();
       queryScreenLib.assertFilterButtonBadge(1);
-      queryScreenLib.clickFilterBuilderButton();
+      queryScreenLib.clickFilterButton();
       qSeleniumLib.waitForSelector("input[value=\"is after\"]");
       qSeleniumLib.waitForSelector("input[value=\"5 days ago\"]");
 
@@ -142,7 +142,7 @@ public class QueryScreenFilterInUrlAdvancedModeTest extends QBaseSeleniumTest
       qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
       queryScreenLib.waitForQueryToHaveRan();
       queryScreenLib.assertFilterButtonBadge(2);
-      queryScreenLib.clickFilterBuilderButton();
+      queryScreenLib.clickFilterButton();
       qSeleniumLib.waitForSelector("input[value=\"is at or before\"]");
       qSeleniumLib.waitForSelector("input[value=\"start of this year\"]");
       qSeleniumLib.waitForSelector("input[value=\"starts with\"]");
@@ -165,7 +165,7 @@ public class QueryScreenFilterInUrlAdvancedModeTest extends QBaseSeleniumTest
       qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
       queryScreenLib.waitForQueryToHaveRan();
       queryScreenLib.assertFilterButtonBadge(1);
-      queryScreenLib.clickFilterBuilderButton();
+      queryScreenLib.clickFilterButton();
       qSeleniumLib.waitForSelector("input[value=\"does not equal\"]");
       qSeleniumLib.waitForSelector("input[value=\"St. Louis\"]");
 

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/query/QueryScreenTest.java

@@ -22,7 +22,6 @@
 package com.kingsrook.qqq.frontend.materialdashboard.selenium.tests.query;
 
 
-import java.util.List;
 import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QBaseSeleniumTest;
 import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QQQMaterialDashboardSelectors;
 import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QueryScreenLib;
@@ -49,7 +48,6 @@ public class QueryScreenTest extends QBaseSeleniumTest
          .withRouteToFile("/data/person/count", "data/person/count.json")
          .withRouteToFile("/data/person/query", "data/person/index.json")
          .withRouteToFile("/data/person/variants", "data/person/variants.json")
-         .withRouteToFile("/data/person/possibleValues/homeCityId", "data/person/possibleValues/homeCityId.json")
          .withRouteToFile("/processes/querySavedView/init", "processes/querySavedView/init.json");
    }
 
@@ -66,13 +64,13 @@ public class QueryScreenTest extends QBaseSeleniumTest
       qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person", "Person");
       queryScreenLib.waitForQueryToHaveRan();
       queryScreenLib.gotoAdvancedMode();
-      queryScreenLib.clickFilterBuilderButton();
+      queryScreenLib.clickFilterButton();
 
       /////////////////////////////////////////////////////////////////////
       // open the filter window, enter a value, wait for query to re-run //
       /////////////////////////////////////////////////////////////////////
       qSeleniumJavalin.beginCapture();
-      queryScreenLib.addAdvancedQueryFilterInput(0, "Id", "equals", "1", null);
+      queryScreenLib.addAdvancedQueryFilterInput(qSeleniumLib, 0, "Id", "equals", "1", null);
 
       ///////////////////////////////////////////////////////////////////
       // assert that query & count both have the expected filter value //
@@ -119,11 +117,11 @@ public class QueryScreenTest extends QBaseSeleniumTest
       qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person", "Person");
       queryScreenLib.waitForQueryToHaveRan();
       queryScreenLib.gotoAdvancedMode();
-      queryScreenLib.clickFilterBuilderButton();
+      queryScreenLib.clickFilterButton();
 
       qSeleniumJavalin.beginCapture();
-      queryScreenLib.addAdvancedQueryFilterInput(0, "First Name", "contains", "Dar", "Or");
-      queryScreenLib.addAdvancedQueryFilterInput(1, "First Name", "contains", "Jam", "Or");
+      queryScreenLib.addAdvancedQueryFilterInput(qSeleniumLib, 0, "First Name", "contains", "Dar", "Or");
+      queryScreenLib.addAdvancedQueryFilterInput(qSeleniumLib, 1, "First Name", "contains", "Jam", "Or");
 
       String expectedFilterContents0 = """
          {"fieldName":"firstName","operator":"CONTAINS","values":["Dar"]}""";
@@ -139,138 +137,6 @@ public class QueryScreenTest extends QBaseSeleniumTest
    }
 
 
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   @Test
-   void testBasicBooleanOperators()
-   {
-      QueryScreenLib queryScreenLib = new QueryScreenLib(qSeleniumLib);
-
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person", "Person");
-      queryScreenLib.waitForQueryToHaveRan();
-
-      queryScreenLib.addBasicFilter("Is Employed");
-
-      testBasicCriteria(queryScreenLib, "Is Employed", "equals yes", null, "(?s).*Is Employed:.*yes.*", """
-         {"fieldName":"isEmployed","operator":"EQUALS","values":[true]}""");
-
-      testBasicCriteria(queryScreenLib, "Is Employed", "equals no", null, "(?s).*Is Employed:.*no.*", """
-         {"fieldName":"isEmployed","operator":"EQUALS","values":[false]}""");
-
-      testBasicCriteria(queryScreenLib, "Is Employed", "is empty", null, "(?s).*Is Employed:.*is empty.*", """
-         {"fieldName":"isEmployed","operator":"IS_BLANK","values":[]}""");
-
-      testBasicCriteria(queryScreenLib, "Is Employed", "is not empty", null, "(?s).*Is Employed:.*is not empty.*", """
-         {"fieldName":"isEmployed","operator":"IS_NOT_BLANK","values":[]}""");
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   @Test
-   void testBasicPossibleValues()
-   {
-      QueryScreenLib queryScreenLib = new QueryScreenLib(qSeleniumLib);
-
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person", "Person");
-      queryScreenLib.waitForQueryToHaveRan();
-
-      String field = "Home City";
-      queryScreenLib.addBasicFilter(field);
-
-      testBasicCriteriaPossibleValues(queryScreenLib, field, "is any of", List.of("St. Louis", "Chesterfield"), "(?s).*" + field + ":.*St. Louis.*\\+1.*", """
-         {"fieldName":"homeCityId","operator":"IN","values":[1,2]}""");
-
-      testBasicCriteriaPossibleValues(queryScreenLib, field, "equals", List.of("Chesterfield"), "(?s).*" + field + ":.*Chesterfield.*", """
-         {"fieldName":"homeCityId","operator":"EQUALS","values":[2]}""");
-
-      testBasicCriteriaPossibleValues(queryScreenLib, field, "is empty", null, "(?s).*" + field + ":.*is empty.*", """
-         {"fieldName":"homeCityId","operator":"IS_BLANK","values":[]}""");
-
-      testBasicCriteriaPossibleValues(queryScreenLib, field, "does not equal", List.of("St. Louis"), "(?s).*" + field + ":.*does not equal.*St. Louis.*", """
-         {"fieldName":"homeCityId","operator":"NOT_EQUALS_OR_IS_NULL","values":[1]}""");
-
-      testBasicCriteriaPossibleValues(queryScreenLib, field, "is none of", List.of("Chesterfield"), "(?s).*" + field + ":.*is none of.*St. Louis.*\\+1", """
-         {"fieldName":"homeCityId","operator":"NOT_IN","values":[1,2]}""");
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   private void testBasicCriteria(QueryScreenLib queryScreenLib, String fieldLabel, String operatorLabel, String value, String expectButtonStringRegex, String expectFilterJsonContains)
-   {
-      qSeleniumJavalin.beginCapture();
-      queryScreenLib.setBasicFilter(fieldLabel, operatorLabel, value);
-      queryScreenLib.waitForBasicFilterButtonMatchingRegex(expectButtonStringRegex);
-      qSeleniumJavalin.waitForCapturedPathWithBodyContaining("/data/person/query", expectFilterJsonContains);
-      qSeleniumJavalin.endCapture();
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   private void testBasicCriteriaPossibleValues(QueryScreenLib queryScreenLib, String fieldLabel, String operatorLabel, List<String> values, String expectButtonStringRegex, String expectFilterJsonContains)
-   {
-      qSeleniumJavalin.beginCapture();
-      queryScreenLib.setBasicFilterPossibleValues(fieldLabel, operatorLabel, values);
-      queryScreenLib.waitForBasicFilterButtonMatchingRegex(expectButtonStringRegex);
-      qSeleniumJavalin.waitForCapturedPathWithBodyContaining("/data/person/query", expectFilterJsonContains);
-      qSeleniumJavalin.endCapture();
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   @Test
-   void testAdvancedBooleanOperators()
-   {
-      QueryScreenLib queryScreenLib = new QueryScreenLib(qSeleniumLib);
-
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person", "Person");
-      queryScreenLib.waitForQueryToHaveRan();
-
-      queryScreenLib.gotoAdvancedMode();
-
-      testAdvancedCriteria(queryScreenLib, "Is Employed", "equals yes", null, "(?s).*Is Employed.*equals yes.*", """
-         {"fieldName":"isEmployed","operator":"EQUALS","values":[true]}""");
-
-      testAdvancedCriteria(queryScreenLib, "Is Employed", "equals no", null, "(?s).*Is Employed.*equals no.*", """
-         {"fieldName":"isEmployed","operator":"EQUALS","values":[false]}""");
-
-      testAdvancedCriteria(queryScreenLib, "Is Employed", "is empty", null, "(?s).*Is Employed.*is empty.*", """
-         {"fieldName":"isEmployed","operator":"IS_BLANK","values":[]}""");
-
-      testAdvancedCriteria(queryScreenLib, "Is Employed", "is not empty", null, "(?s).*Is Employed.*is not empty.*", """
-         {"fieldName":"isEmployed","operator":"IS_NOT_BLANK","values":[]}""");
-   }
-
    // todo - table requires variant - prompt for it, choose it, see query; change variant, change on-screen, re-query
 
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   private void testAdvancedCriteria(QueryScreenLib queryScreenLib, String fieldLabel, String operatorLabel, String value, String expectQueryStringRegex, String expectFilterJsonContains)
-   {
-      qSeleniumJavalin.beginCapture();
-      queryScreenLib.clickFilterBuilderButton();
-      queryScreenLib.addAdvancedQueryFilterInput(0, fieldLabel, operatorLabel, value, null);
-      qSeleniumLib.clickBackdrop();
-      queryScreenLib.waitForAdvancedQueryStringMatchingRegex(expectQueryStringRegex);
-      qSeleniumJavalin.waitForCapturedPathWithBodyContaining("/data/person/query", expectFilterJsonContains);
-      qSeleniumJavalin.endCapture();
-      queryScreenLib.clickAdvancedFilterClearIcon();
-   }
-
 }