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|dev|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|dev|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": {

cypress.config.ts

@@ -0,0 +1,12 @@
+import {defineConfig} from "cypress";
+
+export default defineConfig({
+   e2e: {
+      viewportHeight: 1000,
+      viewportWidth: 1200,
+      setupNodeEvents(on, config)
+      {
+      // implement node event listeners here
+      },
+   },
+});

package.json

@@ -6,20 +6,19 @@
       "@auth0/auth0-react": "1.10.2",
       "@emotion/react": "11.7.1",
       "@emotion/styled": "11.6.0",
-      "@kingsrook/qqq-frontend-core": "1.0.104",
+      "@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",
       "@react-oauth/google": "0.2.8",
-      "@types/prop-types": "15.7.5",
-      "@types/react": "18.2.0",
+      "@types/prop-types": "^15.7.5",
+      "@types/react": "18.0.0",
       "@types/react-dom": "18.0.0",
       "@types/react-router-hash-link": "2.4.5",
       "ace-builds": "1.12.3",
@@ -27,13 +26,12 @@
       "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",
       "formik": "2.2.9",
       "html-react-parser": "1.4.8",
-      "html-to-text": "9.0.5",
+      "html-to-text": "^9.0.5",
       "http-proxy-middleware": "2.0.6",
       "jwt-decode": "3.1.2",
       "rapidoc": "9.3.4",
@@ -41,21 +39,14 @@
       "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-google-drive-picker": "^1.2.0",
       "react-markdown": "9.0.1",
       "react-router-dom": "6.2.1",
       "react-router-hash-link": "2.4.3",
       "react-table": "7.7.0",
       "sass": "1.63.4",
-      "sequential-workflow-designer": "0.22.0",
-      "sequential-workflow-designer-react": "0.22.0",
-      "sequential-workflow-editor": "0.13.2",
-      "sequential-workflow-editor-model": "0.13.2",
       "ts-md5": "1.2.11",
       "yup": "0.32.11"
    },
@@ -63,7 +54,7 @@
       "build": "react-scripts build",
       "clean": "rm -rf node_modules package-lock.json lib",
       "eject": "react-scripts eject",
-      "clean-and-install": "rm -rf node_modules/ && rm -rf package-lock.json && rm -rf lib/ && npm install --legacy-peer-deps && npm dedupe --force",
+      "clean-and-install": "rm -rf node_modules/ && rm -rf package-lock.json && rm -rf lib/ && npm install --legacy-peer-deps",
       "npm-install": "npm install --legacy-peer-deps",
       "prepublishOnly": "tsc -p ./ --outDir lib/",
       "start": "BROWSER=none react-scripts --max-http-header-size=65535 start",

pom.xml

@@ -29,7 +29,7 @@
    <packaging>jar</packaging>
 
    <properties>
-      <revision>0.21.0-SNAPSHOT</revision>
+      <revision>0.20.0-SNAPSHOT</revision>
 
       <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
       <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
@@ -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,14 +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 RecordViewByUniqueKey from "qqq/pages/records/view/RecordViewByUniqueKey";
-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();
@@ -81,7 +79,7 @@ export default function App()
    Client.setUnauthorizedCallback(() =>
    {
       logout();
-   });
+   })
 
    const shouldStoreNewToken = (newToken: string, oldToken: string): boolean =>
    {
@@ -106,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);
@@ -116,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);
@@ -162,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. //
@@ -170,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
@@ -188,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;
@@ -393,13 +390,6 @@ export default function App()
                   component: <RecordView table={table} />,
                });
 
-               routeList.push({
-                  name: `${app.label} View`,
-                  key: `${app.name}.view`,
-                  route: `${path}/key`,
-                  component: <RecordViewByUniqueKey table={table} />,
-               });
-
                routeList.push({
                   name: `${app.label}`,
                   key: `${app.name}.edit`,
@@ -560,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];
@@ -585,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: "/"});
 
                   //////////////////////////////////////////////////////
@@ -666,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 (
 
@@ -703,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),
@@ -711,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
          }}>
@@ -737,4 +707,4 @@ export default function App()
          </QContext.Provider>
       )
    );
-}
+}

src/CommandMenu.tsx

@@ -62,21 +62,16 @@ const useStyles = makeStyles((theme: any) => ({
    }
 }));
 
-const A_FIRST = -1;
-const B_FIRST = 1;
-
 const CommandMenu = ({metaData}: Props) =>
 {
-   const [searchString, setSearchString] = useState("");
-
    const navigate = useNavigate();
    const pathParts = location.pathname.replace(/\/+$/, "").split("/");
 
-   const {accentColor, tableMetaData, dotMenuOpen, setDotMenuOpen, keyboardHelpOpen, setKeyboardHelpOpen, setTableMetaData, tableProcesses, recordAnalytics} = useContext(QContext);
+   const {accentColor, tableMetaData, dotMenuOpen, setDotMenuOpen, keyboardHelpOpen, setKeyboardHelpOpen, setTableMetaData, tableProcesses} = useContext(QContext);
 
    const classes = useStyles();
 
-   function evaluateKeyPress(e: KeyboardEvent)
+   function evalueKeyPress(e: KeyboardEvent)
    {
       ///////////////////////////////////////////////////////////////////////////
       // if a dot pressed, not from a "text" element, then toggle command menu //
@@ -87,7 +82,6 @@ const CommandMenu = ({metaData}: Props) =>
          if (e.key === "." && !keyboardHelpOpen)
          {
             e.preventDefault();
-            recordAnalytics({category: "globalEvents", action: "dotMenuKeyboardShortcut"});
             setDotMenuOpen(true);
          }
          else if (e.key === "?" && !dotMenuOpen)
@@ -113,20 +107,20 @@ const CommandMenu = ({metaData}: Props) =>
 
       const down = (e: KeyboardEvent) =>
       {
-         evaluateKeyPress(e);
-      };
+         evalueKeyPress(e);
+      }
 
-      document.addEventListener("keydown", down);
+      document.addEventListener("keydown", down)
       return () =>
       {
-         document.removeEventListener("keydown", down);
-      };
-   }, [tableMetaData, dotMenuOpen, keyboardHelpOpen]);
+         document.removeEventListener("keydown", down)
+      }
+   }, [tableMetaData, dotMenuOpen, keyboardHelpOpen])
 
    useEffect(() =>
    {
       setDotMenuOpen(false);
-   }, [location.pathname]);
+   }, [location.pathname])
 
    function goToItem(path: string)
    {
@@ -168,117 +162,69 @@ const CommandMenu = ({metaData}: Props) =>
       return (null);
    }
 
-
-   /*******************************************************************************
-    ** sort a section (e.g, tables, apps).
-    **
-    ** put labels that start-with the search word first.
-    *******************************************************************************/
-   function comparator(labelA: string, labelB: string)
-   {
-      if (searchString != "")
-      {
-         let aStartsWith = labelA.toLowerCase().startsWith(searchString.toLowerCase());
-         let bStartsWith = labelB.toLowerCase().startsWith(searchString.toLowerCase());
-
-         if (aStartsWith && !bStartsWith)
-         {
-            return A_FIRST;
-         }
-         else if (bStartsWith && !aStartsWith)
-         {
-            return B_FIRST;
-         }
-
-         const indexOfSpace = searchString.indexOf(" ");
-         if (indexOfSpace > 0)
-         {
-            aStartsWith = labelA.toLowerCase().startsWith(searchString.substring(0, indexOfSpace).toLowerCase());
-            bStartsWith = labelB.toLowerCase().startsWith(searchString.substring(0, indexOfSpace).toLowerCase());
-
-            if (aStartsWith && !bStartsWith)
-            {
-               return A_FIRST;
-            }
-            else if (bStartsWith && !aStartsWith)
-            {
-               return B_FIRST;
-            }
-         }
-      }
-
-      return (labelA.localeCompare(labelB));
-   }
-
-
    /*******************************************************************************
     **
     *******************************************************************************/
    function ActionsSection()
    {
-      let tableNames: string[] = [];
+      let tableNames : string[]= [];
       metaData.tables.forEach((value: QTableMetaData, key: string) =>
       {
          tableNames.push(value.name);
-      });
-      tableNames = tableNames.sort((a: string, b: string) =>
+      })
+      tableNames = tableNames.sort((a: string, b:string) =>
       {
-         const labelA = metaData.tables.get(a).label ?? "";
-         const labelB = metaData.tables.get(b).label ?? "";
-         return comparator(labelA, labelB);
-      });
+         return (metaData.tables.get(a).label.localeCompare(metaData.tables.get(b).label));
+      })
 
       const path = location.pathname;
-      return tableMetaData && !path.endsWith("/edit") && !path.endsWith("/create") && !path.endsWith("#audit") && !path.endsWith("copy") &&
+      return tableMetaData && !path.endsWith("/edit") && !path.endsWith("/create") && !path.endsWith("#audit") && ! path.endsWith("copy") &&
          (
             <Command.Group heading={`${tableMetaData.label} Actions`}>
                {
                   tableMetaData.capabilities.has(Capability.TABLE_INSERT) && tableMetaData.insertPermission &&
-                  <Command.Item onSelect={() => goToItem(`${pathParts.slice(0, -1).join("/")}/create`)} key={`${tableMetaData.label}-new`} value="New"><Icon sx={{color: accentColor}}>add</Icon>New</Command.Item>
+               <Command.Item onSelect={() => goToItem(`${pathParts.slice(0, -1).join("/")}/create`)} key={`${tableMetaData.label}-new`} value="New"><Icon sx={{color: accentColor}}>add</Icon>New</Command.Item>
                }
                {
                   tableMetaData.capabilities.has(Capability.TABLE_INSERT) && tableMetaData.insertPermission &&
-                  <Command.Item onSelect={() => goToItem(`${pathParts.join("/")}/copy`)} key={`${tableMetaData.label}-copy`} value="Copy"><Icon sx={{color: accentColor}}>copy</Icon>Copy</Command.Item>
+               <Command.Item onSelect={() => goToItem(`${pathParts.join("/")}/copy`)} key={`${tableMetaData.label}-copy`} value="Copy"><Icon sx={{color: accentColor}}>copy</Icon>Copy</Command.Item>
                }
                {
                   tableMetaData.capabilities.has(Capability.TABLE_UPDATE) && tableMetaData.editPermission &&
-                  <Command.Item onSelect={() => goToItem(`${pathParts.join("/")}/edit`)} key={`${tableMetaData.label}-edit`} value="Edit"><Icon sx={{color: accentColor}}>edit</Icon>Edit</Command.Item>
+               <Command.Item onSelect={() => goToItem(`${pathParts.join("/")}/edit`)} key={`${tableMetaData.label}-edit`} value="Edit"><Icon sx={{color: accentColor}}>edit</Icon>Edit</Command.Item>
                }
                {
                   metaData && metaData.tables.has("audit") &&
-                  <Command.Item onSelect={() => goToItem(`${pathParts.join("/")}#audit`)} key={`${tableMetaData.label}-audit`} value="Audit"><Icon sx={{color: accentColor}}>checklist</Icon>Audit</Command.Item>
+               <Command.Item onSelect={() => goToItem(`${pathParts.join("/")}#audit`)} key={`${tableMetaData.label}-audit`} value="Audit"><Icon sx={{color: accentColor}}>checklist</Icon>Audit</Command.Item>
                }
                {
                   tableProcesses && tableProcesses.length > 0 &&
-                  (
-                     tableProcesses.map((process) => (
-                        <Command.Item onSelect={() => goToItem(`${pathParts.join("/")}/${process.name}`)} key={`${process.name}`} value={`${process.label}`}><Icon sx={{color: accentColor}}>{getIconName(process.iconName, "play_arrow")}</Icon>{process.label}</Command.Item>
-                     ))
-                  )
+               (
+                  tableProcesses.map((process) => (
+                     <Command.Item onSelect={() => goToItem(`${pathParts.join("/")}/${process.name}`)} key={`${process.name}`} value={`${process.label}`}><Icon sx={{color: accentColor}}>{getIconName(process.iconName, "play_arrow")}</Icon>{process.label}</Command.Item>
+                  ))
+               )
                }
                <Command.Separator />
             </Command.Group>
          );
    }
 
-
    /*******************************************************************************
     **
     *******************************************************************************/
    function TablesSection()
    {
-      let tableNames: string[] = [];
+      let tableNames : string[]= [];
       metaData.tables.forEach((value: QTableMetaData, key: string) =>
       {
          tableNames.push(value.name);
-      });
-      tableNames = tableNames.sort((a: string, b: string) =>
+      })
+      tableNames = tableNames.sort((a: string, b:string) =>
       {
-         const labelA = metaData.tables.get(a).label ?? "";
-         const labelB = metaData.tables.get(b).label ?? "";
-         return comparator(labelA, labelB);
-      });
-      return (
+         return (metaData.tables.get(a).label.localeCompare(metaData.tables.get(b).label));
+      })
+      return(
          <Command.Group heading="Tables">
             {
                tableNames.map((tableName: string, index: number) =>
@@ -293,7 +239,6 @@ const CommandMenu = ({metaData}: Props) =>
       );
    }
 
-
    /*******************************************************************************
     **
     *******************************************************************************/
@@ -303,16 +248,14 @@ const CommandMenu = ({metaData}: Props) =>
       metaData.apps.forEach((value: QAppMetaData, key: string) =>
       {
          appNames.push(value.name);
-      });
+      })
 
-      appNames = appNames.sort((a: string, b: string) =>
+      appNames = appNames.sort((a: string, b:string) =>
       {
-         const labelA = getFullAppLabel(metaData.appTree, a, 1, "") ?? "";
-         const labelB = getFullAppLabel(metaData.appTree, b, 1, "") ?? "";
-         return comparator(labelA, labelB);
-      });
+         return (getFullAppLabel(metaData.appTree, a, 1, "").localeCompare(getFullAppLabel(metaData.appTree, b, 1, "")));
+      })
 
-      return (
+      return(
          <Command.Group heading="Apps">
             {
                appNames.map((appName: string, index: number) =>
@@ -327,37 +270,31 @@ const CommandMenu = ({metaData}: Props) =>
       );
    }
 
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
    function RecentlyViewedSection()
    {
       const history = HistoryUtils.get();
       const options = [] as any;
       history.entries.reverse().forEach((entry, index) =>
          options.push({label: `${entry.label} index`, id: index, key: index, path: entry.path, iconName: entry.iconName})
-      );
+      )
 
       let appNames: string[] = [];
       metaData.apps.forEach((value: QAppMetaData, key: string) =>
       {
          appNames.push(value.name);
-      });
+      })
 
-      appNames = appNames.sort((a: string, b: string) =>
+      appNames = appNames.sort((a: string, b:string) =>
       {
-         const labelA = metaData.apps.get(a).label ?? "";
-         const labelB = metaData.apps.get(b).label ?? "";
-         return comparator(labelA, labelB);
-      });
+         return (metaData.apps.get(a).label.localeCompare(metaData.apps.get(b).label));
+      })
 
       const entryMap = new Map<string, boolean>();
-      return (
+      return(
          <Command.Group heading="Recently Viewed Records">
             {
                history.entries.reverse().map((entry: QHistoryEntry, index: number) =>
-                  !entryMap.has(entry.label) && entryMap.set(entry.label, true) && (
+                  ! entryMap.has(entry.label) && entryMap.set(entry.label, true) && (
                      <Command.Item onSelect={() => goToItem(`${entry.path}`)} key={`${entry.label}-${index}`} value={entry.label}><Icon sx={{color: accentColor}}>{entry.iconName}</Icon>{entry.label}</Command.Item>
                   )
                )
@@ -366,101 +303,29 @@ const CommandMenu = ({metaData}: Props) =>
       );
    }
 
-   const containerElement = useRef(null);
+   const containerElement = useRef(null)
 
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
    function closeKeyboardHelp()
    {
       setKeyboardHelpOpen(false);
    }
 
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
    function closeDotMenu()
    {
       setDotMenuOpen(false);
    }
 
-
-   /*******************************************************************************
-    ** filter function for cmd-k library
-    **
-    *******************************************************************************/
-   function doFilter(value: string, search: string)
-   {
-      setSearchString(search);
-
-      /////////////////////
-      // split on spaces //
-      /////////////////////
-      const searchParts = search.toLowerCase().split(" ");
-      if (searchParts.length == 1)
-      {
-         //////////////////////////////////////////////
-         // if only 1 word, just do an includes test //
-         //////////////////////////////////////////////
-         return (value.toLowerCase().includes(search.toLowerCase()) ? 1 : 0);
-      }
-      else
-      {
-         ////////////////////////////////////////
-         // else split the value on spaces too //
-         ////////////////////////////////////////
-         const valueParts = value.toLowerCase().split(" ");
-         if (searchParts.length > valueParts.length)
-         {
-            //////////////////////////////////////////////////////////////////////////////////
-            // if there are more words in the search than in the value, then it can't match //
-            // e.g. "order c" can't ever match, say "order"                                 //
-            //////////////////////////////////////////////////////////////////////////////////
-            return (0);
-         }
-
-         /////////////////////////////////////////////////////////////////////////////////////////////////////////////
-         // iterate over the search parts - if any don't match the corresponding value parts, then it's a non-match //
-         /////////////////////////////////////////////////////////////////////////////////////////////////////////////
-         let valueIndex = 0;
-         for (let i = 0; i < searchParts.length; i++)
-         {
-            let foundMatch = false;
-            for (; valueIndex < valueParts.length; valueIndex++)
-            {
-               if (valueParts[valueIndex].includes(searchParts[i]))
-               {
-                  foundMatch = true;
-                  break;
-               }
-            }
-
-            if (!foundMatch)
-            {
-               return (0);
-            }
-         }
-
-         /////////////////////////////////
-         // if no failure, return a hit //
-         /////////////////////////////////
-         return (1);
-      }
-   }
-
    return (
       <React.Fragment>
          <Box ref={containerElement} className="raycast" sx={{position: "relative", zIndex: 10_000}}>
             {
                <Dialog open={dotMenuOpen} onClose={closeDotMenu}>
-                  <Command.Dialog open={dotMenuOpen} onOpenChange={setDotMenuOpen} container={containerElement.current} filter={(value, search) => doFilter(value, search)}>
+                  <Command.Dialog open={dotMenuOpen} onOpenChange={setDotMenuOpen} container={containerElement.current} label="Test Global Command Menu">
                      <Box sx={{display: "flex"}}>
-                        <Command.Input placeholder="Search for Tables, Actions, or Recently Viewed Items..." />
+                        <Command.Input placeholder="Search for Tables, Actions, or Recently Viewed Items..."/>
                         <Button onClick={closeDotMenu}><Icon>close</Icon></Button>
                      </Box>
-                     <Command.Loading />
+                     <Command.Loading  />
                      <Command.Separator />
                      <Command.List>
                         <Command.Empty>No results found.</Command.Empty>
@@ -489,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>
@@ -508,6 +374,6 @@ const CommandMenu = ({metaData}: Props) =>
             </Dialog>
          }
       </React.Fragment>
-   );
-};
+   )
+}
 export default CommandMenu;

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,41 +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))
-      {
-         validateFieldRule(qInstance, tableMetaData, qInstanceValidator, fieldRule, prefix);
-      }
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   static void validateFieldRule(QInstance qInstance, QTableMetaData tableMetaData, QInstanceValidator qInstanceValidator, FieldRule fieldRule, String prefix)
-   {
-      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(StringUtils.hasContent(fieldRule.getTargetField()))
-      {
-         qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldRule.getTargetField()), prefix + "has a fieldRule with an unrecognized targetField: " + fieldRule.getTargetField());
-      }
-
-      if(StringUtils.hasContent(fieldRule.getTargetWidget()))
-      {
-         if(qInstanceValidator.assertCondition(qInstance.getWidget(fieldRule.getTargetWidget()) != null, prefix + "has a widgetRule with an unrecognized targetWidget: " + fieldRule.getTargetWidget()))
-         {
-            qInstanceValidator.assertCondition(CollectionUtils.nonNullList(tableMetaData.getSections()).stream().anyMatch(s -> fieldRule.getTargetWidget().equals(s.getWidgetName())),
-               prefix + "has a widgetRule with a targetWidget which is not used in any sections on the table");
-         }
-      }
    }
 
 
@@ -180,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);
          }
       }
@@ -217,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,198 +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;
-
-   private String targetWidget;
-
-
-
-   /*******************************************************************************
-    ** 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);
-   }
-
-
-
-   /*******************************************************************************
-    ** Getter for targetWidget
-    *******************************************************************************/
-   public String getTargetWidget()
-   {
-      return (this.targetWidget);
-   }
-
-
-
-   /*******************************************************************************
-    ** Setter for targetWidget
-    *******************************************************************************/
-   public void setTargetWidget(String targetWidget)
-   {
-      this.targetWidget = targetWidget;
-   }
-
-
-
-   /*******************************************************************************
-    ** Fluent setter for targetWidget
-    *******************************************************************************/
-   public FieldRule withTargetWidget(String targetWidget)
-   {
-      this.targetWidget = targetWidget;
-      return (this);
-   }
-
-}

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

@@ -1,32 +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,
-   RELOAD_WIDGET
-}

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/DynamicForm.tsx

@@ -174,8 +174,7 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
                               <DynamicSelect
                                  tableName={field.possibleValueProps.tableName}
                                  processName={field.possibleValueProps.processName}
-                                 possibleValueSourceName={field.possibleValueProps.possibleValueSourceName}
-                                 fieldName={field.possibleValueProps.fieldName}
+                                 fieldName={fieldName}
                                  isEditable={field.isEditable}
                                  fieldLabel=""
                                  initialValue={values[fieldName]}

src/qqq/components/forms/DynamicFormField.tsx

@@ -19,17 +19,16 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {Box, InputAdornment, InputLabel} from "@mui/material";
+import {InputAdornment, InputLabel} from "@mui/material";
+import Box from "@mui/material/Box";
 import Switch from "@mui/material/Switch";
 import {ErrorMessage, Field, useFormikContext} from "formik";
-import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
-import React, {useMemo, useState} from "react";
+import React, {useState} from "react";
 import AceEditor from "react-ace";
 import colors from "qqq/assets/theme/base/colors";
 import BooleanFieldSwitch from "qqq/components/forms/BooleanFieldSwitch";
 import MDInput from "qqq/components/legacy/MDInput";
 import MDTypography from "qqq/components/legacy/MDTypography";
-import {flushSync} from "react-dom";
 
 // Declaring props types for FormField
 interface Props
@@ -86,51 +85,6 @@ function QDynamicFormField({
       }
    };
 
-   ///////////////////////////////////////////////////////////////////////////////////////
-   // check the field meta data for behavior that says to do toUpperCase or toLowerCase //
-   ///////////////////////////////////////////////////////////////////////////////////////
-   let isToUpperCase = useMemo(() => DynamicFormUtils.isToUpperCase(formFieldObject?.fieldMetaData), [formFieldObject]);
-   let isToLowerCase = useMemo(() => DynamicFormUtils.isToLowerCase(formFieldObject?.fieldMetaData), [formFieldObject]);
-
-   ////////////////////////////////////////////////////////////////////////
-   // if the field has a toUpperCase or toLowerCase behavior on it, then //
-   // apply that rule.  But also, to avoid the cursor always jumping to  //
-   // the end of the input, do some manipulation of the selection.       //
-   // See: https://giacomocerquone.com/blog/keep-input-cursor-still      //
-   // Note, we only want an onChange handle if we're doing one of these  //
-   // behaviors, (because teh flushSync is potentially slow).  hence, we //
-   // put the onChange in an object and assign it with a spread          //
-   ////////////////////////////////////////////////////////////////////////
-   let onChange: any = {};
-   if (isToUpperCase || isToLowerCase)
-   {
-      onChange.onChange = (e: any) =>
-      {
-         const beforeStart = e.target.selectionStart;
-         const beforeEnd = e.target.selectionEnd;
-
-         flushSync(() =>
-         {
-            let newValue = e.currentTarget.value;
-            if (isToUpperCase)
-            {
-               newValue = newValue.toUpperCase();
-            }
-            if (isToLowerCase)
-            {
-               newValue = newValue.toLowerCase();
-            }
-            setFieldValue(name, newValue);
-         });
-
-         const input = document.getElementById(name) as HTMLInputElement;
-         if (input)
-         {
-            input.setSelectionRange(beforeStart, beforeEnd);
-         }
-      };
-   }
-
    let field;
    let getsBulkEditHtmlLabel = true;
    if (type === "checkbox")
@@ -148,7 +102,7 @@ function QDynamicFormField({
    else if (type === "ace")
    {
       let mode = "text";
-      if (formFieldObject && formFieldObject.languageMode)
+      if(formFieldObject && formFieldObject.languageMode)
       {
          mode = formFieldObject.languageMode;
       }
@@ -179,7 +133,7 @@ function QDynamicFormField({
    {
       field = (
          <>
-            <Field {...rest} {...onChange} onWheel={handleOnWheel} name={name} type={type} as={MDInput} variant="outlined" label={label} InputLabelProps={inputLabelProps} InputProps={inputProps} fullWidth disabled={isDisabled}
+            <Field {...rest} onWheel={handleOnWheel} name={name} type={type} as={MDInput} variant="outlined" label={label} InputLabelProps={inputLabelProps} InputProps={inputProps} fullWidth disabled={isDisabled}
                onKeyPress={(e: any) =>
                {
                   if (e.key === "Enter")
@@ -219,8 +173,7 @@ function QDynamicFormField({
                   id={`bulkEditSwitch-${name}`}
                   checked={switchChecked}
                   onClick={bulkEditSwitchChanged}
-                  sx={{
-                     top: "-4px",
+                  sx={{top: "-4px",
                      "& .MuiSwitch-track": {
                         height: 20,
                         borderRadius: 10,

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++)
@@ -172,17 +144,6 @@ class DynamicFormUtils
                   {
                      isPossibleValue: true,
                      tableName: tableName,
-                     fieldName: field.name,
-                     initialDisplayValue: initialDisplayValue,
-                  };
-            }
-            else if (processName)
-            {
-               dynamicFormFields[field.name].possibleValueProps =
-                  {
-                     isPossibleValue: true,
-                     processName: processName,
-                     fieldName: field.name,
                      initialDisplayValue: initialDisplayValue,
                   };
             }
@@ -191,75 +152,13 @@ class DynamicFormUtils
                dynamicFormFields[field.name].possibleValueProps =
                   {
                      isPossibleValue: true,
+                     processName: processName,
                      initialDisplayValue: initialDisplayValue,
-                     fieldName: field.name,
-                     possibleValueSourceName: field.possibleValueSourceName
                   };
             }
          }
       }
    }
-
-
-   /*******************************************************************************
-    ** 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]);
-      }
-   }
-
-
-   /***************************************************************************
-    * check if a field has the TO_UPPER_CASE behavior on it.
-    ***************************************************************************/
-   public static isToUpperCase(fieldMetaData: QFieldMetaData): boolean
-   {
-      return this.hasBehavior(fieldMetaData, "TO_UPPER_CASE");
-   }
-
-
-   /***************************************************************************
-    * check if a field has the TO_LOWER_CASE behavior on it.
-    ***************************************************************************/
-   public static isToLowerCase(fieldMetaData: QFieldMetaData): boolean
-   {
-      return this.hasBehavior(fieldMetaData, "TO_LOWER_CASE");
-   }
-
-
-   /***************************************************************************
-    * check if a field has a specific behavior name on it.
-    ***************************************************************************/
-   private static hasBehavior(fieldMetaData: QFieldMetaData, behaviorName: string): boolean
-   {
-      if (fieldMetaData && fieldMetaData.behaviors)
-      {
-         for (let i = 0; i < fieldMetaData.behaviors.length; i++)
-         {
-            if (fieldMetaData.behaviors[i] == behaviorName)
-            {
-               return (true);
-            }
-         }
-      }
-
-      return (false);
-   }
-
 }
 
 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,74 +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 - you must provide either a fieldName (and a tableName or processName) or a possibleValueSourceName");
-      }
-      if (fieldName && !possibleValueSourceName)
-      {
-         if (!tableName || !processName)
-         {
-            console.log("DynamicSelect - if you provide a fieldName and not a possibleValueSourceName, then 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 [otherValuesWhenResultsWereLoaded, setOtherValuesWhenResultsWereLoaded] = useState(JSON.stringify(Object.fromEntries((otherValues))))
+   const {inputBorderColor} = colors;
 
    ////////////////////////////////////////////////////////////////////////////////////////////////
    // default value - needs to be an array (from initialValues (array) prop) for multiple mode - //
@@ -173,7 +112,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
 
    useEffect(() =>
    {
-      if (firstRender)
+      if(firstRender)
       {
          // console.log("First render, so not searching...");
          setFirstRender(false);
@@ -194,9 +133,9 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
       (async () =>
       {
          // console.log(`doing a search with ${searchTerm}`);
-         const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, possibleValueSourceName ?? fieldName, searchTerm ?? "", null, otherValues);
+         const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, fieldName, searchTerm ?? "", null, otherValues);
 
-         if (tableMetaData == null && tableName)
+         if(tableMetaData == null && tableName)
          {
             let tableMetaData: QTableMetaData = await qController.loadTableMetaData(tableName);
             setTableMetaData(tableMetaData);
@@ -207,7 +146,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
          // console.log(`${results}`);
          if (active)
          {
-            setOptions([...results]);
+            setOptions([ ...results ]);
          }
       })();
 
@@ -215,30 +154,30 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
       {
          active = false;
       };
-   }, [searchTerm]);
+   }, [ searchTerm ]);
 
    // todo - finish... call it in onOpen?
    const reloadIfOtherValuesAreChanged = () =>
    {
-      if (JSON.stringify(Object.fromEntries(otherValues)) != otherValuesWhenResultsWereLoaded)
+      if(JSON.stringify(Object.fromEntries(otherValues)) != otherValuesWhenResultsWereLoaded)
       {
          (async () =>
          {
             setLoading(true);
             setOptions([]);
             console.log("Refreshing possible values...");
-            const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, possibleValueSourceName ?? fieldName, searchTerm ?? "", null, otherValues);
+            const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, fieldName, searchTerm ?? "", null, otherValues);
             setLoading(false);
-            setOptions([...results]);
+            setOptions([ ...results ]);
             setOtherValuesWhenResultsWereLoaded(JSON.stringify(Object.fromEntries(otherValues)));
          })();
       }
-   };
+   }
 
    const inputChanged = (event: React.SyntheticEvent, value: string, reason: string) =>
    {
       // console.log(`input changed.  Reason: ${reason}, setting search term to ${value}`);
-      if (reason !== "reset")
+      if(reason !== "reset")
       {
          // console.log(` -> setting search term to ${value}`);
          setSearchTerm(value);
@@ -248,7 +187,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
    const handleBlur = (x: any) =>
    {
       setSearchTerm(null);
-   };
+   }
 
    const handleChanged = (event: React.SyntheticEvent, value: any | any[], reason: string, details?: string) =>
    {
@@ -256,9 +195,9 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
       // console.log(value);
       setSearchTerm(null);
 
-      if (onChange)
+      if(onChange)
       {
-         if (isMultiple)
+         if(isMultiple)
          {
             onChange(value);
          }
@@ -267,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);
       }
@@ -280,7 +219,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
       // get options whose text/label matches the input (e.g., not ids that match)   //
       /////////////////////////////////////////////////////////////////////////////////
       return (options);
-   };
+   }
 
    // @ts-ignore
    const renderOption = (props: Object, option: any, {selected}) =>
@@ -289,24 +228,23 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
 
       try
       {
-         const field = tableMetaData?.fields.get(fieldName);
-         if (field)
+         const field = tableMetaData?.fields.get(fieldName)
+         if(field)
          {
             const adornment = field.getAdornment(AdornmentType.CHIP);
-            if (adornment)
+            if(adornment)
             {
-               const color = adornment.getValue("color." + option.id) ?? "default";
+               const color = adornment.getValue("color." + option.id) ?? "default"
                const iconName = adornment.getValue("icon." + option.id) ?? null;
                const iconElement = iconName ? <Icon>{iconName}</Icon> : null;
                content = (<Chip label={option.label} color={color} icon={iconElement} size="small" variant="outlined" sx={{fontWeight: 500}} />);
             }
          }
       }
-      catch (e)
-      {
-      }
+      catch(e)
+      { }
 
-      if (isMultiple)
+      if(isMultiple)
       {
          content = (
             <>
@@ -328,7 +266,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
             {content}
          </li>
       );
-   };
+   }
 
    const bulkEditSwitchChanged = () =>
    {
@@ -344,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
@@ -358,7 +311,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
             {
                setOpen(true);
                // console.log("setting open...");
-               if (options.length == 0)
+               if(options.length == 0)
                {
                   // console.log("no options yet, so setting search term to ''...");
                   setSearchTerm("");
@@ -371,19 +324,19 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
             isOptionEqualToValue={(option, value) => value !== null && value !== undefined && option.id === value.id}
             getOptionLabel={(option) =>
             {
-               if (option === null || option === undefined)
+               if(option === null || option === undefined)
                {
                   return ("");
                }
 
                // @ts-ignore
-               if (option && option.length)
+               if(option && option.length)
                {
                   // @ts-ignore
                   option = option[0];
                }
                // @ts-ignore
-               return option.label;
+               return option.label
             }}
             options={options}
             loading={loading}
@@ -430,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>
          }
@@ -447,8 +400,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
                   id={`bulkEditSwitch-${fieldName}`}
                   checked={switchChecked}
                   onClick={bulkEditSwitchChanged}
-                  sx={{
-                     top: "-4px",
+                  sx={{top: "-4px",
                      "& .MuiSwitch-track": {
                         height: 20,
                         borderRadius: 10,
@@ -467,7 +419,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
    else
    {
       return (
-         <Box>
+         <Box mb={1.5}>
             {autocomplete}
          </Box>
       );

src/qqq/components/horseshoe/Breadcrumbs.tsx

@@ -63,7 +63,7 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
    ///////////////////////////////////////////////////////////////////////
    // strip away empty elements of the route (e.g., trailing slash(es)) //
    ///////////////////////////////////////////////////////////////////////
-   if (route.length)
+   if(route.length)
    {
       // @ts-ignore
       route = route.filter(r => r != "");
@@ -74,18 +74,18 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
 
    const fullPathToLabel = (fullPath: string, route: string): string =>
    {
-      if (fullPath.endsWith("/"))
+      if(fullPath.endsWith("/"))
       {
          fullPath = fullPath.replace(/\/+$/, "");
       }
 
-      if (pathToLabelMap && pathToLabelMap[fullPath])
+      if(pathToLabelMap && pathToLabelMap[fullPath])
       {
          return pathToLabelMap[fullPath];
       }
 
       return (routeToLabel(route));
-   };
+   }
 
    let pageTitle = branding?.appName ?? "";
    const fullRoutes: string[] = [];
@@ -94,24 +94,21 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
    {
       ////////////////////////////////////////////////////////
       // avoid showing "saved view" as a breadcrumb element //
-      // e.g., if at /app/table/savedView/1                 //
       ////////////////////////////////////////////////////////
-      if (routes[i] === "savedView" && i == routes.length - 1)
+      if(routes[i] === "savedView")
       {
          continue;
       }
 
       ///////////////////////////////////////////////////////////////////////
       // avoid showing the table name if it's the element before savedView //
-      // e.g., when at /app/table/savedView/1 (so where i==1)              //
-      // we want to just be showing "App"                                  //
       ///////////////////////////////////////////////////////////////////////
-      if (i < routes.length - 1 && routes[i + 1] == "savedView" && i == 1)
+      if(i < routes.length - 1 && routes[i+1] == "savedView")
       {
          continue;
       }
 
-      if (routes[i] === "")
+      if(routes[i] === "")
       {
          continue;
       }

src/qqq/components/horseshoe/NavBar.tsx

@@ -19,15 +19,16 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {Popper, InputAdornment, Box} from "@mui/material";
+import {Popper, InputAdornment} from "@mui/material";
 import AppBar from "@mui/material/AppBar";
 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 ListItemIcon from "@mui/material/ListItemIcon";
 import TextField from "@mui/material/TextField";
 import Toolbar from "@mui/material/Toolbar";
-import React, {useContext, useEffect, useRef, useState} from "react";
+import React, {useContext, useEffect, useState} from "react";
 import {useLocation, useNavigate} from "react-router-dom";
 import QContext from "QContext";
 import QBreadcrumbs, {routeToLabel} from "qqq/components/horseshoe/Breadcrumbs";
@@ -44,8 +45,7 @@ interface Props
    isMini?: boolean;
 }
 
-interface HistoryEntry
-{
+interface HistoryEntry {
    id: number;
    path: string;
    label: string;
@@ -64,7 +64,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
    const route = useLocation().pathname.split("/").slice(1);
    const navigate = useNavigate();
 
-   const {pageHeader, setDotMenuOpen} = useContext(QContext);
+   const {pageHeader} = useContext(QContext);
 
    useEffect(() =>
    {
@@ -99,7 +99,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
       const options = [] as any;
       history.entries.reverse().forEach((entry, index) =>
          options.push({label: `${entry.label} index`, id: index, key: index, path: entry.path, iconName: entry.iconName})
-      );
+      )
       setHistory(options);
 
       // Remove event listener on cleanup
@@ -111,7 +111,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
    const goToHistory = (path: string) =>
    {
       navigate(path);
-   };
+   }
 
    function buildHistoryEntries()
    {
@@ -119,7 +119,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
       const options = [] as any;
       history.entries.reverse().forEach((entry, index) =>
          options.push({label: entry.label, id: index, key: index, path: entry.path, iconName: entry.iconName})
-      );
+      )
       setHistory(options);
    }
 
@@ -133,12 +133,12 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
 
    const handleAutocompleteOnChange = (event: any, value: any, reason: any, details: any) =>
    {
-      if (value)
+      if(value)
       {
          goToHistory(value.path);
       }
       setAutocompleteValue(null);
-   };
+   }
 
    const CustomPopper = function (props: any)
    {
@@ -146,8 +146,8 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
          {...props}
          style={{whiteSpace: "nowrap", width: "auto"}}
          placement="bottom-end"
-      />);
-   };
+      />)
+   }
 
    const renderHistory = () =>
    {
@@ -166,7 +166,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
             PopperComponent={CustomPopper}
             isOptionEqualToValue={(option, value) => option.id === value.id}
             sx={recentlyViewedMenu}
-            renderInput={(params) => <TextField {...params} label="Recently Viewed Records" InputProps={{
+            renderInput={(params) => <TextField {...params}  label="Recently Viewed Records" InputProps={{
                ...params.InputProps,
                endAdornment: (
                   <InputAdornment position="end">
@@ -184,7 +184,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
             )}
          />
       );
-   };
+   }
 
    // Styles for the navbar icons
    const iconsStyle = ({
@@ -210,18 +210,18 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
    const {pathToLabelMap} = useContext(QContext);
    const fullPathToLabel = (fullPath: string, route: string): string =>
    {
-      if (fullPath.endsWith("/"))
+      if(fullPath.endsWith("/"))
       {
          fullPath = fullPath.replace(/\/+$/, "");
       }
 
-      if (pathToLabelMap && pathToLabelMap[fullPath])
+      if(pathToLabelMap && pathToLabelMap[fullPath])
       {
          return pathToLabelMap[fullPath];
       }
 
       return (routeToLabel(route));
-   };
+   }
 
    const breadcrumbTitle = fullPathToLabel(fullPath, route[route.length - 1]);
 
@@ -242,14 +242,9 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
             </Box>
             {isMini ? null : (
                <Box sx={(theme) => navbarRow(theme, {isMini})}>
-                  <Box mt={"-0.25rem"} pb={"0.75rem"} pr={2} mr={-2} sx={{"& *": {cursor: "pointer !important"}}}>
+                  <Box pr={0} mr={-2}>
                      {renderHistory()}
                   </Box>
-                  <Box mt={"-1rem"}>
-                     <IconButton size="small" disableRipple color="inherit" onClick={() => setDotMenuOpen(true)}>
-                        <Icon sx={iconsStyle} fontSize="small">search</Icon>
-                     </IconButton>
-                  </Box>
                </Box>
             )}
          </Toolbar>

src/qqq/components/misc/ErrorBoundary.tsx

@@ -1,74 +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 React, {Component, ErrorInfo} from "react";
-
-interface Props
-{
-   errorElement?: React.ReactNode;
-   children: React.ReactNode;
-}
-
-interface State
-{
-   hasError: boolean;
-}
-
-/*******************************************************************************
- ** Component that you can wrap around other components that might throw an error,
- ** to give some isolation, rather than breaking a whole page.
- ** Credit: https://medium.com/@bobjunior542/how-to-use-error-boundaries-in-react-js-with-typescript-ee90ec814bf1
- *******************************************************************************/
-class ErrorBoundary extends Component<Props, State>
-{
-   /***************************************************************************
-    *
-    ***************************************************************************/
-   constructor(props: Props)
-   {
-      super(props);
-      this.state = {hasError: false};
-   }
-
-   /***************************************************************************
-    *
-    ***************************************************************************/
-   componentDidCatch(error: Error, errorInfo: ErrorInfo)
-   {
-      console.error("ErrorBoundary caught an error: ", error, errorInfo);
-      this.setState({hasError: true});
-   }
-
-   /***************************************************************************
-    *
-    ***************************************************************************/
-   render()
-   {
-      if (this.state.hasError)
-      {
-         return this.props.errorElement ?? <span>(Error)</span>;
-      }
-
-      return this.props.children;
-   }
-}
-
-export default ErrorBoundary;

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

@@ -35,7 +35,6 @@ import DialogTitle from "@mui/material/DialogTitle";
 import Grid from "@mui/material/Grid";
 import Icon from "@mui/material/Icon";
 import TextField from "@mui/material/TextField";
-import {any} from "prop-types";
 import React, {useState} from "react";
 import {useNavigate} from "react-router-dom";
 import {QCancelButton} from "qqq/components/buttons/DefaultButtons";
@@ -62,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);
    }
@@ -72,56 +71,44 @@ function hasGotoFieldNames(tableMetaData: QTableMetaData): boolean
 
 function GotoRecordDialog(props: Props): JSX.Element
 {
-   ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
-   // this is an array of array of fields.                                                                      //
-   // that is - each entry in the top-level array is a set of fields that can be used together to goto a record //
-   // such as (pkey), (ukey-field1,ukey-field2).                                                                //
-   ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
-   const options: 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++)
          {
-            const option: QFieldMetaData[] = [];
-            options.push(option);
-            for (let j = 0; j < mdbMetaData.gotoFieldNames[i].length; j++)
+            // todo - multi-field keys!!
+            let fieldName = mdbMetaData.gotoFieldNames[i][0];
+            let field = props.tableMetaData.fields.get(fieldName);
+            if(field)
             {
-               let fieldName = mdbMetaData.gotoFieldNames[i][j];
-               let field = props.tableMetaData.fields.get(fieldName);
-               if (field)
-               {
-                  option.push(field);
+               fields.push(field);
 
-                  if (pkey != null && field.name == pkey.name)
-                  {
-                     addedPkey = true;
-                  }
+               if(field.name == pkey.name)
+               {
+                  addedPkey = true;
                }
             }
          }
       }
    }
 
-   //////////////////////////////////////////////////////////////////////////////////////////
-   // if pkey wasn't in the gotoField options meta-data, go ahead add it as an option here //
-   //////////////////////////////////////////////////////////////////////////////////////////
-   if (pkey && !addedPkey)
+   if(pkey && !addedPkey)
    {
-      options.unshift([pkey]);
+      fields.unshift(pkey);
    }
 
    const makeInitialValues = () =>
    {
-      const rs = {} as { [field: string]: string };
-      options.forEach((option) => option.forEach((field) => rs[field.name] = ""));
+      const rs = {} as {[field: string]: string};
+      fields.forEach((field) => rs[field.name] = "");
       return (rs);
-   };
+   }
 
    const [error, setError] = useState("");
    const [values, setValues] = useState(makeInitialValues());
@@ -131,91 +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 parts = targetId?.split(/-/);
-         const index = parts[1];
+         const index = targetId?.replaceAll("gotoInput-", "");
          document.getElementById("gotoButton-" + index).click();
       }
-   };
+   }
 
-
-   /***************************************************************************
-   ** event handler for close button
-   ***************************************************************************/
    const closeRequested = () =>
    {
-      if (props.mayClose)
+      if(props.mayClose)
       {
          close();
       }
-   };
-
-
-   /*******************************************************************************
-    ** function to say if an option's submit button should be disabled
-    *******************************************************************************/
-   const isOptionSubmitButtonDisabled = (optionIndex: number) =>
-   {
-      let anyFieldsInThisOptionHaveAValue = false;
-
-      options[optionIndex].forEach((field) =>
-      {
-         if(values[field.name])
-         {
-            anyFieldsInThisOptionHaveAValue = true;
-         }
-      })
-
-      if(!anyFieldsInThisOptionHaveAValue)
-      {
-         return (true);
-      }
-      return (false);
    }
 
-
-   /***************************************************************************
-   ** event handler for clicking an 'option's go/submit button
-   ***************************************************************************/
-   const optionGoClicked = async (optionIndex: number) =>
+   const goClicked = async (fieldName: string) =>
    {
       setError("");
-
-      const criteria: QFilterCriteria[] = [];
-      const queryStringParts: string[] = [];
-      options[optionIndex].forEach((field) =>
-      {
-         criteria.push(new QFilterCriteria(field.name, QCriteriaOperator.EQUALS, [values[field.name]]))
-         queryStringParts.push(`${field.name}=${encodeURIComponent(values[field.name])}`)
-      })
-
-      const filter = new QQueryFilter(criteria, 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.");
@@ -223,42 +168,28 @@ function GotoRecordDialog(props: Props): JSX.Element
          }
          else if (queryResult.length == 1)
          {
-            if(options[optionIndex].length == 1 && options[optionIndex][0].name == pkey?.name)
-            {
-               /////////////////////////////////////////////////
-               // navigate by pkey, if that's how we searched //
-               /////////////////////////////////////////////////
-               navigate(`${props.metaData.getTablePathByName(props.tableMetaData.name)}/${encodeURIComponent(queryResult[0].values.get(props.tableMetaData.primaryKeyField))}`);
-            }
-            else
-            {
-               /////////////////////////////////
-               // else navigate by unique-key //
-               /////////////////////////////////
-               navigate(`${props.metaData.getTablePathByName(props.tableMetaData.name)}/key/?${queryStringParts.join("&")}`);
-            }
-
+            navigate(`${props.metaData.getTablePathByName(props.tableMetaData.name)}/${encodeURIComponent(queryResult[0].values.get(props.tableMetaData.primaryKeyField))}`);
             close();
          }
          else
          {
-            setError("More than 1 record was found...");
+            setError("More than 1 record found...");
             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 (options.length == 0 && !error)
+      if (fields.length == 0 && !error)
       {
-         setError("This table is not configured for this feature.");
+         setError("This table is not configured for this feature.")
       }
    }
 
@@ -269,38 +200,31 @@ function GotoRecordDialog(props: Props): JSX.Element
          <DialogContent>
             {props.subHeader}
             {
-               options.map((option, optionIndex) =>
-                  <Box key={optionIndex}>
-                     {
-                        option.map((field, index) =>
-                           (
-                              <Grid key={field.name} container alignItems="center" py={1}>
-                                 <Grid item xs={3} textAlign="right" pr={2}>
-                                    {field.label}
-                                 </Grid>
-                                 <Grid item xs={6}>
-                                    <TextField
-                                       id={`gotoInput-${optionIndex}-${index}`}
-                                       autoFocus={optionIndex == 0 && index == 0}
-                                       autoComplete="off"
-                                       inputProps={{width: "100%"}}
-                                       onChange={(e) => handleChange(field.name, e.target.value)}
-                                       value={values[field.name]}
-                                       sx={{width: "100%"}}
-                                       onFocus={event => event.target.select()}
-                                    />
-                                 </Grid>
-                                 <Grid item xs={1} pl={2}>
-                                    {
-                                       (index == option.length - 1) &&
-                                       <MDButton id={`gotoButton-${optionIndex}`} type="submit" variant="gradient" color="info" size="small" onClick={() => optionGoClicked(optionIndex)} fullWidth startIcon={<Icon>double_arrow</Icon>} disabled={isOptionSubmitButtonDisabled(optionIndex)}>Go</MDButton>
-                                    }
-                                 </Grid>
-                              </Grid>
-                           ))
-                     }
-                  </Box>
-               )
+               fields.map((field, index) =>
+                  (
+                     <Grid key={field.name} container alignItems="center" py={1}>
+                        <Grid item xs={3} textAlign="right" pr={2}>
+                           {field.label}
+                        </Grid>
+                        <Grid item xs={6}>
+                           <TextField
+                              id={`gotoInput-${index}`}
+                              autoFocus={index == 0}
+                              autoComplete="off"
+                              inputProps={{width: "100%"}}
+                              onChange={(e) => handleChange(field.name, e.target.value)}
+                              value={values[field.name]}
+                              sx={{width: "100%"}}
+                              onFocus={event => event.target.select()}
+                           />
+                        </Grid>
+                        <Grid item xs={1} pl={2}>
+                           <MDButton id={`gotoButton-${index}`} type="submit" variant="gradient" color="info" size="small" onClick={() => goClicked(field.name)} fullWidth startIcon={<Icon>double_arrow</Icon>} disabled={`${values[field.name]}`.length == 0}>
+                              Go
+                           </MDButton>
+                        </Grid>
+                     </Grid>
+                  ))
             }
             {
                error &&
@@ -320,7 +244,7 @@ function GotoRecordDialog(props: Props): JSX.Element
                : <Box>&nbsp;</Box>
          }
       </Dialog>
-   );
+   )
 }
 
 interface GotoRecordButtonProps
@@ -342,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()
    {
@@ -358,7 +282,7 @@ export function GotoRecordButton(props: GotoRecordButtonProps): JSX.Element
    return (
       <React.Fragment>
          {
-            props.buttonVisible && hasGotoFieldNames(props.tableMetaData) && <Button onClick={openGoto} sx={{whiteSpace: "nowrap"}}>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

@@ -22,14 +22,13 @@
 import {QHelpContent} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QHelpContent";
 import Box from "@mui/material/Box";
 import parse from "html-react-parser";
-import ErrorBoundary from "qqq/components/misc/ErrorBoundary";
 import React, {useContext} from "react";
 import Markdown from "react-markdown";
 import QContext from "QContext";
 
 interface Props
 {
-   helpContents: null | QHelpContent | QHelpContent[];
+   helpContents: QHelpContent[];
    roles: string[];
    heading?: string;
    helpContentKey?: string;
@@ -94,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;
 }
 
 
@@ -125,11 +106,9 @@ 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;
-   let errorContent = "Error rendering help content.";
    if (helpHelpActive)
    {
       if (!selectedHelpContent)
@@ -137,7 +116,6 @@ function HelpContent({helpContents, roles, heading, helpContentKey}: Props): JSX
          selectedHelpContent = new QHelpContent({content: ""});
       }
       content = selectedHelpContent.content + ` [${helpContentKey ?? "?"}]`;
-      errorContent += ` [${helpContentKey ?? "?"}]`;
    }
    else if(selectedHelpContent)
    {
@@ -151,9 +129,7 @@ function HelpContent({helpContents, roles, heading, helpContentKey}: Props): JSX
    {
       return <Box display="inline" className="helpContent">
          {heading && <span className="header">{heading}</span>}
-         <ErrorBoundary errorElement={<i>{errorContent}</i>}>
-            {formatHelpContent(content, selectedHelpContent.format)}
-         </ErrorBoundary>
+         {formatHelpContent(content, selectedHelpContent.format)}
       </Box>;
    }
 

src/qqq/components/misc/RecordSidebar.tsx

@@ -22,7 +22,7 @@
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QTableSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableSection";
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import {Box} from "@mui/material";
+import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 import Icon from "@mui/material/Icon";
 import {Theme} from "@mui/material/styles";
@@ -76,12 +76,12 @@ function QRecordSidebar({tableSections, widgetMetaDataList, light, stickyTop}: P
 
 
    return (
-      <Card sx={{borderRadius: "0.75rem", position: "sticky", top: stickyTop, overflow: "hidden", maxHeight: "calc(100vh - 2rem)"}}>
-         <Box component="ul" display="flex" flexDirection="column" p={2} m={0} sx={{listStyle: "none", overflow: "auto", height: "100%"}}>
+      <Card sx={{borderRadius: "0.75rem", position: "sticky", top: stickyTop, overflow: "auto", maxHeight: "calc(100vh - 2rem)"}}>
+         <Box component="ul" display="flex" flexDirection="column" p={2} m={0} sx={{listStyle: "none"}}>
             {
                sidebarEntries ? sidebarEntries.map((entry: SidebarEntry, key: number) => (
 
-                  <Box key={`section-link-${entry.name}`} onClick={() => document.getElementById(entry.name).scrollIntoView()} sx={{cursor: "pointer"}}>
+                  <HashLink key={`section-link-${entry.name}`} to={`#${entry.name}`}>
                      <Box key={`section-${entry.name}`} component="li" pt={key === 0 ? 0 : 1}>
                         <MDTypography
                            variant="button"
@@ -112,7 +112,7 @@ function QRecordSidebar({tableSections, widgetMetaDataList, light, stickyTop}: P
 
                         </MDTypography>
                      </Box>
-                  </Box>
+                  </HashLink>
                )) : null
             }
          </Box>

src/qqq/components/misc/SavedViews.tsx

@@ -25,7 +25,7 @@ import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QT
 import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete";
 import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-import {Alert, Button} 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";
@@ -40,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
 {
@@ -60,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);
@@ -91,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 FilterAndColumnsSetupWidget).  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);
@@ -116,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;
    }
@@ -132,7 +120,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
     *******************************************************************************/
    async function loadSavedViews()
    {
-      if (!tableMetaData)
+      if (! tableMetaData)
       {
          return;
       }
@@ -142,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
     *******************************************************************************/
@@ -170,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
     *******************************************************************************/
@@ -188,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("");
             }
@@ -203,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
     *******************************************************************************/
@@ -263,7 +211,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
             setSaveFilterPopupOpen(false);
             setSaveOptionsOpen(false);
 
-            await (async () =>
+            await(async() =>
             {
                handleDropdownOptionClick(CLEAR_OPTION);
             })();
@@ -279,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"));
                }
@@ -301,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)
                {
@@ -318,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;
          }
@@ -337,6 +279,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    }
 
 
+
    /*******************************************************************************
     ** hides/shows the save options
     *******************************************************************************/
@@ -346,6 +289,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    };
 
 
+
    /*******************************************************************************
     ** closes save options menu (on clickaway)
     *******************************************************************************/
@@ -360,6 +304,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    };
 
 
+
    /*******************************************************************************
     ** stores the current dialog input text to state
     *******************************************************************************/
@@ -369,6 +314,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    };
 
 
+
    /*******************************************************************************
     ** closes current dialog
     *******************************************************************************/
@@ -378,6 +324,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    };
 
 
+
    /*******************************************************************************
     ** make a request to the backend for various savedView processes
     *******************************************************************************/
@@ -386,7 +333,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
       /////////////////////////
       // fetch saved filters //
       /////////////////////////
-      let savedViews = [] as QRecord[];
+      let savedViews = [] as QRecord[]
       try
       {
          //////////////////////////////////////////////////////////////////
@@ -397,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++)
                {
@@ -414,7 +361,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
       }
       catch (e)
       {
-         throw (e);
+         throw(e);
       }
 
       return (savedViews);
@@ -423,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}
@@ -456,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>
    );
 
@@ -567,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)
       {
@@ -595,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);
          }
@@ -640,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>
@@ -653,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"}}>
@@ -683,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>
@@ -754,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>
                      )
                   }
@@ -773,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>
                                  )
                               }
@@ -796,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>
                            )
                         )
@@ -811,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/AssignFilterVariable.tsx

@@ -1,66 +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/>.
- */
-
-import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
-import {FilterVariableExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/FilterVariableExpression";
-import Box from "@mui/material/Box";
-import Icon from "@mui/material/Icon";
-import Tooltip from "@mui/material/Tooltip";
-import CriteriaDateField from "qqq/components/query/CriteriaDateField";
-import React, {SyntheticEvent, useState} from "react";
-
-
-export type Expression = FilterVariableExpression;
-
-
-interface AssignFilterButtonProps
-{
-   valueIndex: number;
-   field: QFieldMetaData;
-   valueChangeHandler: (event: React.ChangeEvent | SyntheticEvent, valueIndex?: number | "all", newValue?: any) => void;
-}
-
-CriteriaDateField.defaultProps = {
-   valueIndex: 0,
-   label: "Value",
-   idPrefix: "value-"
-};
-
-export default function AssignFilterVariable({valueIndex, field, valueChangeHandler}: AssignFilterButtonProps): JSX.Element
-{
-   const [isValueAVariable, setIsValueAVariable] = useState(false);
-
-   const handleVariableButtonOnClick = () =>
-   {
-      setIsValueAVariable(!isValueAVariable);
-      const expression = new FilterVariableExpression({fieldName: field.name, valueIndex: valueIndex});
-      valueChangeHandler(null, valueIndex, expression);
-   };
-
-   return <Box display="flex" alignItems="flex-end">
-      <Box>
-         <Tooltip title={`Use a variable as the value for the ${field.label} field`} placement="bottom">
-            <Icon fontSize="small" color="info" sx={{mx: 0.25, cursor: "pointer", position: "relative", top: "2px"}} onClick={handleVariableButtonOnClick}>functions</Icon>
-         </Tooltip>
-      </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,36 +74,12 @@ interface BasicAndAdvancedQueryControlsProps
    /////////////////////////////////////////////////////////////////////////////////////////////
    queryFilterJSON: string;
 
-   queryScreenUsage: QueryScreenUsage;
-
-   allowVariables?: boolean;
-
    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.
@@ -116,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, queryScreenUsage} = 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);
@@ -131,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 //
    //////////////////////////////////////////////////////////////////////////////////
@@ -154,7 +122,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
          {
             return (mode);
          }
-      };
+      }
    });
 
 
@@ -208,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;
@@ -217,9 +185,9 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
          }
       }
 
-      if (doClearCriteria)
+      if(doClearCriteria)
       {
-         if (found)
+         if(found)
          {
             queryFilter.criteria.splice(foundIndex, 1);
             setQueryFilter(queryFilter);
@@ -227,9 +195,9 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
          return;
       }
 
-      if (!found)
+      if(!found)
       {
-         if (!queryFilter.criteria)
+         if(!queryFilter.criteria)
          {
             queryFilter.criteria = [];
          }
@@ -237,9 +205,9 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
          found = true;
       }
 
-      if (found)
+      if(found)
       {
-         clearTimeout(debounceTimeout);
+         clearTimeout(debounceTimeout)
          debounceTimeout = setTimeout(() =>
          {
             setQueryFilter(queryFilter);
@@ -259,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]);
       }
@@ -286,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 //
@@ -308,7 +276,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    {
       setAddQuickFilterMenu(event.currentTarget);
       setAddQuickFilterOpenCounter(addQuickFilterOpenCounter + 1);
-   };
+   }
 
 
    /*******************************************************************************
@@ -317,7 +285,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    const closeAddQuickFilterMenu = () =>
    {
       setAddQuickFilterMenu(null);
-   };
+   }
 
 
    /*******************************************************************************
@@ -338,7 +306,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
       const fieldName = newValue ? newValue.fieldName : null;
       if (fieldName)
       {
-         if (defaultQuickFilterFieldNameMap[fieldName])
+         if(defaultQuickFilterFieldNameMap[fieldName])
          {
             return;
          }
@@ -354,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 //
@@ -378,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");
-   };
+   }
 
 
    /*******************************************************************************
@@ -393,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();
    };
 
 
@@ -420,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>
+      );
    };
 
 
@@ -430,7 +434,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    {
       if (newValue)
       {
-         if (newValue == "basic")
+         if(newValue == "basic")
          {
             ////////////////////////////////////////////////////////////////////////////////
             // we're always allowed to go to advanced -                                   //
@@ -439,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;
             }
 
@@ -466,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)
       {
@@ -486,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++)
          {
@@ -497,7 +496,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
             }
          }
       }
-   };
+   }
 
 
    /*******************************************************************************
@@ -509,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;
-   };
+   }
 
 
    /*******************************************************************************
@@ -533,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();
-   };
+   }
 
 
    /*******************************************************************************
@@ -552,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);
       }
-   };
+   }
 
 
    /*******************************************************************************
@@ -571,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);
@@ -596,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;
@@ -678,14 +670,12 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
 
                               return (<QuickFilter
                                  key={fieldName}
-                                 allowVariables={props.allowVariables}
                                  fullFieldName={fieldName}
                                  tableMetaData={tableMetaData}
                                  updateCriteria={updateQuickCriteria}
                                  criteriaParam={getQuickCriteriaParam(fieldName)}
                                  fieldMetaData={field}
                                  defaultOperator={defaultOperator}
-                                 queryScreenUsage={queryScreenUsage}
                                  handleRemoveQuickFilterField={null} />);
                            })
                         }
@@ -704,9 +694,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
                                  updateCriteria={updateQuickCriteria}
                                  criteriaParam={getQuickCriteriaParam(fieldName)}
                                  fieldMetaData={field}
-                                 allowVariables={props.allowVariables}
                                  defaultOperator={defaultOperator}
-                                 queryScreenUsage={queryScreenUsage}
                                  handleRemoveQuickFilterField={handleRemoveQuickFilterField} />);
                            })
                         }
@@ -743,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>
@@ -775,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/CriteriaDateField.tsx

@@ -21,7 +21,6 @@
 
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
-import {FilterVariableExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/FilterVariableExpression";
 import {NowExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/NowExpression";
 import {NowWithOffsetExpression, NowWithOffsetOperator, NowWithOffsetUnit} from "@kingsrook/qqq-frontend-core/lib/model/query/NowWithOffsetExpression";
 import {ThisOrLastPeriodExpression, ThisOrLastPeriodOperator, ThisOrLastPeriodUnit} from "@kingsrook/qqq-frontend-core/lib/model/query/ThisOrLastPeriodExpression";
@@ -35,14 +34,14 @@ import MenuItem from "@mui/material/MenuItem";
 import {styled} from "@mui/material/styles";
 import TextField from "@mui/material/TextField";
 import Tooltip, {tooltipClasses, TooltipProps} from "@mui/material/Tooltip";
+import React, {SyntheticEvent, useEffect, useReducer, useState} from "react";
 import AdvancedDateTimeFilterValues from "qqq/components/query/AdvancedDateTimeFilterValues";
 import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
 import {EvaluatedExpression} from "qqq/components/query/EvaluatedExpression";
 import {makeTextField} from "qqq/components/query/FilterCriteriaRowValues";
-import React, {SyntheticEvent, useReducer, useState} from "react";
 
 
-export type Expression = NowWithOffsetExpression | ThisOrLastPeriodExpression | NowExpression | FilterVariableExpression;
+export type Expression = NowWithOffsetExpression | ThisOrLastPeriodExpression | NowExpression;
 
 
 interface CriteriaDateFieldProps
@@ -53,7 +52,6 @@ interface CriteriaDateFieldProps
    field: QFieldMetaData;
    criteria: QFilterCriteriaWithId;
    valueChangeHandler: (event: React.ChangeEvent | SyntheticEvent, valueIndex?: number | "all", newValue?: any) => void;
-   allowVariables?: boolean;
 }
 
 CriteriaDateField.defaultProps = {
@@ -62,30 +60,19 @@ CriteriaDateField.defaultProps = {
    idPrefix: "value-"
 };
 
-export const NoWrapTooltip = styled(({className, children, ...props}: TooltipProps) => (
-   <Tooltip {...props} classes={{popper: className}}>{children}</Tooltip>
-))({
-   [`& .${tooltipClasses.tooltip}`]: {
-      whiteSpace: "nowrap"
-   },
-});
-
-export default function CriteriaDateField({valueIndex, label, idPrefix, field, criteria, valueChangeHandler, allowVariables}: CriteriaDateFieldProps): JSX.Element
+export default function CriteriaDateField({valueIndex, label, idPrefix, field, criteria, valueChangeHandler}: CriteriaDateFieldProps): JSX.Element
 {
-   const [relativeDateTimeOpen, setRelativeDateTimeOpen] = useState(false);
    const [relativeDateTimeMenuAnchorElement, setRelativeDateTimeMenuAnchorElement] = useState(null);
-   const [forceAdvancedDateTimeDialogOpen, setForceAdvancedDateTimeDialogOpen] = useState(false);
+   const [forceAdvancedDateTimeDialogOpen, setForceAdvancedDateTimeDialogOpen] = useState(false)
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
    const openRelativeDateTimeMenu = (event: React.MouseEvent<HTMLElement>) =>
    {
-      setRelativeDateTimeOpen(true);
       setRelativeDateTimeMenuAnchorElement(event.currentTarget);
    };
 
    const closeRelativeDateTimeMenu = () =>
    {
-      setRelativeDateTimeOpen(false);
       setRelativeDateTimeMenuAnchorElement(null);
    };
 
@@ -150,12 +137,20 @@ export default function CriteriaDateField({valueIndex, label, idPrefix, field, c
    const isExpression = criteria.values && criteria.values[valueIndex] && criteria.values[valueIndex].type;
    const currentExpression = isExpression ? criteria.values[valueIndex] : null;
 
+   const NoWrapTooltip = styled(({className, children, ...props}: TooltipProps) => (
+      <Tooltip {...props} classes={{popper: className}}>{children}</Tooltip>
+   ))({
+      [`& .${tooltipClasses.tooltip}`]: {
+         whiteSpace: "nowrap"
+      },
+   });
+
    const tooltipMenuItemFromExpression = (valueIndex: number, tooltipPlacement: "left" | "right", expression: Expression) =>
    {
       let startOfPrefix = "";
-      if (expression.type == "ThisOrLastPeriod")
+      if(expression.type == "ThisOrLastPeriod")
       {
-         if (field.type == QFieldType.DATE_TIME || expression.timeUnit != "DAYS")
+         if(field.type == QFieldType.DATE_TIME || expression.timeUnit != "DAYS")
          {
             startOfPrefix = "start of ";
          }
@@ -196,120 +191,84 @@ export default function CriteriaDateField({valueIndex, label, idPrefix, field, c
       setTimeout(() => setForceAdvancedDateTimeDialogOpen(false), 100);
    }
 
-   const makeFilterVariableTextField = (expression: FilterVariableExpression, valueIndex: number = 0, label = "Value", idPrefix = "value-") =>
-   {
-      const clearValue = (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>, index: number) =>
-      {
-         valueChangeHandler(event, index, "");
-         document.getElementById(`${idPrefix}${criteria.id}`).focus();
-      };
-
-      const inputProps2: any = {};
-      inputProps2.endAdornment = (
-         <InputAdornment position="end">
-            <IconButton sx={{visibility: expression ? "visible" : "hidden"}} onClick={(event) => clearValue(event, valueIndex)}>
-               <Icon>closer</Icon>
-            </IconButton>
-         </InputAdornment>
-      );
-
-      return <NoWrapTooltip title={<EvaluatedExpression field={field} expression={expression} />} placement="bottom" enterDelay={1000} sx={{marginLeft: "-75px !important", marginTop: "-8px !important"}}><TextField
-         id={`${idPrefix}${criteria.id}`}
-         label={label}
-         variant="standard"
-         autoComplete="off"
-         InputProps={{disabled: true, readOnly: true, unselectable: "off", ...inputProps2}}
-         InputLabelProps={{shrink: true}}
-         value="${VARIABLE}"
-         fullWidth
-      /></NoWrapTooltip>;
-   };
-
-
    return <Box display="flex" alignItems="flex-end">
       {
-         isExpression ?
-            currentExpression?.type == "FilterVariableExpression" ? (
-               makeFilterVariableTextField(criteria.values[valueIndex], valueIndex, label, idPrefix)
-            ) : (
-               makeDateTimeExpressionTextField(criteria.values[valueIndex], valueIndex, label, idPrefix)
-            )
-            : makeTextField(field, criteria, valueChangeHandler, valueIndex, label, idPrefix, allowVariables)
+         isExpression ? makeDateTimeExpressionTextField(criteria.values[valueIndex], valueIndex, label, idPrefix)
+            : makeTextField(field, criteria, valueChangeHandler, valueIndex, label, idPrefix)
       }
-      {
-         (!isExpression || currentExpression?.type != "FilterVariableExpression") && (
-            <><Box>
-               <Tooltip title={`Choose a common relative ${field.type == QFieldType.DATE ? "date" : "date-time"} expression`} placement="bottom">
-                  <Icon fontSize="small" color="info" sx={{mx: 0.25, cursor: "pointer", position: "relative", top: "2px"}} onClick={openRelativeDateTimeMenu}>date_range</Icon>
-               </Tooltip>
-               <Menu
-                  open={relativeDateTimeOpen}
-                  anchorEl={relativeDateTimeMenuAnchorElement}
-                  transformOrigin={{horizontal: "left", vertical: "top"}}
-                  onClose={closeRelativeDateTimeMenu}
-               >
-                  {field.type == QFieldType.DATE ?
-                     <Box display="flex">
-                        <Box>
-                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 7, "DAYS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 14, "DAYS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 30, "DAYS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 90, "DAYS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 180, "DAYS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 1, "YEARS"))}
-                           <Divider />
-                           <Tooltip title="Define a custom expression" placement="left">
-                              <MenuItem onClick={doForceAdvancedDateTimeDialogOpen}>Custom</MenuItem>
-                           </Tooltip>
-                        </Box>
-                        <Box>
-                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "DAYS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "DAYS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "WEEKS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "WEEKS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "MONTHS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "MONTHS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "YEARS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "YEARS"))}
-                        </Box>
+      <Box>
+         <Tooltip title={`Choose a common relative ${field.type == QFieldType.DATE ? "date" : "date-time"} expression`} placement="bottom">
+            <Icon fontSize="small" color="info" sx={{mx: 0.25, cursor: "pointer", position: "relative", top: "2px"}} onClick={openRelativeDateTimeMenu}>date_range</Icon>
+         </Tooltip>
+         <Menu
+            open={relativeDateTimeMenuAnchorElement}
+            anchorEl={relativeDateTimeMenuAnchorElement}
+            transformOrigin={{horizontal: "left", vertical: "top"}}
+            onClose={closeRelativeDateTimeMenu}
+         >
+            {
+               field.type == QFieldType.DATE ?
+                  <Box display="flex">
+                     <Box>
+                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 7, "DAYS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 14, "DAYS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 30, "DAYS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 90, "DAYS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 180, "DAYS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 1, "YEARS"))}
+                        <Divider />
+                        <Tooltip title="Define a custom expression" placement="left">
+                           <MenuItem onClick={doForceAdvancedDateTimeDialogOpen}>Custom</MenuItem>
+                        </Tooltip>
                      </Box>
-                     :
-                     <Box display="flex">
-                        <Box>
-                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 1, "HOURS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 12, "HOURS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 24, "HOURS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 7, "DAYS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 14, "DAYS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 30, "DAYS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 90, "DAYS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 180, "DAYS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 1, "YEARS"))}
-                           <Divider />
-                           <Tooltip title="Define a custom expression" placement="left">
-                              <MenuItem onClick={doForceAdvancedDateTimeDialogOpen}>Custom</MenuItem>
-                           </Tooltip>
-                        </Box>
-                        <Box>
-                           {tooltipMenuItemFromExpression(valueIndex, "right", newNowExpression())}
-                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "HOURS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "HOURS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "DAYS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "DAYS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "WEEKS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "WEEKS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "MONTHS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "MONTHS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "YEARS"))}
-                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "YEARS"))}
-                        </Box>
-                     </Box>}
-               </Menu>
-            </Box><Box>
-               <AdvancedDateTimeFilterValues type={field.type} expression={currentExpression} onSave={(expression: any) => saveNewDateTimeExpression(valueIndex, expression)} forcedOpen={forceAdvancedDateTimeDialogOpen} />
-            </Box></>
-         )
-      }
+                     <Box>
+                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "DAYS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "DAYS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "WEEKS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "WEEKS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "MONTHS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "MONTHS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "YEARS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "YEARS"))}
+                     </Box>
+                  </Box>
+                  :
+                  <Box display="flex">
+                     <Box>
+                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 1, "HOURS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 12, "HOURS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 24, "HOURS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 7, "DAYS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 14, "DAYS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 30, "DAYS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 90, "DAYS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 180, "DAYS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 1, "YEARS"))}
+                        <Divider />
+                        <Tooltip title="Define a custom expression" placement="left">
+                           <MenuItem onClick={doForceAdvancedDateTimeDialogOpen}>Custom</MenuItem>
+                        </Tooltip>
+                     </Box>
+                     <Box>
+                        {tooltipMenuItemFromExpression(valueIndex, "right", newNowExpression())}
+                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "HOURS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "HOURS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "DAYS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "DAYS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "WEEKS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "WEEKS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "MONTHS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "MONTHS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "YEARS"))}
+                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "YEARS"))}
+                     </Box>
+                  </Box>
+            }
+         </Menu>
+      </Box>
+      <Box>
+         <AdvancedDateTimeFilterValues type={field.type} expression={currentExpression} onSave={(expression: any) => saveNewDateTimeExpression(valueIndex, expression)} forcedOpen={forceAdvancedDateTimeDialogOpen} />
+      </Box>
    </Box>;
 }
 

src/qqq/components/query/CustomColumnsPanel.tsx

@@ -21,9 +21,7 @@
 
 import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-
-import {FormControlLabel, FormGroup} from "@mui/material";
-import Box from "@mui/material/Box";
+import {Box, FormControlLabel, FormGroup} from "@mui/material";
 import Button from "@mui/material/Button";
 import Icon from "@mui/material/Icon";
 import IconButton from "@mui/material/IconButton";
@@ -58,7 +56,7 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
       const someRef = createRef();
 
       const textRef = useRef(null);
-      const [didInitialFocus, setDidInitialFocus] = useState(false);
+      const [didInitialFocus, setDidInitialFocus] = useState(false)
 
       const [openGroups, setOpenGroups] = useState(props.initialOpenedGroups || {});
       const openGroupsBecauseOfFilter = {} as { [name: string]: boolean };
@@ -73,9 +71,9 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
 
       console.log(`Open groups: ${JSON.stringify(openGroups)}`);
 
-      if (!didInitialFocus)
+      if(!didInitialFocus)
       {
-         if (textRef.current)
+         if(textRef.current)
          {
             textRef.current.select();
             setDidInitialFocus(true);
@@ -191,11 +189,11 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
       ///////////////////////////////////////////////////////////////////////////////////////////////////////
       // always sort columns by label.  note, in future may offer different sorts - here's where to do it. //
       ///////////////////////////////////////////////////////////////////////////////////////////////////////
-      const sortedColumns = [...columns];
+      const sortedColumns = [... columns];
       sortedColumns.sort((a, b): number =>
       {
          return a.headerName.localeCompare(b.headerName);
-      });
+      })
 
       for (let i = 0; i < sortedColumns.length; i++)
       {
@@ -363,7 +361,7 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
       const changeFilterText = (newValue: string) =>
       {
          setFilterText(newValue);
-         props.filterTextChanger(newValue);
+         props.filterTextChanger(newValue)
       };
 
       const filterTextChanged = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) =>

src/qqq/components/query/CustomFilterPanel.tsx

@@ -28,8 +28,8 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button/Button";
 import Icon from "@mui/material/Icon/Icon";
 import {GridFilterPanelProps, GridSlotsComponentsProps} from "@mui/x-data-grid-pro";
-import {FilterCriteriaRow, getDefaultCriteriaValue} from "qqq/components/query/FilterCriteriaRow";
 import React, {forwardRef, useReducer} from "react";
+import {FilterCriteriaRow, getDefaultCriteriaValue} from "qqq/components/query/FilterCriteriaRow";
 
 
 declare module "@mui/x-data-grid"
@@ -49,7 +49,7 @@ declare module "@mui/x-data-grid"
 
 export class QFilterCriteriaWithId extends QFilterCriteria
 {
-   id: number;
+   id: number
 }
 
 
@@ -62,7 +62,6 @@ export const CustomFilterPanel = forwardRef<any, GridFilterPanelProps>(
       const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
       const queryFilter = props.queryFilter;
-
       // console.log(`CustomFilterPanel: filter: ${JSON.stringify(queryFilter)}`);
 
       function focusLastField()
@@ -125,7 +124,7 @@ export const CustomFilterPanel = forwardRef<any, GridFilterPanelProps>(
          }
       }
 
-      if (queryFilter.criteria.length == 1 && !queryFilter.criteria[0].fieldName)
+      if(queryFilter.criteria.length == 1 && !queryFilter.criteria[0].fieldName)
       {
          focusLastField();
       }
@@ -143,7 +142,7 @@ export const CustomFilterPanel = forwardRef<any, GridFilterPanelProps>(
       {
          queryFilter.criteria[index] = newCriteria;
 
-         clearTimeout(debounceTimeout);
+         clearTimeout(debounceTimeout)
          debounceTimeout = setTimeout(() => props.updateFilter(queryFilter), needDebounce ? 500 : 1);
 
          forceUpdate();
@@ -179,8 +178,6 @@ export const CustomFilterPanel = forwardRef<any, GridFilterPanelProps>(
                            updateCriteria={(newCriteria, needDebounce) => updateCriteria(newCriteria, index, needDebounce)}
                            removeCriteria={() => removeCriteria(index)}
                            updateBooleanOperator={(newValue) => updateBooleanOperator(newValue)}
-                           allowVariables={props.allowVariables}
-                           queryScreenUsage={props.queryScreenUsage}
                         />
                         {/*JSON.stringify(criteria)*/}
                      </Box>

src/qqq/components/query/EvaluatedExpression.tsx

@@ -21,9 +21,9 @@
 
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
+import React, {useEffect, useState} from "react";
 import {Expression} from "qqq/components/query/CriteriaDateField";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
-import React, {useEffect, useState} from "react";
 
 /*******************************************************************************
  ** Helper component to show value inside tooltips that ticks up every second.
@@ -57,11 +57,6 @@ const HOUR_MS = 60 * 60 * 1000;
 const DAY_MS = 24 * 60 * 60 * 1000;
 const evaluateExpression = (time: Date, field: QFieldMetaData, expression: Expression): string =>
 {
-   if (expression.type == "FilterVariableExpression")
-   {
-      return (expression.toString());
-   }
-
    let rs: Date = null;
    if (expression.type == "NowWithOffset")
    {

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,11 +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 {QueryScreenUsage} from "qqq/pages/records/query/RecordQuery";
 import FilterUtils from "qqq/utils/qqq/FilterUtils";
-import React, {ReactNode, SyntheticEvent, useState} from "react";
 
 
 export enum ValueMode
@@ -73,7 +72,7 @@ export const getValueModeRequiredCount = (valueMode: ValueMode): number =>
       case ValueMode.PVS_MULTI:
          return (null);
    }
-};
+}
 
 export interface OperatorOption
 {
@@ -184,7 +183,7 @@ export const getOperatorOptions = (tableMetaData: QTableMetaData, fieldName: str
    }
 
    return (operatorOptions);
-};
+}
 
 
 interface FilterCriteriaRowProps
@@ -198,14 +197,13 @@ interface FilterCriteriaRowProps
    updateCriteria: (newCriteria: QFilterCriteria, needDebounce: boolean) => void;
    removeCriteria: () => void;
    updateBooleanOperator: (newValue: string) => void;
-   queryScreenUsage?: QueryScreenUsage;
-   allowVariables?: boolean;
 }
 
 FilterCriteriaRow.defaultProps =
-   {};
+   {
+   };
 
-export function validateCriteria(criteria: QFilterCriteria, operatorSelectedValue?: OperatorOption): { criteriaIsValid: boolean, criteriaStatusTooltip: string }
+export function validateCriteria(criteria: QFilterCriteria, operatorSelectedValue?: OperatorOption): {criteriaIsValid: boolean, criteriaStatusTooltip: string}
 {
    let criteriaIsValid = true;
    let criteriaStatusTooltip = "This condition is fully defined and is part of your filter.";
@@ -215,7 +213,7 @@ export function validateCriteria(criteria: QFilterCriteria, operatorSelectedValu
       return (value === null || value == undefined || String(value).trim() === "");
    }
 
-   if (!criteria)
+   if(!criteria)
    {
       criteriaIsValid = false;
       criteriaStatusTooltip = "This condition is not defined.";
@@ -268,7 +266,7 @@ export function validateCriteria(criteria: QFilterCriteria, operatorSelectedValu
    return {criteriaIsValid, criteriaStatusTooltip};
 }
 
-export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria, booleanOperator, updateCriteria, removeCriteria, updateBooleanOperator, queryScreenUsage, allowVariables}: FilterCriteriaRowProps): JSX.Element
+export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria, booleanOperator, updateCriteria, removeCriteria, updateBooleanOperator}: FilterCriteriaRowProps): JSX.Element
 {
    // console.log(`FilterCriteriaRow: criteria: ${JSON.stringify(criteria)}`);
    const [operatorSelectedValue, setOperatorSelectedValue] = useState(null as OperatorOption);
@@ -286,7 +284,7 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
    let defaultFieldValue;
    let field = null;
    let fieldTable = null;
-   if (criteria && criteria.fieldName)
+   if(criteria && criteria.fieldName)
    {
       [field, fieldTable] = FilterUtils.getField(tableMetaData, criteria.fieldName);
       if (field && fieldTable)
@@ -305,9 +303,9 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
 
          let newOperatorSelectedValue = operatorOptions.filter(option =>
          {
-            if (option.value == criteria.operator)
+            if(option.value == criteria.operator)
             {
-               if (option.implicitValues)
+               if(option.implicitValues)
                {
                   return (JSON.stringify(option.implicitValues) == JSON.stringify(criteria.values));
                }
@@ -318,7 +316,7 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
             }
             return (false);
          })[0];
-         if (newOperatorSelectedValue?.label !== operatorSelectedValue?.label)
+         if(newOperatorSelectedValue?.label !== operatorSelectedValue?.label)
          {
             setOperatorSelectedValue(newOperatorSelectedValue);
             setOperatorInputValue(newOperatorSelectedValue?.label);
@@ -381,12 +379,12 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
    {
       criteria.operator = newValue ? newValue.value : null;
 
-      if (newValue)
+      if(newValue)
       {
          setOperatorSelectedValue(newValue);
          setOperatorInputValue(newValue.label);
 
-         if (newValue.implicitValues)
+         if(newValue.implicitValues)
          {
             criteria.values = newValue.implicitValues;
          }
@@ -395,15 +393,15 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
          // we've seen cases where switching operators can sometimes put a null in as the first value... //
          // that just causes a bad time (e.g., null pointers in Autocomplete), so, get rid of that.      //
          //////////////////////////////////////////////////////////////////////////////////////////////////
-         if (criteria.values && criteria.values.length == 1 && criteria.values[0] == null)
+         if(criteria.values && criteria.values.length == 1 && criteria.values[0] == null)
          {
             criteria.values = [];
          }
 
-         if (newValue.valueMode && !newValue.implicitValues)
+         if(newValue.valueMode)
          {
             const requiredValueCount = getValueModeRequiredCount(newValue.valueMode);
-            if (requiredValueCount != null && criteria.values.length > requiredValueCount)
+            if(requiredValueCount != null && criteria.values.length > requiredValueCount)
             {
                criteria.values.splice(requiredValueCount);
             }
@@ -426,12 +424,12 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
       // @ts-ignore
       const value = newValue !== undefined ? newValue : event ? event.target.value : null;
 
-      if (!criteria.values)
+      if(!criteria.values)
       {
          criteria.values = [];
       }
 
-      if (valueIndex == "all")
+      if(valueIndex == "all")
       {
          criteria.values = value;
       }
@@ -486,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}>
@@ -516,8 +512,6 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
                field={field}
                table={fieldTable}
                valueChangeHandler={(event, valueIndex, newValue) => handleValueChange(event, valueIndex, newValue)}
-               queryScreenUsage={queryScreenUsage}
-               allowVariables={allowVariables}
             />
          </Box>
          <Box display="inline-block">

src/qqq/components/query/FilterCriteriaRowValues.tsx

@@ -23,25 +23,19 @@
 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 {FilterVariableExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/FilterVariableExpression";
 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 InputAdornment from "@mui/material/InputAdornment/InputAdornment";
 import TextField from "@mui/material/TextField";
-import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
+import React, {SyntheticEvent, useReducer} from "react";
 import DynamicSelect from "qqq/components/forms/DynamicSelect";
-import AssignFilterVariable from "qqq/components/query/AssignFilterVariable";
-import CriteriaDateField, {NoWrapTooltip} from "qqq/components/query/CriteriaDateField";
+import CriteriaDateField from "qqq/components/query/CriteriaDateField";
 import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
-import {EvaluatedExpression} from "qqq/components/query/EvaluatedExpression";
 import FilterCriteriaPaster from "qqq/components/query/FilterCriteriaPaster";
 import {OperatorOption, ValueMode} from "qqq/components/query/FilterCriteriaRow";
-import {QueryScreenUsage} from "qqq/pages/records/query/RecordQuery";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
-import React, {SyntheticEvent, useReducer} from "react";
-import {flushSync} from "react-dom";
 
 interface Props
 {
@@ -50,9 +44,7 @@ interface Props
    field: QFieldMetaData;
    table: QTableMetaData;
    valueChangeHandler: (event: React.ChangeEvent | SyntheticEvent, valueIndex?: number | "all", newValue?: any) => void;
-   initiallyOpenMultiValuePvs?: boolean;
-   queryScreenUsage?: QueryScreenUsage;
-   allowVariables?: boolean;
+   initiallyOpenMultiValuePvs?: boolean
 }
 
 FilterCriteriaRowValues.defaultProps =
@@ -60,10 +52,6 @@ FilterCriteriaRowValues.defaultProps =
       initiallyOpenMultiValuePvs: false
    };
 
-
-/***************************************************************************
- * get the type to use for an <input> from a QFieldMetaData
- ***************************************************************************/
 export const getTypeForTextField = (field: QFieldMetaData): string =>
 {
    let type = "search";
@@ -84,15 +72,8 @@ export const getTypeForTextField = (field: QFieldMetaData): string =>
    return (type);
 };
 
-
-/***************************************************************************
- * Make an <input type=text> (actually, might be a different type, but that's
- * the gist of it), for a field.
- ***************************************************************************/
-export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWithId, valueChangeHandler?: (event: (React.ChangeEvent | React.SyntheticEvent), valueIndex?: (number | "all"), newValue?: any) => void, valueIndex: number = 0, label = "Value", idPrefix = "value-", allowVariables = false) =>
+export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWithId, valueChangeHandler?: (event: (React.ChangeEvent | React.SyntheticEvent), valueIndex?: (number | "all"), newValue?: any) => void, valueIndex: number = 0, label = "Value", idPrefix = "value-") =>
 {
-   const isExpression = criteria.values && criteria.values[valueIndex] && criteria.values[valueIndex].type;
-   const inputId = `${idPrefix}${criteria.id}`;
    let type = getTypeForTextField(field);
    const inputLabelProps: any = {};
 
@@ -107,70 +88,12 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
       value = ValueUtils.formatDateTimeValueForForm(value);
    }
 
-   /***************************************************************************
-    * Event handler for the clear 'x'.
-    ***************************************************************************/
    const clearValue = (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>, index: number) =>
    {
       valueChangeHandler(event, index, "");
-      document.getElementById(inputId).focus();
+      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();
-         }
-      }
-   };
-
-
-   /***************************************************************************
-    * make a version of the text field for when the criteria's value is set to
-    * be a "variable"
-    ***************************************************************************/
-   const makeFilterVariableTextField = (expression: FilterVariableExpression, valueIndex: number = 0, label = "Value", idPrefix = "value-") =>
-   {
-      const clearValue = (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>, index: number) =>
-      {
-         valueChangeHandler(event, index, "");
-         document.getElementById(`${idPrefix}${criteria.id}`).focus();
-      };
-
-      const inputProps2: any = {};
-      inputProps2.endAdornment = (
-         <InputAdornment position="end">
-            <IconButton sx={{visibility: expression ? "visible" : "hidden"}} onClick={(event) => clearValue(event, valueIndex)}>
-               <Icon>closer</Icon>
-            </IconButton>
-         </InputAdornment>
-      );
-
-      return <NoWrapTooltip title={<EvaluatedExpression field={field} expression={expression} />} placement="bottom" enterDelay={1000} sx={{marginLeft: "-75px !important", marginTop: "-8px !important"}}><TextField
-         id={`${idPrefix}${criteria.id}`}
-         label={label}
-         variant="standard"
-         autoComplete="off"
-         InputProps={{disabled: true, readOnly: true, unselectable: "off", ...inputProps2}}
-         InputLabelProps={{shrink: true}}
-         value="${VARIABLE}"
-         fullWidth
-      /></NoWrapTooltip>;
-   };
-
-
-   ///////////////////////////////////////////////////////////////////////////
-   // set up an 'x' icon as an end-adornment, to clear value from the field //
-   ///////////////////////////////////////////////////////////////////////////
    const inputProps: any = {};
    inputProps.endAdornment = (
       <InputAdornment position="end">
@@ -180,87 +103,22 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
       </InputAdornment>
    );
 
-
-   /***************************************************************************
-    * onChange event handler.  deals with, if the field has a to upper/lower
-    * case rule on it, to apply that transform, and adjust the cursor.
-    * See:  https://giacomocerquone.com/blog/keep-input-cursor-still
-    ***************************************************************************/
-   function onChange(event: any)
-   {
-      const beforeStart = event.target.selectionStart;
-      const beforeEnd = event.target.selectionEnd;
-
-      let isToUpperCase = DynamicFormUtils.isToUpperCase(field);
-      let isToLowerCase = DynamicFormUtils.isToLowerCase(field);
-
-      if (isToUpperCase || isToLowerCase)
-      {
-         flushSync(() =>
-         {
-            let newValue = event.currentTarget.value;
-
-            if (isToUpperCase)
-            {
-               newValue = newValue.toUpperCase();
-            }
-            if (isToLowerCase)
-            {
-               newValue = newValue.toLowerCase();
-            }
-
-            event.currentTarget.value = newValue;
-         });
-
-         const input = document.getElementById(inputId);
-         if (input)
-         {
-            // @ts-ignore
-            input.setSelectionRange(beforeStart, beforeEnd);
-         }
-      }
-
-      valueChangeHandler(event, valueIndex);
-   }
-
-   ////////////////////////
-   // return the element //
-   ////////////////////////
-   return <Box sx={{margin: 0, padding: 0, display: "flex"}}>
-      {
-         isExpression ? (
-            makeFilterVariableTextField(criteria.values[valueIndex], valueIndex, label, idPrefix)
-         ) : (
-            <TextField
-               id={inputId}
-               label={label}
-               variant="standard"
-               autoComplete="off"
-               type={type}
-               onChange={onChange}
-               onKeyDown={handleKeyDown}
-               value={value}
-               InputLabelProps={inputLabelProps}
-               InputProps={inputProps}
-               fullWidth
-               autoFocus={true}
-            />
-         )
-      }
-      {
-         allowVariables && (
-            <AssignFilterVariable field={field} valueChangeHandler={valueChangeHandler} valueIndex={valueIndex} />
-         )
-      }
-   </Box>;
+   return <TextField
+      id={`${idPrefix}${criteria.id}`}
+      label={label}
+      variant="standard"
+      autoComplete="off"
+      type={type}
+      onChange={(event) => valueChangeHandler(event, valueIndex)}
+      value={value}
+      InputLabelProps={inputLabelProps}
+      InputProps={inputProps}
+      fullWidth
+      autoFocus={true}
+   />;
 };
 
-
-/***************************************************************************
- * Component that is the "values" portion of a FilterCriteria Row in the
- * advanced query filter editor.
- ***************************************************************************/
-function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueChangeHandler, initiallyOpenMultiValuePvs, queryScreenUsage, allowVariables}: Props): JSX.Element
+function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueChangeHandler, initiallyOpenMultiValuePvs}: Props): JSX.Element
 {
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
@@ -269,10 +127,6 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
       return null;
    }
 
-
-   /***************************************************************************
-    * Callback for the Save button from the paste-values modal
-    ***************************************************************************/
    function saveNewPasterValues(newValues: any[])
    {
       if (criteria.values)
@@ -296,38 +150,33 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
       forceUpdate();
    }
 
-   const isExpression = criteria.values && criteria.values[0] && criteria.values[0].type;
-
-   //////////////////////////////////////////////////////////////////////////////
-   // render different form element9s) based on operator option's "value mode" //
-   //////////////////////////////////////////////////////////////////////////////
    switch (operatorOption.valueMode)
    {
       case ValueMode.NONE:
          return null;
       case ValueMode.SINGLE:
-         return makeTextField(field, criteria, valueChangeHandler, 0, undefined, undefined, allowVariables);
+         return makeTextField(field, criteria, valueChangeHandler);
       case ValueMode.SINGLE_DATE:
-         return <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} allowVariables={allowVariables} />;
+         return <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} />;
       case ValueMode.DOUBLE_DATE:
          return <Box>
-            <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={0} label="From" idPrefix="from-" allowVariables={allowVariables} />
-            <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={1} label="To" idPrefix="to-" allowVariables={allowVariables} />
+            <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={0} label="From" idPrefix="from-" />
+            <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={1} label="To" idPrefix="to-" />
          </Box>;
       case ValueMode.SINGLE_DATE_TIME:
-         return <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} allowVariables={allowVariables} />;
+         return <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} />;
       case ValueMode.DOUBLE_DATE_TIME:
          return <Box>
-            <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={0} label="From" idPrefix="from-" allowVariables={allowVariables} />
-            <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={1} label="To" idPrefix="to-" allowVariables={allowVariables} />
+            <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={0} label="From" idPrefix="from-" />
+            <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={1} label="To" idPrefix="to-" />
          </Box>;
       case ValueMode.DOUBLE:
          return <Box>
             <Box width="50%" display="inline-block">
-               {makeTextField(field, criteria, valueChangeHandler, 0, "From", "from-", allowVariables)}
+               {makeTextField(field, criteria, valueChangeHandler, 0, "From", "from-")}
             </Box>
             <Box width="50%" display="inline-block">
-               {makeTextField(field, criteria, valueChangeHandler, 1, "To", "to-", allowVariables)}
+               {makeTextField(field, criteria, valueChangeHandler, 1, "To", "to-")}
             </Box>
          </Box>;
       case ValueMode.MULTI:
@@ -360,30 +209,19 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
          {
             selectedPossibleValue = criteria.values[0];
          }
-         return <Box display="flex">
-            {
-               isExpression ? (
-                  makeTextField(field, criteria, valueChangeHandler, 0, undefined, undefined, allowVariables)
-               ) : (
-                  <Box width={"100%"}>
-                     <DynamicSelect
-                        tableName={table.name}
-                        fieldName={field.name}
-                        overrideId={field.name + "-single-" + criteria.id}
-                        key={field.name + "-single-" + criteria.id}
-                        fieldLabel="Value"
-                        initialValue={selectedPossibleValue?.id}
-                        initialDisplayValue={selectedPossibleValue?.label}
-                        inForm={false}
-                        onChange={(value: any) => valueChangeHandler(null, 0, value)}
-                        variant="standard"
-                     />
-                  </Box>
-               )
-            }
-            {
-               allowVariables && !isExpression && <Box mt={2.0}><AssignFilterVariable field={field} valueChangeHandler={valueChangeHandler} valueIndex={0} /></Box>
-            }
+         return <Box mb={-1.5}>
+            <DynamicSelect
+               tableName={table.name}
+               fieldName={field.name}
+               overrideId={field.name + "-single-" + criteria.id}
+               key={field.name + "-single-" + criteria.id}
+               fieldLabel="Value"
+               initialValue={selectedPossibleValue?.id}
+               initialDisplayValue={selectedPossibleValue?.label}
+               inForm={false}
+               onChange={(value: any) => valueChangeHandler(null, 0, value)}
+               variant="standard"
+            />
          </Box>;
       case ValueMode.PVS_MULTI:
          console.log("Doing pvs multi: " + criteria.values);
@@ -399,7 +237,7 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
                initialValues = criteria.values;
             }
          }
-         return <Box>
+         return <Box mb={-1.5}>
             <DynamicSelect
                tableName={table.name}
                fieldName={field.name}
@@ -419,4 +257,4 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
    return (<br />);
 }
 
-export default FilterCriteriaRowValues;
+export default FilterCriteriaRowValues;

src/qqq/components/query/QuickFilter.tsx

@@ -30,15 +30,14 @@ 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, 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";
 import FilterCriteriaRowValues from "qqq/components/query/FilterCriteriaRowValues";
 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, {SyntheticEvent, useContext, useReducer, useState} from "react";
 
 export type CriteriaParamType = QFilterCriteriaWithId | null | "tooComplex";
 
@@ -51,8 +50,6 @@ interface QuickFilterProps
    updateCriteria: (newCriteria: QFilterCriteria, needDebounce: boolean, doRemoveCriteria: boolean) => void;
    defaultOperator?: QCriteriaOperator;
    handleRemoveQuickFilterField?: (fieldName: string) => void;
-   queryScreenUsage?: QueryScreenUsage;
-   allowVariables?: boolean;
 }
 
 QuickFilter.defaultProps =
@@ -74,7 +71,7 @@ export const quickFilterButtonStyles = {
    minHeight: "auto",
    padding: "0.375rem 0.625rem", whiteSpace: "nowrap",
    marginBottom: "0.5rem"
-};
+}
 
 /*******************************************************************************
  ** Test if a CriteriaParamType represents an actual query criteria - or, if it's
@@ -92,11 +89,11 @@ const criteriaParamIsCriteria = (param: CriteriaParamType): boolean =>
  *******************************************************************************/
 const doesOperatorOptionEqualCriteria = (operatorOption: OperatorOption, criteria: QFilterCriteriaWithId): boolean =>
 {
-   if (operatorOption.value == criteria.operator)
+   if(operatorOption.value == criteria.operator)
    {
-      if (operatorOption.implicitValues)
+      if(operatorOption.implicitValues)
       {
-         if (JSON.stringify(operatorOption.implicitValues) == JSON.stringify(criteria.values))
+         if(JSON.stringify(operatorOption.implicitValues) == JSON.stringify(criteria.values))
          {
             return (true);
          }
@@ -110,7 +107,7 @@ const doesOperatorOptionEqualCriteria = (operatorOption: OperatorOption, criteri
    }
 
    return (false);
-};
+}
 
 
 /*******************************************************************************
@@ -120,29 +117,29 @@ const doesOperatorOptionEqualCriteria = (operatorOption: OperatorOption, criteri
  *******************************************************************************/
 const getOperatorSelectedValue = (operatorOptions: OperatorOption[], criteria: QFilterCriteriaWithId, defaultOperator: QCriteriaOperator): OperatorOption =>
 {
-   if (criteria)
+   if(criteria)
    {
       const filteredOptions = operatorOptions.filter(o => doesOperatorOptionEqualCriteria(o, criteria));
-      if (filteredOptions.length > 0)
+      if(filteredOptions.length > 0)
       {
          return (filteredOptions[0]);
       }
    }
 
    const filteredOptions = operatorOptions.filter(o => o.value == defaultOperator);
-   if (filteredOptions.length > 0)
+   if(filteredOptions.length > 0)
    {
       return (filteredOptions[0]);
    }
 
    return (null);
-};
+}
 
 /*******************************************************************************
  ** Component to render a QuickFilter - that is - a button, with a Menu under it,
  ** with Operator and Value controls.
  *******************************************************************************/
-export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData, criteriaParam, updateCriteria, defaultOperator, handleRemoveQuickFilterField, queryScreenUsage, allowVariables}: QuickFilterProps): JSX.Element
+export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData, criteriaParam, updateCriteria, defaultOperator, handleRemoveQuickFilterField}: QuickFilterProps): JSX.Element
 {
    const operatorOptions = fieldMetaData ? getOperatorOptions(tableMetaData, fullFieldName) : [];
    const [_, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fullFieldName);
@@ -151,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));
@@ -164,11 +158,6 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
 
    const {accentColor} = useContext(QContext);
 
-   //////////////////////
-   // ole' faithful... //
-   //////////////////////
-   const [, forceUpdate] = useReducer((x) => x + 1, 0);
-
 
    /*******************************************************************************
     **
@@ -193,57 +182,32 @@ 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 =>
    {
-      if (criteria != null && criteriaParam == null)
+      if(criteria != null && criteriaParam == null)
       {
          const defaultOperatorOption = operatorOptions.filter(o => o.value == defaultOperator)[0];
-         if (criteria.operator !== defaultOperatorOption?.value || JSON.stringify(criteria.values) !== JSON.stringify(getDefaultCriteriaValue()))
+         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);
          }
       }
 
       return (false);
-   };
+   }
 
    /*******************************************************************************
-    ** 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 =>
@@ -254,8 +218,8 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
       setOperatorSelectedValue(operatorOption);
       setOperatorInputValue(operatorOption?.label);
       setCriteria(criteria);
-      return (criteria);
-   };
+      return(criteria);
+   }
 
    /*******************************************************************************
     ** event handler to open the menu in response to the button being clicked.
@@ -269,7 +233,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
       {
          const element = document.getElementById("value-" + criteria.id);
          element?.focus();
-      });
+      })
    };
 
    /*******************************************************************************
@@ -277,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);
    };
@@ -307,15 +266,15 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
          // we've seen cases where switching operators can sometimes put a null in as the first value... //
          // that just causes a bad time (e.g., null pointers in Autocomplete), so, get rid of that.      //
          //////////////////////////////////////////////////////////////////////////////////////////////////
-         if (criteria.values && criteria.values.length == 1 && criteria.values[0] == null)
+         if(criteria.values && criteria.values.length == 1 && criteria.values[0] == null)
          {
             criteria.values = [];
          }
 
-         if (newValue.valueMode && !newValue.implicitValues)
+         if(newValue.valueMode)
          {
             const requiredValueCount = getValueModeRequiredCount(newValue.valueMode);
-            if (requiredValueCount != null && criteria.values.length > requiredValueCount)
+            if(requiredValueCount != null && criteria.values.length > requiredValueCount)
             {
                criteria.values.splice(requiredValueCount);
             }
@@ -327,8 +286,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
          setOperatorInputValue("");
       }
 
-      setCriteria(criteria);
-      forceUpdate();
+      updateCriteria(criteria, false, false);
    };
 
    /*******************************************************************************
@@ -348,7 +306,6 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
       // @ts-ignore
       const value = newValue !== undefined ? newValue : event ? event.target.value : null;
 
-      console.log("IN HERE");
       if (!criteria.values)
       {
          criteria.values = [];
@@ -363,8 +320,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
          criteria.values[valueIndex] = value;
       }
 
-      setCriteria(criteria);
-      forceUpdate();
+      updateCriteria(criteria, true, false);
    };
 
    /*******************************************************************************
@@ -380,13 +336,13 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
     *******************************************************************************/
    const resetCriteria = (e: React.MouseEvent<HTMLSpanElement>) =>
    {
-      if (criteriaIsValid)
+      if(criteriaIsValid)
       {
          e.stopPropagation();
          const newCriteria = makeNewCriteria();
          updateCriteria(newCriteria, false, true);
       }
-   };
+   }
 
    /*******************************************************************************
     ** event handler for clicking the (x) icon that turns off this quick filter field.
@@ -394,17 +350,17 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
     *******************************************************************************/
    const handleTurningOffQuickFilterField = () =>
    {
-      closeMenu();
-      if (handleRemoveQuickFilterField)
+      closeMenu()
+      if(handleRemoveQuickFilterField)
       {
          handleRemoveQuickFilterField(criteria?.fieldName);
       }
-   };
+   }
 
    ////////////////////////////////////////////////////////////////////////////////////
    // if no field was input (e.g., record-query is still loading), return null early //
    ////////////////////////////////////////////////////////////////////////////////////
-   if (!fieldMetaData)
+   if(!fieldMetaData)
    {
       return (null);
    }
@@ -414,10 +370,10 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
    // from the last selected one, then set the state vars that control that autocomplete   //
    //////////////////////////////////////////////////////////////////////////////////////////
    const maybeNewOperatorSelectedValue = getOperatorSelectedValue(operatorOptions, criteria, defaultOperator);
-   if (JSON.stringify(maybeNewOperatorSelectedValue) !== JSON.stringify(operatorSelectedValue))
+   if(JSON.stringify(maybeNewOperatorSelectedValue) !== JSON.stringify(operatorSelectedValue))
    {
-      setOperatorSelectedValue(maybeNewOperatorSelectedValue);
-      setOperatorInputValue(maybeNewOperatorSelectedValue?.label);
+      setOperatorSelectedValue(maybeNewOperatorSelectedValue)
+      setOperatorInputValue(maybeNewOperatorSelectedValue?.label)
    }
 
    /////////////////////////////////////////////////////////////////////////////////////
@@ -435,7 +391,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
    const tooltipEnterDelay = 500;
 
    let buttonAdditionalStyles: any = {};
-   let buttonContent = <span>{tableForField?.name != tableMetaData.name ? `${tableForField.label}: ` : ""}{fieldMetaData.label}</span>;
+   let buttonContent = <span>{tableForField?.name != tableMetaData.name ? `${tableForField.label}: ` : ""}{fieldMetaData.label}</span>
    let buttonClassName = "filterNotActive";
    if (criteriaIsValid)
    {
@@ -444,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 =
@@ -495,7 +449,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
    const xClicked = (e: React.MouseEvent<HTMLSpanElement>) =>
    {
       e.stopPropagation();
-      if (criteriaIsValid)
+      if(criteriaIsValid)
       {
          resetCriteria(e);
       }
@@ -503,12 +457,12 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
       {
          handleTurningOffQuickFilterField();
       }
-   };
+   }
 
    //////////////////////////////
    // return the button & menu //
    //////////////////////////////
-   const widthAndMaxWidth = (fieldMetaData?.type == QFieldType.DATE_TIME) ? 315 : 250;
+   const widthAndMaxWidth = 250
    return (
       <>
          {button}
@@ -524,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}
@@ -545,12 +494,10 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
                </Box>
                <Box width={widthAndMaxWidth} maxWidth={widthAndMaxWidth} className="quickFilter filterValuesColumn">
                   <FilterCriteriaRowValues
-                     queryScreenUsage={queryScreenUsage}
                      operatorOption={operatorSelectedValue}
                      criteria={criteria}
                      field={fieldMetaData}
                      table={tableForField}
-                     allowVariables={allowVariables}
                      valueChangeHandler={(event, valueIndex, newValue) => handleValueChange(event, valueIndex, newValue)}
                      initiallyOpenMultiValuePvs={true} // todo - maybe not?
                   />

src/qqq/components/sharing/ShareModal.tsx

@@ -1,487 +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, Box} from "@mui/material";
-import Autocomplete from "@mui/material/Autocomplete";
-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" maxWidth="590px">
-                  <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">
-                        {/* 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} 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="550px" 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>
-                     {/*
-                        when turning scope back on, change width of audience box to 350px
-                        <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="490px" pl="1rem">{share.audienceLabel}</Box>
-                                       {/*
-                                          when turning scope back on, change width of audience box to 310px
-                                          <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,116 +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 {BlockData} from "qqq/components/widgets/blocks/BlockModels";
-import WidgetBlock from "qqq/components/widgets/WidgetBlock";
-import React from "react";
-
-
-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_COLUMN")
-   {
-      boxStyle.display = "flex";
-      boxStyle.flexDirection = "column";
-      boxStyle.flexWrap = "wrap";
-      boxStyle.gap = "0.5rem";
-   }
-   else 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,27 +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 DynamicFormWidget from "qqq/components/widgets/misc/DynamicFormWidget";
 import FieldValueListWidget from "qqq/components/widgets/misc/FieldValueListWidget";
-import FilterAndColumnsSetupWidget from "qqq/components/widgets/misc/FilterAndColumnsSetupWidget";
-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 ScriptViewer from "qqq/components/widgets/misc/ScriptViewer";
 import StepperCard from "qqq/components/widgets/misc/StepperCard";
 import USMapWidget from "qqq/components/widgets/misc/USMapWidget";
-import WorkflowViewer from "qqq/components/widgets/misc/WorkflowViewer";
 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, WidgetData} 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";
 
 
@@ -66,7 +59,6 @@ interface Props
    widgetMetaDataList: QWidgetMetaData[];
    tableName?: string;
    entityPrimaryKey?: string;
-   record?: QRecord;
    omitWrappingGridContainer: boolean;
    areChildren?: boolean;
    childUrlParams?: string;
@@ -85,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);
@@ -97,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));
@@ -197,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)
@@ -254,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 && record.values)
-      {
-         record.values.forEach((value, key) => rs[key] = value);
-      }
-
-      return (rs);
-   }
-
    const renderWidget = (widgetMetaData: QWidgetMetaData, i: number): JSX.Element =>
    {
       const labelAdditionalComponentsRight: LabelComponent[] = [];
@@ -279,22 +254,12 @@ 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));
          }
       }
 
       return (
-         <Box key={`${widgetMetaData.name}-${i}`} sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px", width: "100%", height: "100%", flexDirection: widgetMetaData.type == "multiTable" ? "column" : "row"}}>
+         <Box key={`${widgetMetaData.name}-${i}`} sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px", width: "100%", height: "100%"}}>
             {
                haveLoadedParams && widgetMetaData.type === "parentWidget" && (
                   <ParentWidget
@@ -309,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
@@ -344,20 +294,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                   />
                )
             }
-            {
-               widgetMetaData.type === "multiTable" && (
-                  widgetData[i]?.tableDataList?.map((tableData: WidgetData, index: number) =>
-                     <Box pb={3} key={`${widgetMetaData.type}-${index}`}>
-                        <TableWidget
-                           widgetMetaData={widgetMetaData}
-                           widgetData={tableData}
-                           reloadWidgetCallback={(data) => reloadWidget(i, data)}
-                           isChild={areChildren}
-                        />
-                     </Box>
-                  )
-               )
-            }
             {
                widgetMetaData.type === "stackedBarChart" && (
                   <Widget
@@ -366,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>
@@ -379,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} />
@@ -394,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%"}}>
@@ -411,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">
@@ -444,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}
                      />
@@ -488,7 +414,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      isChild={areChildren}
                      labelAdditionalComponentsRight={labelAdditionalComponentsRight}
-                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
                      <div>
                         <PieChart
@@ -524,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}
@@ -554,42 +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 === "workflow" && (
-                  widgetData && widgetData[i] && widgetData[i].queryParams &&
-                  <Widget widgetMetaData={widgetMetaData}>
-                     <WorkflowViewer workflowId={widgetData[i].queryParams.id} />
-                  </Widget>
-               )
-            }
             {
                widgetMetaData.type === "dataBagViewer" && (
                   widgetData && widgetData[i] && widgetData[i].queryParams &&
@@ -606,33 +493,11 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                   </Widget>
                )
             }
-            {
-               widgetMetaData.type === "filterAndColumnsSetup" && (
-                  widgetData && widgetData[i] &&
-                  <FilterAndColumnsSetupWidget isEditable={false} widgetMetaData={widgetMetaData} widgetData={widgetData[i]} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
-                  {
-                  }} />
-               )
-            }
-            {
-               widgetMetaData.type === "pivotTableSetup" && (
-                  widgetData && widgetData[i] && widgetData[i].queryParams &&
-                  <PivotTableSetupWidget isEditable={false} widgetMetaData={widgetMetaData} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
-                  {
-                  }} />
-               )
-            }
-            {
-               widgetMetaData.type === "dynamicForm" && (
-                  widgetData && widgetData[i] &&
-                  <DynamicFormWidget isEditable={false} widgetMetaData={widgetMetaData} widgetData={widgetData[i]} record={record} recordValues={convertQRecordValuesFromMapToObject(record)} />
-               )
-            }
          </Box>
       );
    };
 
-   if (wrapWidgetsInTabPanels)
+   if(wrapWidgetsInTabPanels)
    {
       omitWrappingGridContainer = true;
    }
@@ -658,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>)
                })
             }
          </>
@@ -672,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
             }
@@ -686,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,22 +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 {Box, 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
 {
@@ -61,7 +56,6 @@ interface Props
    labelAdditionalComponentsLeft: LabelComponent[];
    labelAdditionalElementsLeft: JSX.Element[];
    labelAdditionalComponentsRight: LabelComponent[];
-   labelAdditionalElementsRight: JSX.Element[];
    labelBoxAdditionalSx?: any;
    widgetMetaData?: QWidgetMetaData;
    widgetData?: WidgetData;
@@ -82,7 +76,6 @@ Widget.defaultProps = {
    labelAdditionalComponentsLeft: [],
    labelAdditionalElementsLeft: [],
    labelAdditionalComponentsRight: [],
-   labelAdditionalElementsRight: [],
    labelBoxAdditionalSx: {},
    omitPadding: false,
 };
@@ -116,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;
@@ -137,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,
@@ -145,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>);
@@ -163,76 +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>
-   );
-}
-
-
 /*******************************************************************************
  **
  *******************************************************************************/
@@ -242,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) =>
@@ -264,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>
       );
    };
@@ -310,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)
          }
       }
 
@@ -344,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;
@@ -380,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}
@@ -413,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>
+      );
    };
 }
 
@@ -434,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(() =>
@@ -485,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));
@@ -519,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);
       }
@@ -617,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 =>
@@ -662,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 key="sublabel" 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 key="sublabelContainer" 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>
                   {
@@ -796,7 +615,6 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
                         })
                      )
                   }
-                  {localLabelAdditionalElementsRight}
                </Box>
             </Box>
          }
@@ -832,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,113 +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 from "@mui/material/Box";
-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 colors from "qqq/assets/theme/base/colors";
-import {WidgetData} from "qqq/components/widgets/Widget";
-import ValueUtils from "qqq/utils/qqq/ValueUtils";
-import React from "react";
-import {Link} from "react-router-dom";
-
-/*******************************************************************************
- ** 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 generateLabelLink = (linkText: string, linkURL: string): JSX.Element =>
-   {
-      return (<Box key={1} fontSize="1rem" pl={1} display="inline" position="relative">
-         (<Link to={linkURL}>{linkText}</Link>)
-      </Box>);
-   };
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   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", marginLeft: "2px", position: "relative", top: "4px"}}>{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/DynamicFormWidget.tsx

@@ -1,265 +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 {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-import Box from "@mui/material/Box";
-import {FormikContextType, useFormikContext} from "formik";
-import QDynamicForm from "qqq/components/forms/DynamicForm";
-import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
-import Widget from "qqq/components/widgets/Widget";
-import {renderSectionOfFields} from "qqq/pages/records/view/RecordView";
-import Client from "qqq/utils/qqq/Client";
-import React, {useEffect, useState} from "react";
-
-
-/*******************************************************************************
- ** component props
- *******************************************************************************/
-interface DynamicFormWidgetProps
-{
-   isEditable: boolean;
-   widgetMetaData: QWidgetMetaData;
-   widgetData: any;
-   record: QRecord;
-   recordValues: { [name: string]: any };
-   onSaveCallback?: (values: { [name: string]: any }) => void;
-}
-
-
-/*******************************************************************************
- ** default values for props
- *******************************************************************************/
-DynamicFormWidget.defaultProps = {
-   onSaveCallback: null
-};
-
-
-/*******************************************************************************
- ** Component to display a dynamic form - e.g., on a record edit or view screen,
- ** or even within a process.
- *******************************************************************************/
-export default function DynamicFormWidget({isEditable, widgetMetaData, widgetData, record, recordValues, onSaveCallback}: DynamicFormWidgetProps): JSX.Element
-{
-   const [fields, setFields] = useState([] as QFieldMetaData[]);
-
-   const [effectiveIsEditable, setEffectiveIsEditable] = useState(isEditable);
-   if(widgetMetaData.defaultValues.has("isEditable"))
-   {
-      const defaultIsEditableValue = widgetMetaData.defaultValues.get("isEditable")
-      if(defaultIsEditableValue != effectiveIsEditable)
-      {
-         setEffectiveIsEditable(defaultIsEditableValue);
-      }
-   }
-
-   const [dynamicFormFields, setDynamicFormFields] = useState(null as any);
-   const [formValidations, setFormValidations] = useState(null as any);
-
-   const [lastKnowFormValues, setLastKnowFormValues] = useState({} as {[name: string]: any});
-
-
-   //////////////////////////////////////////////////////////////////////////////////////////
-   // on initial load, and any time widgetData changes (e.g., if widget gets re-rendered), //
-   // figure out what our form fields are                                                  //
-   //////////////////////////////////////////////////////////////////////////////////////////
-   useEffect(() =>
-   {
-      setDynamicFormFields({})
-      setFormValidations({})
-
-      if(widgetData && widgetData.fieldList)
-      {
-         const newFields: QFieldMetaData[] = [];
-         for (let i = 0; i < widgetData.fieldList.length; i++)
-         {
-            newFields.push(new QFieldMetaData(widgetData.fieldList[i]));
-         }
-         setFields(newFields);
-
-         if(newFields.length > 0)
-         {
-            const recordOfFieldValues = widgetData.recordOfFieldValues ? new QRecord(widgetData.recordOfFieldValues) : null;
-            const {dynamicFormFields: newDynamicFormFields, formValidations: newFormValidations} = DynamicFormUtils.getFormData(newFields);
-            const defaultDisplayValues = new Map<string,string>(); // todo - seems not right?
-            DynamicFormUtils.addPossibleValueProps(newDynamicFormFields, newFields, recordValues.tableName, null, recordOfFieldValues ? recordOfFieldValues.displayValues : defaultDisplayValues);
-            setDynamicFormFields(newDynamicFormFields)
-            setFormValidations(newFormValidations)
-         }
-
-         setLastKnowFormValues({});
-      }
-      else
-      {
-         setFields([])
-      }
-   }, [widgetData]);
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function checkForFormValueChanges(formikProps: FormikContextType<any>)
-   {
-      if(!fields || !fields.length)
-      {
-         return;
-      }
-
-      let anyChanged = false;
-      for (let i = 0; i < fields.length; i++)
-      {
-         const name = fields[i].name;
-         if(formikProps.values[name] != lastKnowFormValues[name])
-         {
-            anyChanged = true;
-            lastKnowFormValues[name] = formikProps.values[name];
-         }
-      }
-
-      if(anyChanged)
-      {
-         const mergedDynamicFormValuesIntoFieldName = widgetData.mergedDynamicFormValuesIntoFieldName;
-         if(mergedDynamicFormValuesIntoFieldName && onSaveCallback)
-         {
-            const onSaveCallbackParam: {[name: string]: any} = {};
-            onSaveCallbackParam[mergedDynamicFormValuesIntoFieldName] = JSON.stringify(lastKnowFormValues);
-            onSaveCallback(onSaveCallbackParam);
-         }
-      }
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function getInitialValue(fieldName: string)
-   {
-      for (let i = 0; i < fields?.length; i++)
-      {
-         if(fields[i].name == fieldName && fields[i].defaultValue)
-         {
-            return (fields[i].defaultValue)
-         }
-      }
-
-      return (null);
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function renderEditForm()
-   {
-      const formikProps = useFormikContext();
-      if(!fields || !fields.length)
-      {
-         return (
-            <Box>
-               <Box fontSize="1rem">{widgetData && widgetData.noFieldsMessage}</Box>
-            </Box>
-         );
-      }
-
-      const formData: any = {};
-      formData.values = formikProps.values;
-      formData.touched = formikProps.touched;
-      formData.errors = formikProps.errors;
-      formData.formFields = {};
-
-      // todo - merge the formValidations object with formik's - maybe in the useEffect where we build it
-      // setValidations(Yup.object().shape(formValidations));
-      // formikProps.validationSchema.
-
-      for (let key of Object.keys(dynamicFormFields))
-      {
-         const dynamicFormField = dynamicFormFields[key];
-         formData.formFields[dynamicFormField.name] = dynamicFormField;
-
-         const initialValue = getInitialValue(dynamicFormField.name);
-         if(initialValue != null)
-         {
-            console.log(`@dk trying to set an initial value [${dynamicFormField.name}] to [${initialValue}]`);
-            // @ts-ignore some any
-            formikProps.initialValues[dynamicFormField.name] = initialValue;
-         }
-      }
-
-      if(formData.values)
-      {
-         checkForFormValueChanges(formikProps);
-      }
-
-      return (
-         <Box>
-            <QDynamicForm formData={formData} record={record} />
-         </Box>
-      );
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function renderViewForm()
-   {
-      const fieldNames: string[] = [];
-      const fieldMap: {[name: string]: QFieldMetaData} = {};
-      const fakeRecord = new QRecord(widgetData.recordOfFieldValues ?? {});
-
-      const mergedDynamicFormValuesIntoFieldName = widgetData.mergedDynamicFormValuesIntoFieldName;
-
-      for (let i = 0; i < fields?.length; i++)
-      {
-         const fieldName = fields[i].name;
-         fieldNames.push(fieldName);
-         fieldMap[fieldName] = fields[i];
-
-         if(mergedDynamicFormValuesIntoFieldName && recordValues[mergedDynamicFormValuesIntoFieldName])
-         {
-            fakeRecord.values.set(fieldName, recordValues[mergedDynamicFormValuesIntoFieldName][fieldName]);
-         }
-      }
-
-      const section = renderSectionOfFields(`dynamicFormWidget:${widgetMetaData.name}`, fieldNames, null, false, fakeRecord, fieldMap);
-
-      return (<Box>
-         {section}
-      </Box>);
-   }
-
-
-   ////////////
-   // render //
-   ////////////
-   return (<Widget widgetMetaData={widgetMetaData}>
-      {
-         <React.Fragment>
-            {effectiveIsEditable ? renderEditForm() : renderViewForm()}
-         </React.Fragment>
-      }
-   </Widget>);
-}
-

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

@@ -1,443 +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 {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QCriteriaOperator";
-import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
-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 FilterAndColumnsSetupWidgetProps
-{
-   isEditable: boolean;
-   widgetMetaData: QWidgetMetaData;
-   widgetData: any;
-   recordValues: { [name: string]: any };
-   onSaveCallback?: (values: { [name: string]: any }) => void;
-}
-
-FilterAndColumnsSetupWidget.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 FilterAndColumnsSetupWidget({isEditable, widgetMetaData, widgetData, recordValues, onSaveCallback}: FilterAndColumnsSetupWidgetProps): JSX.Element
-{
-   const [modalOpen, setModalOpen] = useState(false);
-   const [hideColumns, setHideColumns] = useState(widgetData?.hideColumns);
-   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 columns: QQueryColumns = null;
-   let usingDefaultEmptyFilter = false;
-   let queryFilter = recordValues["queryFilterJson"] && JSON.parse(recordValues["queryFilterJson"]) as QQueryFilter;
-   const defaultFilterFields = widgetData?.filterDefaultFieldNames;
-   if (!queryFilter)
-   {
-      queryFilter = new QQueryFilter();
-      if (defaultFilterFields?.length == 0)
-      {
-         usingDefaultEmptyFilter = true;
-      }
-   }
-   else
-   {
-      queryFilter = Object.assign(new QQueryFilter(), queryFilter);
-   }
-
-   //////////////////////////////////////////////////////////////////////////////////////////////////////
-   // if there are default fields from which a query should be seeded, add/update the filter with them //
-   //////////////////////////////////////////////////////////////////////////////////////////////////////
-   if (defaultFilterFields?.length > 0)
-   {
-      defaultFilterFields.forEach((fieldName: string) =>
-      {
-         ////////////////////////////////////////////////////////////////////////////////////////////
-         // if a value for the default field exists, remove the criteria for it in our query first //
-         ////////////////////////////////////////////////////////////////////////////////////////////
-         queryFilter.criteria = queryFilter.criteria?.filter(c => c.fieldName != fieldName);
-
-         if (recordValues[fieldName])
-         {
-            queryFilter.addCriteria(new QFilterCriteria(fieldName, QCriteriaOperator.EQUALS, [recordValues[fieldName]]));
-         }
-      });
-   }
-
-   if (recordValues["columnsJson"])
-   {
-      columns = QQueryColumns.buildFromJSON(recordValues["columnsJson"]);
-   }
-
-   //////////////////////////////////////////////////////////////////////
-   // load tableMetaData initially, and if/when selected table changes //
-   //////////////////////////////////////////////////////////////////////
-   useEffect(() =>
-   {
-      ////////////////////////////////////////////////////////////////////////////////////////
-      // if a default table name specified, use it, otherwise use it from the record values //
-      ////////////////////////////////////////////////////////////////////////////////////////
-      let tableName = widgetData?.tableName;
-      if (!tableName && recordValues["tableName"] && (tableMetaData == null || tableMetaData.name != recordValues["tableName"]))
-      {
-         tableName = recordValues["tableName"];
-      }
-
-      if (tableName)
-      {
-         (async () =>
-         {
-            const tableMetaData = await qController.loadTableMetaData(tableName);
-            setTableMetaData(tableMetaData);
-
-            const queryFilterForFrontend = Object.assign({}, queryFilter);
-            await FilterUtils.cleanupValuesInFilerFromQueryString(qController, tableMetaData, queryFilterForFrontend);
-            setFrontendQueryFilter(queryFilterForFrontend);
-         })();
-      }
-   }, [JSON.stringify(recordValues)]);
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function openEditor()
-   {
-      let missingRequiredFields = [] as string[];
-      widgetData?.filterDefaultFieldNames?.forEach((fieldName: string) =>
-      {
-         if (!recordValues[fieldName])
-         {
-            missingRequiredFields.push(tableMetaData.fields.get(fieldName).label);
-         }
-      });
-
-      ////////////////////////////////////////////////////////////////////
-      // display an alert and return if any required fields are missing //
-      ////////////////////////////////////////////////////////////////////
-      if (missingRequiredFields.length > 0)
-      {
-         setAlertContent("The following fields must first be selected to edit the filter: '" + missingRequiredFields.join(", ") + "'");
-         return;
-      }
-
-      if (recordValues["tableName"])
-      {
-         setAlertContent(null);
-         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)
-   {
-      if (!hideColumns)
-      {
-         labelAdditionalElementsRight.push(<HeaderLinkButtonComponent key="filterAndColumnsHeader" label="Edit Filters and Columns" onClickCallback={openEditor} disabled={tableMetaData == null} disabledTooltip={selectTableFirstTooltipTitle} />);
-      }
-      else
-      {
-         labelAdditionalElementsRight.push(<HeaderLinkButtonComponent key="filterAndColumnsHeader" label="Edit Filters" 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}>No filters are configured.</Box>
-                  }
-               </Box>
-            }
-         </Box>
-         {!hideColumns && (
-            <Box pt="1rem">
-               <h5>Columns</h5>
-               <Box display="flex" flexWrap="wrap" fontSize="1rem">
-                  {
-                     mayShowColumnsPreview() &&
-                     columns.columns.map((column, i) => <React.Fragment key={`column-${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}>No columns are selected.</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
-                              allowVariables={widgetData?.allowVariables}
-                              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/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 {buttonSX, unborderedButtonSX} from "qqq/components/widgets/misc/FilterAndColumnsSetupWidget";
-import {PivotTableGroupByElement} from "qqq/components/widgets/misc/PivotTableGroupByElement";
-import {PivotTableValueElement} from "qqq/components/widgets/misc/PivotTableValueElement";
-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 key="pivotTableHeader" 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,59 +25,34 @@ 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([]);
-   const [records, setRecords] = useState([] as QRecord[]);
+   const [records, setRecords] = useState([] as QRecord[])
    const [columns, setColumns] = useState([]);
-   const [allColumns, setAllColumns] = useState([]);
+   const [allColumns, setAllColumns] = useState([])
    const [csv, setCsv] = useState(null as string);
    const [fileName, setFileName] = useState(null as string);
    const [gridMouseDownX, setGridMouseDownX] = useState(0);
@@ -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. //
@@ -110,54 +85,32 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
          /////////////////////////////////////////////////////////////////////////////////////////////////////////////
          // capture all-columns to use for the export (before we might splice some away from the on-screen display) //
          /////////////////////////////////////////////////////////////////////////////////////////////////////////////
-         const allColumns = [...columns];
+         const allColumns = [... columns];
          setAllColumns(JSON.parse(JSON.stringify(columns)));
 
          ////////////////////////////////////////////////////////////////
          // do not not show the foreign-key column of the parent table //
          ////////////////////////////////////////////////////////////////
-         if (data.defaultValuesForNewChildRecords)
+         if(data.defaultValuesForNewChildRecords)
          {
             for (let i = 0; i < columns.length; i++)
             {
-               if (data.defaultValuesForNewChildRecords[columns[i].field])
+               if(data.defaultValuesForNewChildRecords[columns[i].field])
                {
                   columns.splice(i, 1);
-                  i--;
+                  i--
                }
             }
          }
 
-         ////////////////////////////////////
-         // 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);
+         setRecords(records)
          setColumns(columns);
 
          let csv = "";
          for (let i = 0; i < allColumns.length; i++)
          {
-            csv += `${i > 0 ? "," : ""}"${ValueUtils.cleanForCsv(allColumns[i].headerName)}"`;
+            csv += `${i > 0 ? "," : ""}"${ValueUtils.cleanForCsv(allColumns[i].headerName)}"`
          }
          csv += "\n";
 
@@ -165,8 +118,8 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
          {
             for (let j = 0; j < allColumns.length; j++)
             {
-               const value = records[i].displayValues.get(allColumns[j].field) ?? records[i].values.get(allColumns[j].field);
-               csv += `${j > 0 ? "," : ""}"${ValueUtils.cleanForCsv(value)}"`;
+               const value = records[i].displayValues.get(allColumns[j].field) ?? records[i].values.get(allColumns[j].field)
+               csv += `${j > 0 ? "," : ""}"${ValueUtils.cleanForCsv(value)}"`
             }
             csv += "\n";
          }
@@ -182,13 +135,13 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
    // view all link //
    ///////////////////
    const labelAdditionalElementsLeft: JSX.Element[] = [];
-   if (data && data.viewAllLink)
+   if(data && data.viewAllLink)
    {
       labelAdditionalElementsLeft.push(
-         <Typography key={"viewAllLink"} variant="body2" p={2} display="inline" fontSize=".875rem" pt="0" position="relative">
+         <Typography variant="body2" p={2} display="inline" fontSize=".875rem" pt="0" position="relative">
             <Link to={data.viewAllLink}>View All</Link>
          </Typography>
-      );
+      )
    }
 
    ///////////////////
@@ -200,10 +153,10 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
    {
       isExportDisabled = false;
 
-      if (data.totalRows && data.queryOutput.records.length < data.totalRows)
+      if(data.totalRows && data.queryOutput.records.length < data.totalRows)
       {
-         tooltipTitle = "Export these " + data.queryOutput.records.length + " records.";
-         if (data.viewAllLink)
+         tooltipTitle = "Export these " + data.queryOutput.records.length + " records."
+         if(data.viewAllLink)
          {
             tooltipTitle += "\nClick View All to export all records.";
          }
@@ -212,21 +165,21 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
 
    const onExportClick = () =>
    {
-      if (csv)
+      if(csv)
       {
          HtmlUtils.download(fileName, csv);
       }
       else
       {
-         alert("There is no data available to export.");
+         alert("There is no data available to export.")
       }
-   };
+   }
 
-   if (widgetMetaData?.showExportButton)
+   if(widgetMetaData?.showExportButton)
    {
       labelAdditionalElementsLeft.push(
-         <Typography key={"exportButton"} variant="body2" px={0} display="inline" position="relative">
-            <Tooltip title={tooltipTitle}><span><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={isExportDisabled}><Icon sx={{color: "#757575", fontSize: 1.25}}>save_alt</Icon></Button></span></Tooltip>
+         <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>
       );
    }
@@ -234,15 +187,15 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
    ////////////////////
    // add new button //
    ////////////////////
-   const labelAdditionalComponentsRight: LabelComponent[] = [];
-   if (data && data.canAddChildRecord)
+   const labelAdditionalComponentsRight: LabelComponent[] = []
+   if(data && data.canAddChildRecord)
    {
       let disabledFields = data.disabledFieldsForNewChildRecords;
-      if (!disabledFields)
+      if(!disabledFields)
       {
          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)
+         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);
          }
       })();
@@ -276,7 +224,7 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
     *******************************************************************************/
    function CustomToolbar()
    {
-      const handleMouseDown: GridEventListener<"cellMouseDown"> = (params, event, details) =>
+      const handleMouseDown: GridEventListener<"cellMouseDown"> = ( params, event, details ) =>
       {
          setGridMouseDownX(event.clientX);
          setGridMouseDownY(event.clientY);
@@ -304,51 +252,48 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
          labelAdditionalComponentsRight={labelAdditionalComponentsRight}
          labelBoxAdditionalSx={{position: "relative", top: "-0.375rem"}}
       >
-         <Box mx={-3} mb={-3}>
-            <Box>
-               <DataGridPro
-                  autoHeight
-                  sx={{
-                     borderBottom: "none",
-                     borderLeft: "none",
-                     borderRight: "none"
-                  }}
-                  rows={rows}
-                  disableSelectionOnClick
-                  columns={columns}
-                  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
-                  }}
-                  // pinnedColumns={pinnedColumns}
-                  // onPinnedColumnsChange={handlePinnedColumnsChange}
-                  // pagination
-                  // paginationMode="server"
-                  // rowsPerPageOptions={[20]}
-                  // sortingMode="server"
-                  // filterMode="server"
-                  // page={pageNumber}
-                  // checkboxSelection
-                  rowCount={data && data.totalRows}
-                  // onPageSizeChange={handleRowsPerPageChange}
-                  // onStateChange={handleStateChange}
-                  // density={density}
-                  // loading={loading}
-                  // filterModel={filterModel}
-                  // onFilterModelChange={handleFilterChange}
-                  // columnVisibilityModel={columnVisibilityModel}
-                  // onColumnVisibilityModelChange={handleColumnVisibilityChange}
-                  // onColumnOrderChange={handleColumnOrderChange}
-                  // onSelectionModelChange={selectionChanged}
-                  // onSortModelChange={handleSortChange}
-                  // sortingOrder={[ "asc", "desc" ]}
-                  // sortModel={columnSortModel}
-               />
-            </Box>
+         <Box mx={-2} mb={-3}>
+            <DataGridPro
+               autoHeight
+               sx={{
+                  borderBottom: "none",
+                  borderLeft: "none",
+                  borderRight: "none"
+               }}
+               rows={rows}
+               disableSelectionOnClick
+               columns={columns}
+               rowBuffer={10}
+               getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd")}
+               onRowClick={handleRowClick}
+               // getRowHeight={() => "auto"} // maybe nice?  wraps values in cells...
+               components={{
+                  Toolbar: CustomToolbar
+               }}
+               // pinnedColumns={pinnedColumns}
+               // onPinnedColumnsChange={handlePinnedColumnsChange}
+               // pagination
+               // paginationMode="server"
+               // rowsPerPageOptions={[20]}
+               // sortingMode="server"
+               // filterMode="server"
+               // page={pageNumber}
+               // checkboxSelection
+               rowCount={data && data.totalRows}
+               // onPageSizeChange={handleRowsPerPageChange}
+               // onStateChange={handleStateChange}
+               // density={density}
+               // loading={loading}
+               // filterModel={filterModel}
+               // onFilterModelChange={handleFilterChange}
+               // columnVisibilityModel={columnVisibilityModel}
+               // onColumnVisibilityModelChange={handleColumnVisibilityChange}
+               // onColumnOrderChange={handleColumnOrderChange}
+               // onSelectionModelChange={selectionChanged}
+               // onSortModelChange={handleSortChange}
+               // sortingOrder={[ "asc", "desc" ]}
+               // sortModel={columnSortModel}
+            />
          </Box>
       </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/misc/WorkflowViewer.tsx

@@ -1,383 +0,0 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2022.  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 {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException";
-import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QCriteriaOperator";
-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 Divider from "@mui/material/Divider";
-import Grid from "@mui/material/Grid";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import ListItemAvatar from "@mui/material/ListItemAvatar";
-import ListItemText from "@mui/material/ListItemText";
-import Modal from "@mui/material/Modal";
-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 TabPanel from "qqq/components/misc/TabPanel";
-import CustomWidthTooltip from "qqq/components/tooltips/CustomWidthTooltip";
-import WorkflowEditor, {WorkflowEditorProps} from "qqq/components/workflows/WorkflowEditor";
-import WorkflowPreview from "qqq/components/workflows/WorkflowPreview";
-import {LoadingState} from "qqq/models/LoadingState";
-import DeveloperModeUtils from "qqq/utils/DeveloperModeUtils";
-import Client from "qqq/utils/qqq/Client";
-import ValueUtils from "qqq/utils/qqq/ValueUtils";
-
-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();
-
-// Declaring props types for ViewForm
-interface Props
-{
-   workflowId?: number;
-}
-
-WorkflowViewer.defaultProps =
-   {};
-
-export default function WorkflowViewer({workflowId}: Props): JSX.Element
-{
-   const [workflowRecord, setWorkflowRecord] = useState(null as QRecord);
-   const [asyncLoadInited, setAsyncLoadInited] = useState(false);
-   const [versionRecordList, setVersionRecordList] = useState(null as QRecord[]);
-   const [selectedRevisionRecord, setSelectedRevisionRecord] = useState(null as QRecord);
-   const [currentVersionId, setCurrentVersionId] = useState(null as number);
-   const [notFoundMessage, setNotFoundMessage] = useState(null);
-   const [selectedTab, setSelectedTab] = useState(0);
-   const [editorProps, setEditorProps] = useState(null as WorkflowEditorProps);
-   const [successText, setSuccessText] = 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"));
-
-   if (!asyncLoadInited)
-   {
-      setAsyncLoadInited(true);
-
-      (async () =>
-      {
-         try
-         {
-            const workflowRecord = await qController.get("workflow", workflowId);
-            setWorkflowRecord(workflowRecord);
-
-            const criteria = [new QFilterCriteria("workflowId", QCriteriaOperator.EQUALS, [workflowId])];
-            const orderBys = [new QFilterOrderBy("sequenceNo", false)];
-            const filter = new QQueryFilter(criteria, orderBys, null, "AND", 0, 25);
-            const versions = await qController.query("workflowRevision", filter);
-            console.log("Fetched versions:");
-            console.log(versions);
-            setVersionRecordList(versions);
-
-            if (versions && versions.length > 0)
-            {
-               setCurrentVersionId(versions[0].values.get("id"));
-               const latestVersion = await qController.get("workflowRevision", versions[0].values.get("id"));
-               console.log("Fetched latestVersion:");
-               console.log(latestVersion);
-               setSelectedRevisionRecord(latestVersion);
-               loadingSelectedVersion.setNotLoading();
-               forceUpdate();
-            }
-         }
-         catch (e)
-         {
-            if (e instanceof QException)
-            {
-               if ((e as QException).status === 404)
-               {
-                  setNotFoundMessage("Workflow data could not be found.");
-                  return;
-               }
-            }
-            setNotFoundMessage("Error loading workflow data: " + e);
-         }
-      })();
-   }
-
-   const editContents = (contents: string) =>
-   {
-      const editorProps = {} as WorkflowEditorProps;
-      editorProps.title = (contents ? "Editing Workflow: " : "Initializing Workflow: ") + workflowRecord?.values?.get("name");
-      editorProps.contents = contents;
-      editorProps.workflowId = workflowId;
-      setEditorProps(editorProps);
-   };
-
-   const closeEditingWorkflow = (event: object, reason: string, alert: string = null) =>
-   {
-      if (reason === "backdropClick" || reason === "escapeKeyDown")
-      {
-         return;
-      }
-
-      if (reason === "saved")
-      {
-         setAsyncLoadInited(false);
-         forceUpdate();
-
-         if (alert)
-         {
-            setSuccessText(alert);
-         }
-      }
-      else if (reason === "failed")
-      {
-         setAsyncLoadInited(false);
-         forceUpdate();
-
-         if (alert)
-         {
-            setFailText(alert);
-         }
-      }
-
-      setEditorProps(null);
-   };
-
-   const changeTab = (newValue: number) =>
-   {
-      setSelectedTab(newValue);
-      forceUpdate();
-   };
-
-   const selectVersion = (version: QRecord) =>
-   {
-      (async () =>
-      {
-         // fetch the full version
-         setSelectedRevisionRecord(version);
-         loadingSelectedVersion.setLoading();
-
-         const selectedVersion = await qController.get("workflowRevision", version.values.get("id"));
-         console.log("Fetched selectedVersion:");
-         console.log(selectedVersion);
-         setSelectedRevisionRecord(selectedVersion);
-         loadingSelectedVersion.setNotLoading();
-         forceUpdate();
-      })();
-   };
-
-   function getVersionsList(versionRecordList: QRecord[], selectedVersionRecord: QRecord)
-   {
-      return <List sx={{pl: 3, height: "400px", overflow: "auto"}}>
-         {
-            (versionRecordList == null || versionRecordList.length == 0) ?
-               <Typography variant="body2">
-                  There are not any versions of this workflow.
-               </Typography>
-               : <></>
-         }
-         {
-            versionRecordList?.map((version: any) => (
-               <React.Fragment key={version.values.get("id")}>
-                  <ListItem sx={{p: 1}} alignItems="flex-start" selected={selectedVersionRecord?.values?.get("id") == version.values.get("id")} onClick={(event) => selectVersion(version)}>
-                     <ListItemAvatar>
-                        <Avatar sx={{bgcolor: DeveloperModeUtils.revToColor("", workflowId, version.values.get("sequenceNo"))}}>{`${version.values.get("sequenceNo")}`}</Avatar>
-                     </ListItemAvatar>
-                     <ListItemText
-                        primaryTypographyProps={{fontSize: "1rem"}}
-                        secondaryTypographyProps={{fontSize: ".85rem"}}
-                        primary={
-                           <div style={{overflow: "hidden", textOverflow: "ellipsis", maxHeight: "5rem"}} title={version.values.get("commitMessage")}>
-                              {currentVersionId == version?.values?.get("id") && <Chip label="CURRENT" color="success" variant="outlined" size="small" sx={{mr: 1, fontSize: "0.75rem"}} />}
-                              {version.values.get("commitMessage")}
-                           </div>
-                        }
-                        secondary={
-                           <>
-                              {ValueUtils.formatDateTime(version.values.get("createDate"))}
-                              <br />
-                              {version.values.get("author")}
-                           </>
-                        }
-                     />
-                  </ListItem>
-                  <Divider sx={{my: 0.5}} variant="inset" component="li" />
-               </React.Fragment>
-            ))
-         }
-      </List>;
-   }
-
-   let editButtonTooltip = "";
-   let editButtonText = "Create New Version";
-   if (currentVersionId)
-   {
-      if (currentVersionId === selectedRevisionRecord?.values?.get("id"))
-      {
-         editButtonTooltip = "If you make any changes to this workflow, a new version will be created when you hit Save.";
-         editButtonText = "Edit";
-      }
-      else
-      {
-         editButtonTooltip = "If you want to make this previous Version active, bring up the Edit window, make any changes " +
-            "to the old Version if they are needed, then click Save. A new Version will be created, and set as Current.";
-         editButtonText = "Edit and Activate";
-      }
-   }
-
-   return (
-      <Grid container>
-         <Grid item xs={12}>
-            <Box>
-               {
-                  <Box>
-                     {
-                        successText ? (
-                           <Snackbar open={successText !== null && successText !== ""} autoHideDuration={6000} onClose={() => setSuccessText(null)} anchorOrigin={{vertical: "top", horizontal: "center"}}>
-                              <Alert color="success" onClose={() => setSuccessText(null)}>
-                                 {successText}
-                              </Alert>
-                           </Snackbar>
-                        ) : ("")
-                     }
-                     {
-                        failText ? (
-                           <Snackbar open={failText !== null && failText !== ""} autoHideDuration={6000} onClose={() => setFailText(null)} anchorOrigin={{vertical: "top", horizontal: "center"}}>
-                              <Alert color="error" onClose={() => setFailText(null)}>
-                                 {failText}
-                              </Alert>
-                           </Snackbar>
-                        ) : ("")
-                     }
-
-                     <Grid container spacing={3}>
-                        <Grid item xs={12}>
-                           <>
-                              <Tabs
-                                 sx={{m: 0, mb: 1, mt: 0}}
-                                 value={selectedTab}
-                                 onChange={(event, newValue) => changeTab(newValue)}
-                                 variant="standard"
-                              >
-                                 <Tab label="Versions" id="simple-tab-0" aria-controls="simple-tabpanel-0" />
-                                 <Tab label="Preview" id="simple-tab-1" aria-controls="simple-tabpanel-1" />
-                                 <Tab label="Something Else" id="simple-tab-2" aria-controls="simple-tabpanel-2" />
-                              </Tabs>
-
-                              <TabPanel index={0} value={selectedTab}>
-                                 <Grid container>
-                                    <Grid item xs={4}>
-                                       <Box display="flex" alignItems="center" gap={2} pb={1} height="40px">
-                                          <Typography variant="h6" pl={3}>Versions</Typography>
-                                       </Box>
-                                       {getVersionsList(versionRecordList, selectedRevisionRecord)}
-                                    </Grid>
-
-                                    <Grid item xs={8}>
-                                       <Box display="flex" alignItems="center" justifyContent="space-between" gap={2} pb={1} height="40px">
-                                          {
-                                             selectedRevisionRecord ?
-                                                <Typography variant="h6">
-                                                   Version {selectedRevisionRecord.values.get("sequenceNo")}
-                                                   {
-                                                      currentVersionId === selectedRevisionRecord.values.get("id")
-                                                         ? (<> (Current)</>)
-                                                         : <></>
-                                                   }
-                                                </Typography>
-                                                : <></>
-                                          }
-                                          <CustomWidthTooltip title={editButtonTooltip}>
-                                             <Button sx={{py: 0}} onClick={() => editContents(selectedRevisionRecord?.values?.get("contents"))}>
-                                                {editButtonText}
-                                             </Button>
-                                          </CustomWidthTooltip>
-                                       </Box>
-                                       <WorkflowPreview />
-                                    </Grid>
-                                 </Grid>
-                              </TabPanel>
-                              <TabPanel index={1} value={selectedTab}>
-                                 <Grid container height="440px">
-                                    <Grid item xs={4}>
-                                       <Box display="flex" alignItems="center" gap={2} pb={1} height="40px">
-                                          <Typography variant="h6" pl={3}>Versions</Typography>
-                                       </Box>
-                                       {getVersionsList(versionRecordList, selectedRevisionRecord)}
-                                    </Grid>
-                                    <Grid item xs={8}>
-                                       <Box display="flex" alignItems="center" gap={2} pb={1} height="40px">
-                                          <Typography variant="h6" pl={3}>Data Preview (Version {selectedRevisionRecord?.values?.get("sequenceNo")})</Typography>
-                                       </Box>
-                                       <Box height="400px" overflow="auto" ml={1} fontSize="14px">
-                                          {
-                                             loadingSelectedVersion.isNotLoading() && selectedRevisionRecord && selectedRevisionRecord.values.get("contents") ? (
-                                                <>
-                                                   <AceEditor
-                                                      mode="json"
-                                                      theme="github"
-                                                      name={"viewData"}
-                                                      readOnly
-                                                      highlightActiveLine={false}
-                                                      setOptions={{useWorker: false}}
-                                                      editorProps={{$blockScrolling: true}}
-                                                      width="100%"
-                                                      height="400px"
-                                                      value={selectedRevisionRecord?.values?.get("contents")}
-                                                   />
-                                                </>
-                                             ) : null
-                                          }
-                                          {
-                                             loadingSelectedVersion.isLoadingSlow() && selectedRevisionRecord && <Box fontSize="14px" pl={3}>Loading...</Box>
-                                          }
-                                       </Box>
-                                    </Grid>
-                                 </Grid>
-                              </TabPanel>
-                           </>
-                        </Grid>
-                     </Grid>
-                     {
-                        editorProps &&
-                        <Modal open={editorProps !== null} onClose={(event, reason) => closeEditingWorkflow(event, reason)}>
-                           <WorkflowEditor
-                              closeCallback={closeEditingWorkflow}
-                              {...editorProps}
-                           />
-                        </Modal>
-                     }
-                  </Box>
-               }
-            </Box>
-         </Grid>
-      </Grid>
-   );
-}

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 {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";
-import React, {useEffect, useMemo, useState} from "react";
-import {useAsyncDebounce, useExpanded, useGlobalFilter, usePagination, useSortBy, useTable} from "react-table";
 
 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;
@@ -106,17 +101,17 @@ function DataTable({
    entries = entriesPerPageOptions ? entriesPerPageOptions : ["10", "25", "50", "100"];
 
    let widths = [];
-   for (let i = 0; i < table.columns.length; i++)
+   for(let i = 0; i<table.columns.length; i++)
    {
       const column = table.columns[i];
-      if (column.type !== "hidden")
+      if(column.type !== "hidden")
       {
          widths.push(table.columns[i].width ?? "1fr");
       }
    }
 
    let showExpandColumn = false;
-   if (table.rows)
+   if(table.rows)
    {
       for (let i = 0; i < table.rows.length; i++)
       {
@@ -129,7 +124,7 @@ function DataTable({
    }
 
    const columnsToMemo = [...table.columns];
-   if (showExpandColumn)
+   if(showExpandColumn)
    {
       widths.push("60px");
       columnsToMemo.push(
@@ -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,38 +280,23 @@ 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)
+      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", alignItems: "flex-end", gridTemplateColumns: gridTemplateColumns}}>
+                        <TableRow key={i} {...headerGroup.getHeaderGroupProps()} sx={{display: "grid", gridTemplateColumns: gridTemplateColumns}}>
                            {headerGroup.headers.map((column: any) => (
                               column.type !== "hidden" && (
                                  <DataTableHeadCell
@@ -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>
@@ -356,10 +324,10 @@ function DataTable({
                   //////////////////////////////////////////////////////////////////////////////////
                   // don't do an end-border on nested rows - unless they're the last one in a set //
                   //////////////////////////////////////////////////////////////////////////////////
-                  if (row.depth > 0)
+                  if(row.depth > 0)
                   {
                      overrideNoEndBorder = true;
-                     if (key + 1 < rows.length && rows[key + 1].depth == 0)
+                     if(key + 1 < rows.length && rows[key + 1].depth == 0)
                      {
                         overrideNoEndBorder = false;
                      }
@@ -368,28 +336,18 @@ function DataTable({
                   ///////////////////////////////////////
                   // don't do end-border on the footer //
                   ///////////////////////////////////////
-                  if (isFooter)
+                  if(isFooter)
                   {
                      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";
@@ -28,13 +27,13 @@ import TableBody from "@mui/material/TableBody";
 import TableContainer from "@mui/material/TableContainer";
 import TableRow from "@mui/material/TableRow";
 import parse from "html-react-parser";
+import React, {useEffect, useState} from "react";
 import MDTypography from "qqq/components/legacy/MDTypography";
 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 DataTable from "qqq/components/widgets/tables/DataTable";
 import Client from "qqq/utils/qqq/Client";
-import React, {useEffect, useState} from "react";
 
 
 //////////////////////////////////////
@@ -43,7 +42,6 @@ import React, {useEffect, useState} from "react";
 export interface TableDataInput
 {
    columns: { [key: string]: any }[];
-   columnHeaderTooltips?: { [columnName: string]: string | JSX.Element };
    rows: { [key: string]: any }[];
 }
 
@@ -59,12 +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);
 
@@ -78,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
@@ -89,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"
@@ -109,7 +104,7 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown,
                   <TableContainer sx={{boxShadow: "none"}}>
                      <Table>
                         <Box component="thead">
-                           <TableRow sx={{alignItems: "flex-end"}} key="header">
+                           <TableRow key="header">
                               {Array(8).fill(0).map((_, i) =>
                                  <DataTableHeadCell key={`head-${i}`} sorted={false} width="auto" align="center">
                                     <Skeleton width="100%" />

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

@@ -21,16 +21,18 @@
 
 
 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 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";
-import React, {useContext, useEffect, useState} from "react";
 
 interface Props
 {
@@ -40,14 +42,14 @@ interface Props
    isChild?: boolean;
 }
 
-TableWidget.defaultProps = {};
+TableWidget.defaultProps = {
+};
 
 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;
@@ -85,7 +87,7 @@ function TableWidget(props: Props): JSX.Element
 
                const cell = rows[i][columns[j].accessor];
                let text = cell;
-               if (columns[j].type != "default")
+               if(columns[j].type != "default")
                {
                   text = htmlToText(cell,
                      {
@@ -103,8 +105,8 @@ function TableWidget(props: Props): JSX.Element
 
          setCsv(csv);
 
-         const fileName = WidgetUtils.makeExportFileName(props.widgetData, props.widgetMetaData);
-         setFileName(fileName);
+         const fileName = (props.widgetData.label ?? props.widgetMetaData.label) + " " + ValueUtils.formatDateTimeForFileName(new Date()) + ".csv";
+         setFileName(fileName)
 
          console.log(`useEffect, setting fileName ${fileName}`);
       }
@@ -113,47 +115,24 @@ 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);
       }
       else
       {
-         alert("There is no data available to export.");
+         alert("There is no data available to export.")
       }
-   };
+   }
 
    const labelAdditionalElementsLeft: JSX.Element[] = [];
-   if (props.widgetData?.linkText && props.widgetData?.linkURL)
+   if(props.widgetMetaData?.showExportButton)
    {
-      labelAdditionalElementsLeft.push(WidgetUtils.generateLabelLink(props.widgetData?.linkText, props.widgetData?.linkURL));
-   }
-   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 (
@@ -171,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/components/workflows/RootEditor.tsx

@@ -1,21 +0,0 @@
-import {ChangeEvent} from "react";
-import {useRootEditor} from "sequential-workflow-designer-react";
-import {WorkflowDefinition} from "./model";
-
-export function RootEditor()
-{
-   const {properties, setProperty, isReadonly} = useRootEditor<WorkflowDefinition>();
-
-   function onAlfaChanged(e: ChangeEvent)
-   {
-      setProperty("alfa", (e.target as HTMLInputElement).value);
-   }
-
-   return (
-      <>
-         <h2>Optimization Workflow Editor</h2>
-
-         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /><br />Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-      </>
-   );
-}

src/qqq/components/workflows/StepEditor.tsx

@@ -1,69 +0,0 @@
-import {ChangeEvent} from "react";
-import {useStepEditor} from "sequential-workflow-designer-react";
-import {SwitchStep, TaskStep, WarehouseOptimizationStep} from "./model";
-
-export function StepEditor()
-{
-   const {type, name, step, properties, isReadonly, setName, setProperty, notifyPropertiesChanged, notifyChildrenChanged} =
-      useStepEditor<TaskStep | SwitchStep | WarehouseOptimizationStep>();
-
-   function onNameChanged(e: ChangeEvent)
-   {
-      setName((e.target as HTMLInputElement).value);
-   }
-
-   function onXChanged(e: ChangeEvent)
-   {
-      setProperty("warehouse", (e.target as HTMLInputElement).value);
-   }
-
-   function onYChanged(e: ChangeEvent)
-   {
-      properties["wmsConnection"] = (e.target as HTMLInputElement).value;
-      notifyPropertiesChanged();
-   }
-
-   function toggleExtraBranch()
-   {
-      const switchStep = step as SwitchStep;
-      if (switchStep.branches["extra"])
-      {
-         delete switchStep.branches["extra"];
-      }
-      else
-      {
-         switchStep.branches["extra"] = [];
-      }
-      notifyChildrenChanged();
-   }
-
-   return (
-      <>
-         <h2>Step Editor</h2>
-         <h3>{type}</h3>
-
-         <h4>Pre-Script</h4>
-         <select>
-            <option>Pre Script #1</option>
-            <option>Pre Script #2</option>
-            <option>Pre Script #3</option>
-         </select>
-
-         <h4>Post-Script</h4>
-         <select>
-            <option>Post Script #1</option>
-            <option>Post Script #2</option>
-            <option>Post Script #3</option>
-         </select>
-
-         {type === "switch" && (
-            <>
-               <h4>Extra branch</h4>
-               <button onClick={toggleExtraBranch} disabled={isReadonly}>
-                  Toggle branch
-               </button>
-            </>
-         )}
-      </>
-   );
-}

src/qqq/components/workflows/StepUtils.ts

@@ -1,214 +0,0 @@
-import {Branches, Uid} from "sequential-workflow-designer";
-import {ContainerStep, OptimizationStepType, SwitchStep, TaskStep, WarehouseOptimizationStep} from "./model";
-
-export function createTaskStep(): TaskStep
-{
-   return {
-      id: Uid.next(),
-      componentType: "task",
-      type: "task",
-      name: "blah",
-      properties: {}
-   };
-}
-
-
-//////////////////////
-// define all steps //
-//////////////////////
-export function createDetermineWarehouseRoutingStep(): WarehouseOptimizationStep
-{
-   return createStep("Determine Warehouse", "determineWarehouseRouting");
-}
-
-export function createDetermineLineHaulLaneStep(): WarehouseOptimizationStep
-{
-   return createStep("Determine Line Haul Lane", "determineLineHaulLane");
-}
-
-export function createValidateLineItemsStep(): WarehouseOptimizationStep
-{
-   return createStep("Validate Line Items", "validateLineItems");
-}
-
-export function createDetermineCoolingCategoryStep(): WarehouseOptimizationStep
-{
-   return createStep("Determine Cooling Category", "determineCoolingCategory");
-}
-
-export function createValidateOptimizationRulesStep(): WarehouseOptimizationStep
-{
-   return createStep("Validate Optimization Rules", "validateOptimizationRules");
-}
-
-export function createValidateAddressStep(): WarehouseOptimizationStep
-{
-   return createStep("Validate Address", "validateAddress");
-}
-
-export function createDetermineCarrierServiceStep(): WarehouseOptimizationStep
-{
-   return createStep("Determine Carrier Service", "determineCarrierService");
-}
-
-export function createDetermineTNTStep(): WarehouseOptimizationStep
-{
-   return createStep("Determine TNT ", "determineTNT");
-}
-
-export function createDetermineOrderServiceDatesStep(): WarehouseOptimizationStep
-{
-   return createStep("Determine Order Service Dates ", "determineOrderServiceDates");
-}
-
-export function createOrderMatchesFilterSelectorStep(): WarehouseOptimizationStep
-{
-   return createStep("Order Matches Filter Selector", "orderMatchesFilterSelector");
-}
-
-
-////////////////////////
-// define all outputs //
-////////////////////////
-export function createDetermineWarehouseRoutingOuptut(): SwitchStep
-{
-   return (createOutput("Output", {Edison: [], Patterson: [], Stockton: []}));
-}
-
-export function createDetermineLineHaulLaneOutput(): SwitchStep
-{
-   return (createOutput("Output", {Chicago: [], Dallas: [], Sheboygan: []}));
-}
-
-export function createValidateLineItemsOutput(): SwitchStep
-{
-   return (createOutput("Output", {"Is Valid": [], "Not Valid": []}));
-}
-
-export function createDetermineCoolingCategoryOutput(): SwitchStep
-{
-   return (createOutput("Output", {"Ambient": [], "Frozen": [], "Other": []}));
-}
-
-export function createValidateOptimizationRulesOutput(): SwitchStep
-{
-   return (createOutput("Output", {"Is Valid": [], "Not Valid": []}));
-}
-
-export function createAddressValidationOutput(): SwitchStep
-{
-   return (createOutput("Output", {"Is Valid": [], "Not Valid": []}));
-}
-
-export function createDetermineCarrierServiceOutput(): SwitchStep
-{
-   return (createOutput("Output", {"Fedex Ground": [], "UPS Ground": [], "OnTrac Ground": []}));
-}
-
-export function createDetermineTNTOutput(): SwitchStep
-{
-   return (createOutput("Output", {1: [], 2: [], 3: [], "4+": []}));
-}
-
-export function createDetermineOrderServiceDatesOutput(): SwitchStep
-{
-   return (createOutput("Output", {Monday: [], Tuesday: [], Wednesday: []}));
-}
-
-export function createOrderMatchesFilterSelectorOutput(): SwitchStep
-{
-   return (createOutput("Output", {"Matches": [], "No Match": []}));
-}
-
-
-//////////////////////////////
-// groups of steps + output //
-//////////////////////////////
-export function createDetermineWarehouseRoutingGroup(): ContainerStep
-{
-   return (createGroup("Determine Warehouse Routing", [createDetermineWarehouseRoutingStep(), createDetermineWarehouseRoutingOuptut()]));
-}
-
-export function createDetermineLineHaulLaneGroup(): ContainerStep
-{
-   return (createGroup("Determine Line Haul Lane", [createDetermineLineHaulLaneStep(), createDetermineLineHaulLaneOutput()]));
-}
-
-export function createValidateLineItemsGroup(): ContainerStep
-{
-   return (createGroup("Validate Line Items", [createValidateLineItemsStep(), createValidateLineItemsOutput()]));
-}
-
-export function createDetermineCoolingCategoryGroup(): ContainerStep
-{
-   return (createGroup("Determine Cooling Category", [createDetermineCoolingCategoryStep(), createDetermineCoolingCategoryOutput()]));
-}
-
-export function createValidateOptimizationRulesGroup(): ContainerStep
-{
-   return (createGroup("Validate Optimization Rules", [createValidateOptimizationRulesStep(), createValidateOptimizationRulesOutput()]));
-}
-
-export function createValidateAddressGroup(): ContainerStep
-{
-   return (createGroup("Validate Address", [createValidateAddressStep(), createAddressValidationOutput()]));
-}
-
-export function createDetermineCarrierServiceGroup(): ContainerStep
-{
-   return (createGroup("Determine Carrier Service", [createDetermineCarrierServiceStep(), createDetermineCarrierServiceOutput()]));
-}
-
-export function createDetermineTNTGroup(): ContainerStep
-{
-   return (createGroup("Determine TNT", [createDetermineTNTStep(), createDetermineTNTOutput()]));
-}
-
-export function createDetermineOrderServiceDatesGroup(): ContainerStep
-{
-   return (createGroup("Determine Order Service Dates", [createDetermineOrderServiceDatesStep(), createDetermineOrderServiceDatesOutput()]));
-}
-
-export function createOrderMatchesFilterSelector(): ContainerStep
-{
-   return (createGroup("Order Matches Filter Selector", [createOrderMatchesFilterSelectorStep(), createOrderMatchesFilterSelectorOutput()]));
-}
-
-
-///////////
-// utils //
-///////////
-export function createStep(name: string, type: OptimizationStepType): WarehouseOptimizationStep
-{
-   return {
-      id: Uid.next(),
-      componentType: "task",
-      type: type,
-      name: name,
-      properties: {}
-   };
-}
-
-export function createOutput(name: string, branches: Branches): SwitchStep
-{
-   return {
-      id: Uid.next(),
-      componentType: "switch",
-      type: "switch",
-      name: name,
-      properties: {},
-      branches: branches
-   };
-}
-
-export function createGroup(name: string, sequence: (WarehouseOptimizationStep | SwitchStep)[]): ContainerStep
-{
-   return {
-      id: Uid.next(),
-      componentType: "container",
-      type: "container",
-      name: name,
-      properties: {},
-      sequence: sequence
-   };
-}

src/qqq/components/workflows/WorkflowEditor.tsx

@@ -1,187 +0,0 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2022.  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 {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
-import {ToggleButtonGroup, Typography} from "@mui/material";
-import Alert from "@mui/material/Alert";
-import Box from "@mui/material/Box";
-import Card from "@mui/material/Card";
-import Grid from "@mui/material/Grid";
-import Snackbar from "@mui/material/Snackbar";
-import TextField from "@mui/material/TextField";
-import FormData from "form-data";
-import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
-import WorkflowPreview from "qqq/components/workflows/WorkflowPreview";
-import Client from "qqq/utils/qqq/Client";
-import React, {useReducer, useState} from "react";
-
-export interface WorkflowEditorProps
-{
-   title: string;
-   workflowId: number;
-   contents: string;
-   closeCallback: any;
-}
-
-
-const qController = Client.getInstance();
-
-function WorkflowEditor({title, workflowId, contents, closeCallback}: WorkflowEditorProps): JSX.Element
-{
-   const [closing, setClosing] = useState(false);
-   const [updatedCode, setUpdatedCode] = useState(contents);
-   const [commitMessage, setCommitMessage] = useState("");
-   const [openTool, setOpenTool] = useState(null);
-   const [errorAlert, setErrorAlert] = useState("");
-   const [, forceUpdate] = useReducer((x) => x + 1, 0);
-
-   const changeOpenTool = (event: React.MouseEvent<HTMLElement>, newValue: string | null) =>
-   {
-      setOpenTool(newValue);
-
-      /////////////////////////////////////////////////
-      // need this to make Ace recognize new height. //
-      /////////////////////////////////////////////////
-      setTimeout(() =>
-      {
-         window.dispatchEvent(new Event("resize"));
-      }, 100);
-   };
-
-   const saveClicked = () =>
-   {
-      try
-      {
-         JSON.parse(updatedCode);
-      }
-      catch (e)
-      {
-         setErrorAlert("Cannot save Workflow Contents.  Invalid json:  " + e);
-         return;
-      }
-
-      setClosing(true);
-
-      (async () =>
-      {
-         const formData = new FormData();
-         formData.append("workflowId", workflowId);
-         formData.append("contents", updatedCode);
-         formData.append("commitMessage", commitMessage);
-
-         //////////////////////////////////////////////////////////////////
-         // we don't want this job to go async, so, pass a large timeout //
-         //////////////////////////////////////////////////////////////////
-         formData.append("_qStepTimeoutMillis", 60 * 1000);
-
-         const formDataHeaders = {
-            "content-type": "multipart/form-data; boundary=--------------------------320289315924586491558366",
-         };
-
-         const processResult = await qController.processInit("storeWorkflowVersionProcess", formData, formDataHeaders);
-         if (processResult instanceof QJobError)
-         {
-            const jobError = processResult as QJobError;
-            closeCallback(null, "failed", jobError.userFacingError ?? jobError.error);
-         }
-         console.log("process result");
-         console.log(processResult);
-
-         closeCallback(null, "saved", "Saved New Workflow Version");
-      })();
-   };
-
-   const cancelClicked = () =>
-   {
-      setClosing(true);
-      closeCallback(null, "cancelled");
-   };
-
-   const updateCode = (value: string, event: any) =>
-   {
-      console.log("Updating code");
-      setUpdatedCode(value);
-      forceUpdate();
-   };
-
-   const updateCommitMessage = (event: React.ChangeEvent<HTMLInputElement>) =>
-   {
-      setCommitMessage(event.target.value);
-   };
-
-   return (
-      <Box sx={{position: "absolute", overflowY: "auto", height: "100%", width: "100%"}} p={6}>
-         <Card sx={{height: "100%", p: 3}}>
-
-            <Snackbar open={errorAlert !== null && errorAlert !== ""} onClose={(event?: React.SyntheticEvent | Event, reason?: string) =>
-            {
-               if (reason === "clickaway")
-               {
-                  return;
-               }
-               setErrorAlert("");
-            }} anchorOrigin={{vertical: "top", horizontal: "center"}}>
-               <Alert color="error" onClose={() => setErrorAlert("")}>
-                  {errorAlert}
-               </Alert>
-            </Snackbar>
-
-            <Box display="flex" justifyContent="space-between" alignItems="center">
-               <Typography variant="h5" pb={1}>
-                  {title}
-               </Typography>
-
-               <Box>
-                  <Typography variant="body2" display="inline" pr={1}>
-                     Tools:
-                  </Typography>
-                  <ToggleButtonGroup
-                     value={openTool}
-                     exclusive
-                     onChange={changeOpenTool}
-                     size="small"
-                     sx={{pb: 1}}
-                  >
-                  </ToggleButtonGroup>
-               </Box>
-            </Box>
-
-            <Box sx={{height: openTool ? "45%" : "100%"}}>
-               <WorkflowPreview />
-            </Box>
-
-            <Box pt={1}>
-               <Grid container alignItems="flex-end">
-                  <Box width="50%">
-                     <TextField id="commitMessage" label="Commit Message" variant="standard" fullWidth value={commitMessage} onChange={updateCommitMessage} />
-                  </Box>
-                  <Grid container justifyContent="flex-end" spacing={3}>
-                     <QCancelButton disabled={closing} onClickHandler={cancelClicked} />
-                     <QSaveButton disabled={closing} onClickHandler={saveClicked} />
-                  </Grid>
-               </Grid>
-            </Box>
-         </Card>
-      </Box>
-   );
-}
-
-export default WorkflowEditor;

src/qqq/components/workflows/WorkflowPreview.tsx

@@ -1,199 +0,0 @@
-import {useEffect, useMemo, useState} from "react";
-import {ObjectCloner, Step, StepsConfiguration, ToolboxConfiguration, ValidatorConfiguration} from "sequential-workflow-designer";
-import {SequentialWorkflowDesigner, useSequentialWorkflowDesignerController, wrapDefinition} from "sequential-workflow-designer-react";
-import {WorkflowDefinition} from "./model";
-import {RootEditor} from "./RootEditor";
-import {StepEditor} from "./StepEditor";
-import {createDetermineCarrierServiceGroup, createDetermineCoolingCategoryGroup, createDetermineLineHaulLaneGroup, createDetermineOrderServiceDatesGroup, createDetermineTNTGroup, createDetermineWarehouseRoutingGroup, createOrderMatchesFilterSelector, createTaskStep, createValidateAddressGroup, createValidateLineItemsGroup, createValidateOptimizationRulesGroup} from "./StepUtils";
-
-const startDefinition: WorkflowDefinition = {
-   properties: {
-      alfa: "bravo"
-   },
-   sequence: []
-};
-
-
-function WorkflowPreview()
-{
-   const controller = useSequentialWorkflowDesignerController();
-   const toolboxConfiguration: ToolboxConfiguration = useMemo(
-      () => ({
-         groups: [{
-            name: "Optimization Steps", steps: [
-               createDetermineCarrierServiceGroup(),
-               createDetermineCoolingCategoryGroup(),
-               createDetermineLineHaulLaneGroup(),
-               createDetermineOrderServiceDatesGroup(),
-               createDetermineTNTGroup(),
-               createDetermineWarehouseRoutingGroup()
-            ]
-         },
-         {
-            name: "Validators", steps: [
-               createValidateAddressGroup(),
-               createValidateLineItemsGroup(),
-               createValidateOptimizationRulesGroup()
-            ]
-         },
-         {
-            name: "Utilities", steps: [
-               createOrderMatchesFilterSelector()
-            ]
-         }
-         ]
-      }),
-      []
-   );
-   const stepsConfiguration: StepsConfiguration = useMemo(
-      () => ({
-         iconUrlProvider: () => null
-      }),
-      []
-   );
-   const validatorConfiguration: ValidatorConfiguration = useMemo(
-      () => ({
-         step: (step: Step) => Boolean(step.name),
-         root: (definition: WorkflowDefinition) => Boolean(definition.properties.alfa)
-      }),
-      []
-   );
-
-   const [isVisible, setIsVisible] = useState(true);
-   const [isToolboxCollapsed, setIsToolboxCollapsed] = useState(false);
-   const [isEditorCollapsed, setIsEditorCollapsed] = useState(false);
-   const [definition, setDefinition] = useState(() => wrapDefinition(startDefinition));
-   const [selectedStepId, setSelectedStepId] = useState<string | null>(null);
-   const [isReadonly, setIsReadonly] = useState(false);
-   const [moveViewportToStep, setMoveViewportToStep] = useState<string | null>(null);
-   const definitionJson = JSON.stringify(definition.value, null, 2);
-
-   useEffect(() =>
-   {
-      console.log(`definition updated, isValid=${definition.isValid}`);
-   }, [definition]);
-
-   useEffect(() =>
-   {
-      if (moveViewportToStep)
-      {
-         if (controller.isReady())
-         {
-            controller.moveViewportToStep(moveViewportToStep);
-         }
-         setMoveViewportToStep(null);
-      }
-   }, [controller, moveViewportToStep]);
-
-   function toggleVisibilityClicked()
-   {
-      setIsVisible(!isVisible);
-   }
-
-   function toggleSelectionClicked()
-   {
-      const id = definition.value.sequence[0].id;
-      setSelectedStepId(selectedStepId ? null : id);
-   }
-
-   function toggleIsReadonlyClicked()
-   {
-      setIsReadonly(!isReadonly);
-   }
-
-   function toggleToolboxClicked()
-   {
-      setIsToolboxCollapsed(!isToolboxCollapsed);
-   }
-
-   function toggleEditorClicked()
-   {
-      setIsEditorCollapsed(!isEditorCollapsed);
-   }
-
-   function moveViewportToFirstStepClicked()
-   {
-      const fistStep = definition.value.sequence[0];
-      if (fistStep)
-      {
-         setMoveViewportToStep(fistStep.id);
-      }
-   }
-
-   async function appendStepClicked()
-   {
-      const newStep = createTaskStep();
-
-      const newDefinition = ObjectCloner.deepClone(definition.value);
-      newDefinition.sequence.push(newStep);
-      // We need to wait for the controller to finish the operation before we can select the new step
-      await controller.replaceDefinition(newDefinition);
-
-      setSelectedStepId(newStep.id);
-      setMoveViewportToStep(newStep.id);
-   }
-
-   function reloadDefinitionClicked()
-   {
-      const newDefinition = ObjectCloner.deepClone(startDefinition);
-      setSelectedStepId(null);
-      setDefinition(wrapDefinition(newDefinition));
-   }
-
-   function yesOrNo(value: boolean)
-   {
-      return value ? "✅ Yes" : "⛔ No";
-   }
-
-   return (
-      <>
-         {isVisible && (
-            <SequentialWorkflowDesigner
-               undoStackSize={10}
-               definition={definition}
-               onDefinitionChange={setDefinition}
-               selectedStepId={selectedStepId}
-               isReadonly={isReadonly}
-               onSelectedStepIdChanged={setSelectedStepId}
-               toolboxConfiguration={toolboxConfiguration}
-               isToolboxCollapsed={isToolboxCollapsed}
-               onIsToolboxCollapsedChanged={setIsToolboxCollapsed}
-               stepsConfiguration={stepsConfiguration}
-               validatorConfiguration={validatorConfiguration}
-               controlBar={true}
-               rootEditor={<RootEditor />}
-               stepEditor={<StepEditor />}
-               isEditorCollapsed={isEditorCollapsed}
-               onIsEditorCollapsedChanged={setIsEditorCollapsed}
-               controller={controller}
-            />
-         )}
-
-         <ul>
-            <li>Definition: {definitionJson.length} bytes</li>
-            <li>Selected step: {selectedStepId}</li>
-            <li>Is readonly: {yesOrNo(isReadonly)}</li>
-            <li>Is valid: {definition.isValid === undefined ? "?" : yesOrNo(definition.isValid)}</li>
-            <li>Is toolbox collapsed: {yesOrNo(isToolboxCollapsed)}</li>
-            <li>Is editor collapsed: {yesOrNo(isEditorCollapsed)}</li>
-         </ul>
-
-         <div>
-            <button onClick={toggleVisibilityClicked}>Toggle visibility</button>
-            <button onClick={reloadDefinitionClicked}>Reload definition</button>
-            <button onClick={toggleSelectionClicked}>Toggle selection</button>
-            <button onClick={toggleIsReadonlyClicked}>Toggle readonly</button>
-            <button onClick={toggleToolboxClicked}>Toggle toolbox</button>
-            <button onClick={toggleEditorClicked}>Toggle editor</button>
-            <button onClick={moveViewportToFirstStepClicked}>Move viewport to first step</button>
-            <button onClick={appendStepClicked}>Append step</button>
-         </div>
-
-         <div>
-            <textarea value={definitionJson} readOnly={true} cols={100} rows={15} />
-         </div>
-      </>
-   );
-}
-
-export default WorkflowPreview;

src/qqq/components/workflows/model.ts

@@ -1,75 +0,0 @@
-import {BranchedStep, Definition, Step} from "sequential-workflow-designer";
-
-export interface WorkflowDefinition extends Definition
-{
-   properties: {
-      alfa?: string;
-   };
-}
-
-export interface TaskStep extends Step
-{
-   componentType: "task";
-   type: "task";
-   properties: {
-      x?: string;
-      y?: string;
-      warehouse?: string;
-      wmsConnection?: string;
-      wmsSystem?: string;
-   };
-}
-
-export type OptimizationStepType =
-   "determineWarehouseRouting" |
-   "determineLineHaulLane" |
-   "validateLineItems" |
-   "determineCoolingCategory" |
-   "validateOptimizationRules" |
-   "validateAddress" |
-   "determineCarrierService" |
-   "determineTNT" |
-   "determineOrderServiceDates" |
-   "orderMatchesFilterSelector";
-
-
-export interface WarehouseOptimizationStep extends Step
-{
-   componentType: "task";
-   type: OptimizationStepType;
-   properties: {
-      x?: string;
-      y?: string;
-      warehouse?: string;
-      wmsConnection?: string;
-      wmsSystem?: string;
-      isValid?: boolean;
-   };
-}
-
-export interface SwitchStep extends BranchedStep
-{
-   componentType: "switch";
-   type: "switch";
-   properties: {
-      x?: string;
-      y?: string;
-      warehouse?: string;
-      wmsConnection?: string;
-      wmsSystem?: string;
-   };
-}
-
-export interface ContainerStep extends Step
-{
-   componentType: "container";
-   type: "container";
-   properties: {
-      x?: string;
-      y?: string;
-      warehouse?: string;
-      wmsConnection?: string;
-      wmsSystem?: string;
-   };
-   sequence: (WarehouseOptimizationStep | SwitchStep)[];
-}

src/qqq/models/fields/FieldRules.ts

@@ -1,52 +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;
-   targetWidget: string;
-}
-
-
-/*******************************************************************************
- **
- *******************************************************************************/
-export enum FieldRuleTrigger
-{
-   ON_CHANGE = "ON_CHANGE"
-}
-
-
-/*******************************************************************************
- **
- *******************************************************************************/
-export enum FieldRuleAction
-{
-   CLEAR_TARGET_FIELD = "CLEAR_TARGET_FIELD",
-   RELOAD_WIDGET = "RELOAD_WIDGET"
-}

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

@@ -33,10 +33,10 @@ import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJo
 import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
 import {QJobRunning} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobRunning";
 import {QJobStarted} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobStarted";
-import {QPossibleValue} from "@kingsrook/qqq-frontend-core/lib/model/QPossibleValue";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
 import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
-import {Alert, Box, Button, CircularProgress, Icon, TablePagination} from "@mui/material";
+import {Alert, Button, CircularProgress, Icon, TablePagination} from "@mui/material";
+import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 import Grid from "@mui/material/Grid";
 import Step from "@mui/material/Step";
@@ -47,28 +47,25 @@ 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 colors from "qqq/assets/theme/base/colors";
 import {QCancelButton, QSubmitButton} from "qqq/components/buttons/DefaultButtons";
 import QDynamicForm from "qqq/components/forms/DynamicForm";
 import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
 import MDButton from "qqq/components/legacy/MDButton";
 import MDProgress from "qqq/components/legacy/MDProgress";
 import MDTypography from "qqq/components/legacy/MDTypography";
-import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
 import QRecordSidebar from "qqq/components/misc/RecordSidebar";
 import {GoogleDriveFolderPickerWrapper} from "qqq/components/processes/GoogleDriveFolderPickerWrapper";
 import ProcessSummaryResults from "qqq/components/processes/ProcessSummaryResults";
 import ValidationReview from "qqq/components/processes/ValidationReview";
-import DashboardWidgets from "qqq/components/widgets/DashboardWidgets";
 import BaseLayout from "qqq/layouts/BaseLayout";
 import {TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT} from "qqq/pages/records/query/RecordQuery";
 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
@@ -89,22 +86,12 @@ const INITIAL_RETRY_MILLIS = 1_500;
 const RETRY_MAX_MILLIS = 12_000;
 const BACKOFF_AMOUNT = 1.5;
 
-////////////////////////////////////////////////////////////////////////////
-// define a function that we can make referenes to, which we'll overwrite //
-// with formik's setFieldValue function, once we're inside formik.        //
-////////////////////////////////////////////////////////////////////////////
-let formikSetFieldValueFunction = (field: string, value: any, shouldValidate?: boolean): void =>
-{
-};
-
-const cachedPossibleValueLabels: { [fieldName: string]: { [id: string | number]: string } } = {};
-
 function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, isReport, recordIds, closeModalHandler, forceReInit, overrideLabel}: Props): JSX.Element
 {
    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}`;
    }
@@ -137,9 +124,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
    const [showErrorDetail, setShowErrorDetail] = useState(false);
    const [showFullHelpText, setShowFullHelpText] = useState(false);
 
-   const [renderedWidgets, setRenderedWidgets] = useState({} as { [step: string]: { [widgetName: string]: any } });
-
-   const {pageHeader, recordAnalytics, setPageHeader, helpHelpActive} = useContext(QContext);
+   const {pageHeader, setPageHeader} = useContext(QContext);
 
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // for setting the processError state - call this function, which will also set the isUserFacingError state //
@@ -241,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... //
@@ -288,42 +262,6 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
       };
    };
 
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function renderWidget(widgetName: string)
-   {
-      if (!renderedWidgets[activeStep.name])
-      {
-         renderedWidgets[activeStep.name] = {};
-         setRenderedWidgets(renderedWidgets);
-      }
-
-      if (renderedWidgets[activeStep.name][widgetName])
-      {
-         return renderedWidgets[activeStep.name][widgetName];
-      }
-
-      const widgetMetaData = qInstance.widgets.get(widgetName);
-      if (!widgetMetaData)
-      {
-         return (<Alert color="error">Unrecognized widget name: {widgetName}</Alert>);
-      }
-
-      const queryStringParts: string[] = [];
-      for (let name in processValues)
-      {
-         queryStringParts.push(`${name}=${encodeURIComponent(processValues[name])}`);
-      }
-
-      const renderedWidget = (<Box m={-2}>
-         <DashboardWidgets widgetMetaDataList={[widgetMetaData]} omitWrappingGridContainer={true} childUrlParams={queryStringParts.join("&")} />
-      </Box>);
-      renderedWidgets[activeStep.name][widgetName] = renderedWidget;
-      return renderedWidget;
-   }
-
    ////////////////////////////////////////////////////
    // generate the main form body content for a step //
    ////////////////////////////////////////////////////
@@ -370,8 +308,8 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
                </MDTypography>
                <Box component="div" py={3}>
                   <Grid container justifyContent="flex-end" spacing={3}>
-                     {isModal ? <QCancelButton onClickHandler={() => handleCancelClicked(true)} disabled={false} label="Close" />
-                        : !isWidget && <QCancelButton onClickHandler={() => handleCancelClicked(true)} disabled={false} />
+                     {isModal ? <QCancelButton onClickHandler={handleCancelClicked} disabled={false} label="Close" />
+                        : !isWidget && <QCancelButton onClickHandler={handleCancelClicked} disabled={false} />
                      }
                   </Grid>
                </Box>
@@ -446,20 +384,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
             {
                if (processValues[key])
                {
-                  /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-                  // if we have a cached possible-value label for this field name (key), then set it as the PV's initialDisplayValue //
-                  /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-                  if (cachedPossibleValueLabels[key] && cachedPossibleValueLabels[key][processValues[key]])
-                  {
-                     formFields[key].possibleValueProps.initialDisplayValue = cachedPossibleValueLabels[key][processValues[key]];
-                  }
-                  else
-                  {
-                     ////////////////////////////////////////////////////////////////////////////
-                     // else (and i don't think this should happen?) at least set something... //
-                     ////////////////////////////////////////////////////////////////////////////
-                     formFields[key].possibleValueProps.initialDisplayValue = processValues[key];
-                  }
+                  formFields[key].possibleValueProps.initialDisplayValue = processValues[key];
                }
 
                formFields[key].possibleValueProps.otherValues = formFields[key].possibleValueProps.otherValues ?? new Map<string, any>();
@@ -471,13 +396,6 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
          });
       }
 
-      /////////////////////////////////////
-      // screen(step)-level help content //
-      /////////////////////////////////////
-      let helpRoles = ["PROCESS_SCREEN", "ALL_SCREENS"];
-      const showHelp = helpHelpActive || hasHelpContent(step.helpContents, helpRoles);
-      const formattedHelpContent = <HelpContent helpContents={step.helpContents} roles={helpRoles} helpContentKey={`process:${processName};step:${step?.name}`} />;
-
       return (
          <>
             {
@@ -492,40 +410,16 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
                </MDTypography>
             }
 
-            {
-               showHelp &&
-               <Box fontSize={"0.875rem"} color={colors.blueGray.main} pb={2}>
-                  {formattedHelpContent}
-               </Box>
-            }
-
             {
                //////////////////////////////////////////////////
                // render all of the components for this screen //
                //////////////////////////////////////////////////
                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"];
-                  }
-
-                  //////////////////////////////////////////////////////////////////////////
-                  // if the component specifies a sub-set of field names to include, then //
-                  // edit the formData object to just include those.                      //
-                  //////////////////////////////////////////////////////////////////////////
-                  let formDataToUse = formData;
-                  if (component.values && component.values.includeFieldNames)
-                  {
-                     formDataToUse = Object.assign({}, formData);
-
-                     formDataToUse.formFields = {};
-                     for (let i = 0; i < component.values.includeFieldNames.length; i++)
-                     {
-                        const fieldName = component.values.includeFieldNames[i];
-                        formDataToUse.formFields[fieldName] = formData.formFields[fieldName];
-                     }
+                     helpRoles = ["EDIT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"]
                   }
 
                   return (
@@ -623,22 +517,9 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
                            )
                         }
                         {
-                           component.type === QComponentType.EDIT_FORM &&
-                           <>
-                              {
-                                 component.values?.sectionLabel ?
-                                    <Box py={1.5}>
-                                       <Card sx={{scrollMarginTop: "20px"}}>
-                                          <MDTypography variant="h5" p={3} pl={2} pb={1}>
-                                             {component.values?.sectionLabel}
-                                          </MDTypography>
-                                          <Box pt={0} p={2}>
-                                             <QDynamicForm formData={formDataToUse} helpRoles={helpRoles} helpContentKeyPrefix={`process:${processName};`} />
-                                          </Box>
-                                       </Card>
-                                    </Box> : <QDynamicForm formData={formDataToUse} helpRoles={helpRoles} helpContentKeyPrefix={`process:${processName};`} />
-                              }
-                           </>
+                           component.type === QComponentType.EDIT_FORM && (
+                              <QDynamicForm formData={formData} helpRoles={helpRoles} helpContentKeyPrefix={`process:${processName};`} />
+                           )
                         }
                         {
                            component.type === QComponentType.VIEW_FORM && step.viewFields && (
@@ -675,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}
@@ -761,12 +642,6 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
                               </Box>
                            )
                         }
-                        {
-                           component.type === QComponentType.WIDGET && (
-                              component.values?.widgetName &&
-                              renderWidget(component.values?.widgetName)
-                           )
-                        }
                      </div>
                   );
                }))
@@ -881,12 +756,6 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
          {
             dynamicFormFields[fieldName] = dynamicFormValue;
             initialValues[fieldName] = initialValue;
-
-            if (formikSetFieldValueFunction)
-            {
-               formikSetFieldValueFunction(fieldName, initialValue);
-            }
-
             formValidations[fieldName] = validation;
          };
 
@@ -936,11 +805,6 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
             fullFieldList.forEach((field) =>
             {
                initialValues[field.name] = processValues[field.name];
-
-               if (formikSetFieldValueFunction)
-               {
-                  formikSetFieldValueFunction(field.name, processValues[field.name]);
-               }
             });
 
             ////////////////////////////////////////////////////////////////////////////////////
@@ -1040,7 +904,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
             }
          });
 
-         DynamicFormUtils.addPossibleValueProps(newDynamicFormFields, fullFieldList, tableMetaData?.name, null, null);
+         DynamicFormUtils.addPossibleValueProps(newDynamicFormFields, fullFieldList, tableMetaData.name, null, null);
 
          setFormFields(newDynamicFormFields);
          setValidationScheme(Yup.object().shape(newFormValidations));
@@ -1100,88 +964,16 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
 
          if (lastProcessResponse instanceof QJobComplete)
          {
-            ///////////////////////////////////////////////////////////////////////////////////////////////
-            // run an async function here, in case we need to await looking up any possible-value labels //
-            ///////////////////////////////////////////////////////////////////////////////////////////////
-            (async () =>
+            const qJobComplete = lastProcessResponse as QJobComplete;
+            setJobUUID(null);
+            setNewStep(qJobComplete.nextStep);
+            setProcessValues(qJobComplete.values);
+            setQJobRunning(null);
+
+            if (activeStep && activeStep.recordListFields)
             {
-               const qJobComplete = lastProcessResponse as QJobComplete;
-               const newValues = qJobComplete.values;
-
-               /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-               // if the process step sent a new frontend-step-list, then refresh what we have in state (constructing new full model objects) //
-               /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-               let frontendSteps = steps;
-               const updatedFrontendStepList = qJobComplete.updatedFrontendStepList;
-               if (updatedFrontendStepList)
-               {
-                  setSteps(updatedFrontendStepList);
-                  frontendSteps = updatedFrontendStepList;
-               }
-
-               ///////////////////////////////////////////////////////////////////////////////////
-               // if the next screen has any PVS fields - look up their labels (display values) //
-               ///////////////////////////////////////////////////////////////////////////////////
-               const nextStepName = qJobComplete.nextStep;
-               let nextStep: QFrontendStepMetaData | null = null;
-               if (frontendSteps && nextStepName)
-               {
-                  for (let i = 0; i < frontendSteps.length; i++)
-                  {
-                     if (frontendSteps[i].name === nextStepName)
-                     {
-                        nextStep = frontendSteps[i];
-                        break;
-                     }
-                  }
-
-                  if (nextStep && nextStep.formFields)
-                  {
-                     for (let i = 0; i < nextStep.formFields.length; i++)
-                     {
-                        const field = nextStep.formFields[i];
-                        const fieldName = field.name;
-                        if (field.possibleValueSourceName && newValues && newValues[fieldName])
-                        {
-                           const results: QPossibleValue[] = await Client.getInstance().possibleValues(null, processName, fieldName, null, [newValues[fieldName]]);
-                           if (results && results.length > 0)
-                           {
-                              if (!cachedPossibleValueLabels[fieldName])
-                              {
-                                 cachedPossibleValueLabels[fieldName] = {};
-                              }
-                              cachedPossibleValueLabels[fieldName][newValues[fieldName]] = results[0].label;
-                           }
-                        }
-                     }
-                  }
-               }
-
-               setJobUUID(null);
-               setNewStep(nextStepName);
-               setProcessValues(newValues);
-               setQJobRunning(null);
-
-               if (formikSetFieldValueFunction)
-               {
-                  //////////////////////////////////
-                  // reset field values in formik //
-                  //////////////////////////////////
-                  for (let key in qJobComplete.values)
-                  {
-                     if (Object.hasOwn(formFields, key))
-                     {
-                        console.log(`(re)setting form field [${key}] to [${qJobComplete.values[key]}]`);
-                        formikSetFieldValueFunction(key, qJobComplete.values[key]);
-                     }
-                  }
-               }
-
-               if (activeStep && activeStep.recordListFields)
-               {
-                  setNeedRecords(true);
-               }
-            })();
+               setNeedRecords(true);
+            }
          }
          else if (lastProcessResponse instanceof QJobStarted)
          {
@@ -1276,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);
@@ -1354,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
@@ -1423,10 +1211,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
       const formData = new FormData();
       Object.keys(values).forEach((key) =>
       {
-         if (values[key] !== undefined)
-         {
-            formData.append(key, values[key]);
-         }
+         formData.append(key, values[key]);
       });
 
       if (tableVariantLocalStorageKey && localStorage.getItem(tableVariantLocalStorageKey))
@@ -1466,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,
@@ -1479,20 +1262,8 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
       });
    };
 
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   const handleCancelClicked = (isClose: boolean) =>
+   const handleCancelClicked = () =>
    {
-      //////////////////////////////////////////////////////////////////
-      // unless this is a 'close', then tell backend we're cancelling //
-      //////////////////////////////////////////////////////////////////
-      if (!isClose)
-      {
-         Client.getInstance().processCancel(processName, processUUID);
-      }
-
       if (isModal && closeModalHandler)
       {
          closeModalHandler(null, "cancelClicked");
@@ -1505,7 +1276,6 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
       navigate(path, {replace: true});
    };
 
-
    const mainCardStyles: any = {};
    const formStyles: any = {};
    mainCardStyles.minHeight = `calc(100vh - ${isModal ? 150 : 400}px)`;
@@ -1553,103 +1323,94 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
       >
          {({
             values, errors, touched, isSubmitting, setFieldValue,
-         }) =>
-         {
-            ///////////////////////////////////////////////////////////////////
-            // once we're in the formik form, use its setFieldValue function //
-            // over top of the default one we created globally               //
-            ///////////////////////////////////////////////////////////////////
-            formikSetFieldValueFunction = setFieldValue;
+         }) => (
+            <Form style={formStyles} id={formId} autoComplete="off">
+               <Card sx={mainCardStyles}>
+                  {
+                     !isWidget && (
+                        <Box mx={2} mt={-3}>
+                           <Stepper activeStep={activeStepIndex} alternativeLabel>
+                              {steps.map((step) => (
+                                 <Step key={step.name}>
+                                    <StepLabel>{step.label}</StepLabel>
+                                 </Step>
+                              ))}
+                           </Stepper>
+                        </Box>
+                     )
+                  }
 
-            return (
-               <Form style={formStyles} id={formId} autoComplete="off">
-                  <Card sx={mainCardStyles}>
-                     {
-                        !isWidget && (
-                           <Box mx={2} mt={-3} sx={{"& .MuiStepper-horizontal": {minHeight: "5rem"}}}>
-                              <Stepper activeStep={activeStepIndex} alternativeLabel>
-                                 {steps.map((step) => (
-                                    <Step key={step.name}>
-                                       <StepLabel>{step.label}</StepLabel>
-                                    </Step>
-                                 ))}
-                              </Stepper>
-                           </Box>
-                        )
-                     }
-
-                     <Box p={3}>
-                        <Box pb={isWidget ? 6 : "initial"}>
-                           {/***************************************************************************
-                            ** step content - e.g., the appropriate form or other screen for the step **
-                            ***************************************************************************/}
-                           {getDynamicStepContent(
-                              activeStepIndex,
-                              activeStep,
-                              {
-                                 values,
-                                 touched,
-                                 formFields,
-                                 errors,
-                              },
-                              processError,
-                              processValues,
-                              recordConfig,
-                              setFieldValue,
+                  <Box p={3}>
+                     <Box pb={isWidget ? 6 : "initial"}>
+                        {/***************************************************************************
+                         ** step content - e.g., the appropriate form or other screen for the step **
+                         ***************************************************************************/}
+                        {getDynamicStepContent(
+                           activeStepIndex,
+                           activeStep,
+                           {
+                              values,
+                              touched,
+                              formFields,
+                              errors,
+                           },
+                           processError,
+                           processValues,
+                           recordConfig,
+                           setFieldValue,
+                        )}
+                        {/********************************
+                         ** back &| next/submit buttons **
+                         ********************************/}
+                        <Box mt={6} width="100%" display="flex" justifyContent="space-between" position={isWidget ? "absolute" : "initial"} bottom={isWidget ? "3rem" : "initial"} right={isWidget ? "1.5rem" : "initial"}>
+                           {true || activeStepIndex === 0 ? (
+                              <Box />
+                           ) : (
+                              <MDButton variant="gradient" color="light" onClick={handleBack}>back</MDButton>
+                           )}
+                           {processError || qJobRunning || !activeStep ? (
+                              <Box />
+                           ) : (
+                              <>
+                                 {formError && (
+                                    <MDTypography component="div" variant="caption" color="error" fontWeight="regular" align="right" fullWidth>
+                                       {formError}
+                                    </MDTypography>
+                                 )}
+                                 {
+                                    noMoreSteps && <QCancelButton
+                                       onClickHandler={handleCancelClicked}
+                                       label={isModal ? "Close" : "Return"}
+                                       iconName={isModal ? "cancel" : "arrow_back"}
+                                       disabled={isSubmitting} />
+                                 }
+                                 {
+                                    !noMoreSteps && (
+                                       <Box component="div" py={3}>
+                                          <Grid container justifyContent="flex-end" spacing={3}>
+                                             {
+                                                !isWidget && (
+                                                   <QCancelButton onClickHandler={handleCancelClicked} disabled={isSubmitting} />
+                                                )
+                                             }
+                                             <QSubmitButton label={nextButtonLabel} iconName={nextButtonIcon} disabled={isSubmitting} />
+                                          </Grid>
+                                       </Box>
+                                    )
+                                 }
+                              </>
                            )}
-                           {/********************************
-                            ** back &| next/submit buttons **
-                            ********************************/}
-                           <Box mt={6} width="100%" display="flex" justifyContent="space-between" position={isWidget ? "absolute" : "initial"} bottom={isWidget ? "3rem" : "initial"} right={isWidget ? "1.5rem" : "initial"}>
-                              {true || activeStepIndex === 0 ? (
-                                 <Box />
-                              ) : (
-                                 <MDButton variant="gradient" color="light" onClick={handleBack}>back</MDButton>
-                              )}
-                              {processError || qJobRunning || !activeStep ? (
-                                 <Box />
-                              ) : (
-                                 <>
-                                    {formError && (
-                                       <MDTypography component="div" variant="caption" color="error" fontWeight="regular" align="right" fullWidth>
-                                          {formError}
-                                       </MDTypography>
-                                    )}
-                                    {
-                                       noMoreSteps && <QCancelButton
-                                          onClickHandler={() => handleCancelClicked(true)}
-                                          label={isModal ? "Close" : "Return"}
-                                          iconName={isModal ? "cancel" : "arrow_back"}
-                                          disabled={isSubmitting} />
-                                    }
-                                    {
-                                       !noMoreSteps && (
-                                          <Box component="div" py={3}>
-                                             <Grid container justifyContent="flex-end" spacing={3}>
-                                                {
-                                                   !isWidget && (
-                                                      <QCancelButton onClickHandler={() => handleCancelClicked(false)} disabled={isSubmitting} />
-                                                   )
-                                                }
-                                                <QSubmitButton label={nextButtonLabel} iconName={nextButtonIcon} disabled={isSubmitting} />
-                                             </Grid>
-                                          </Box>
-                                       )
-                                    }
-                                 </>
-                              )}
-                           </Box>
                         </Box>
                      </Box>
-                  </Card>
-               </Form>
-            );
-         }}
+                  </Box>
+               </Card>
+            </Form>
+         )}
       </Formik>
    );
 
    const body = (
-      <Box py={3} mb={20} className="processRun">
+      <Box py={3} mb={20}>
          <Grid container justifyContent="center" alignItems="center" sx={{height: "100%", mt: 8}}>
             <Grid item xs={12} lg={10} xl={8}>
                {form}

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

@@ -21,7 +21,6 @@
 
 import {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException";
 import {Capability} from "@kingsrook/qqq-frontend-core/lib/model/metaData/Capability";
-import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
 import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
@@ -47,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";
@@ -66,102 +65,24 @@ 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();
 
 interface Props
 {
    table?: QTableMetaData;
-   record?: QRecord;
    launchProcess?: QProcessMetaData;
 }
 
 RecordView.defaultProps =
    {
       table: null,
-      record: null,
       launchProcess: null,
    };
 
 const TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT = "qqq.tableVariant";
 
-
-/*******************************************************************************
- **
- *******************************************************************************/
-export function renderSectionOfFields(key: string, fieldNames: string[], tableMetaData: QTableMetaData, helpHelpActive: boolean, record: QRecord, fieldMap?: {[name: string]: QFieldMetaData} )
-{
-   return <Box key={key} display="flex" flexDirection="column" py={1} pr={2}>
-      {
-         fieldNames.map((fieldName: string) =>
-         {
-            let [field, tableForField] = tableMetaData ? TableUtils.getFieldAndTable(tableMetaData, fieldName) : fieldMap ? [fieldMap[fieldName], null] : [null, null];
-
-            if (field != null)
-            {
-               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:${tableMetaData?.name};field:${fieldName}`} />;
-
-               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>
-               );
-            }
-         })
-      }
-   </Box>;
-}
-
-
-/***************************************************************************
-**
-***************************************************************************/
-export function getVisibleJoinTables(tableMetaData: QTableMetaData): Set<string>
-{
-   const visibleJoinTables = new Set<string>();
-
-   for (let i = 0; i < tableMetaData?.sections.length; i++)
-   {
-      const section = tableMetaData?.sections[i];
-      if (section.isHidden || !section.fieldNames || !section.fieldNames.length)
-      {
-         continue;
-      }
-
-      section.fieldNames.forEach((fieldName) =>
-      {
-         const [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
-         if (tableForField && tableForField.name != tableMetaData.name)
-         {
-            visibleJoinTables.add(tableForField.name);
-         }
-      });
-   }
-
-   return (visibleJoinTables);
-}
-
-
-/*******************************************************************************
- ** Record View Screen component.
- *******************************************************************************/
-function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.Element
+function RecordView({table, launchProcess}: Props): JSX.Element
 {
    const {id} = useParams();
 
@@ -178,7 +99,7 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
    const [adornmentFieldsMap, setAdornmentFieldsMap] = useState(new Map<string, boolean>);
    const [deleteConfirmationOpen, setDeleteConfirmationOpen] = useState(false);
    const [metaData, setMetaData] = useState(null as QInstance);
-   const [record, setRecord] = useState(overrideRecord ?? null as QRecord);
+   const [record, setRecord] = useState(null as QRecord);
    const [tableSections, setTableSections] = useState([] as QTableSection[]);
    const [t1Section, setT1Section] = useState(null as QTableSection);
    const [t1SectionName, setT1SectionName] = useState(null as string);
@@ -196,14 +117,11 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
    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))
    {
@@ -230,9 +148,9 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
    ///////////////////////
    useEffect(() =>
    {
-      if (tableMetaData == null)
+      if(tableMetaData == null)
       {
-         (async () =>
+         (async() =>
          {
             const tableMetaData = await qController.loadTableMetaData(tableName);
             setTableMetaData(tableMetaData);
@@ -244,54 +162,54 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
          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, //
@@ -349,7 +267,7 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
          // 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 () =>
             {
@@ -380,7 +298,7 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
             }
          }
 
-         if (hashParts[0] == "#audit")
+         if(hashParts[0] == "#audit")
          {
             setShowAudit(true);
             return;
@@ -389,11 +307,11 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
          ///////////////////////////////////////////////////////////////////////////////////
          // 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;
                }
@@ -412,21 +330,46 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
       reload();
    }, [location.pathname, location.hash]);
 
+   const getVisibleJoinTables = (tableMetaData: QTableMetaData): Set<string> =>
+   {
+      const visibleJoinTables = new Set<string>();
+
+      for (let i = 0; i < tableMetaData?.sections.length; i++)
+      {
+         const section = tableMetaData?.sections[i];
+         if (section.isHidden || !section.fieldNames || !section.fieldNames.length)
+         {
+            continue;
+         }
+
+         section.fieldNames.forEach((fieldName) =>
+         {
+            const [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
+            if(tableForField && tableForField.name != tableMetaData.name)
+            {
+               visibleJoinTables.add(tableForField.name);
+            }
+         })
+      }
+
+      return (visibleJoinTables);
+   };
+
 
    /*******************************************************************************
     ** get an element (or empty) to use as help content for a section
     *******************************************************************************/
    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)
@@ -441,8 +384,6 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
          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) //
          //////////////////////////////////////////////////////////////////
@@ -460,11 +401,11 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
          //////////////////////////////////////////////////////
          // 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);
 
@@ -476,7 +417,7 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
 
          let queryJoins: QueryJoin[] = null;
          const visibleJoinTables = getVisibleJoinTables(tableMetaData);
-         if (visibleJoinTables.size > 0)
+         if(visibleJoinTables.size > 0)
          {
             queryJoins = TableUtils.getQueryJoins(tableMetaData, visibleJoinTables);
          }
@@ -487,20 +428,8 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
          let record: QRecord;
          try
          {
-            ////////////////////////////////////////////////////////////////////////////
-            // if the component took in a record object, then we don't need to GET it //
-            ////////////////////////////////////////////////////////////////////////////
-            if(overrideRecord)
-            {
-               record = overrideRecord;
-            }
-            else
-            {
-               record = await qController.get(tableName, id, tableVariant, null, queryJoins);
-            }
-
+            record = await qController.get(tableName, id, tableVariant, null, queryJoins);
             setRecord(record);
-            recordAnalytics({category: "tableEvents", action: "view", label: tableMetaData?.label + " / " + record?.recordLabel});
          }
          catch (e)
          {
@@ -510,7 +439,7 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
                {
                   HistoryUtils.ensurePathNotInHistory(location.pathname);
                }
-               catch (e)
+               catch(e)
                {
                   console.error("Error pushing history: " + e);
                }
@@ -518,13 +447,13 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
 
             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);
@@ -535,13 +464,13 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
 
          setPageHeader(record.recordLabel);
 
-         if (!launchingProcess && !activeModalProcess)
+         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);
             }
@@ -576,7 +505,7 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
                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>
                );
@@ -587,7 +516,37 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
                // for a section with field names, render the field values.                                               //
                // for the T1 section, the "wrapper" will come out below - but for other sections, produce a wrapper too. //
                ////////////////////////////////////////////////////////////////////////////////////////////////////////////
-               const fields = renderSectionOfFields(section.name, section.fieldNames, tableMetaData, helpHelpActive, record);
+               const fields = (
+                  <Box key={section.name} display="flex" flexDirection="column" py={1} pr={2}>
+                     {
+                        section.fieldNames.map((fieldName: string) =>
+                        {
+                           let [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
+                           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 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>
+                           )
+                        })
+                     }
+                  </Box>
+               );
 
                if (section.tier === "T1")
                {
@@ -631,7 +590,7 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
          setSectionFieldElements(sectionFieldElements);
          setNonT1TableSections(nonT1TableSections);
 
-         if (location.state)
+         if(location.state)
          {
             let state: any = location.state;
             if (state["createSuccess"] || state["updateSuccess"])
@@ -644,9 +603,9 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
                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, "");
          }
@@ -657,7 +616,6 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
    const handleClickDeleteButton = () =>
    {
       setDeleteConfirmationOpen(true);
-      setIsDeleteSubmitting(false);
    };
 
    const handleDeleteConfirmClose = () =>
@@ -667,27 +625,22 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
 
    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}});
@@ -798,68 +751,6 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
       </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);
@@ -876,7 +767,7 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
       //////////////////////////////////////////////////////////////////////////
       // when closing a modal process, navigate up to the record being viewed //
       //////////////////////////////////////////////////////////////////////////
-      if (location.hash)
+      if(location.hash)
       {
          navigate(location.pathname);
       }
@@ -910,7 +801,7 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
       /////////////////////////////////////////////////
       // navigate back up to the record being viewed //
       /////////////////////////////////////////////////
-      if (location.hash)
+      if(location.hash)
       {
          navigate(location.pathname);
       }
@@ -937,7 +828,7 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
       /////////////////////////////////////////////////
       // navigate back up to the record being viewed //
       /////////////////////////////////////////////////
-      if (location.hash)
+      if(location.hash)
       {
          navigate(location.pathname);
       }
@@ -951,7 +842,7 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
 
    return (
       <BaseLayout>
-         <Box className="recordView">
+         <Box>
             <Grid container>
                <Grid item xs={12}>
                   <Box mb={3}>
@@ -973,7 +864,7 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
                               }
                               {
                                  warningMessage ?
-                                    <Alert color="warning" sx={{mb: 3}} icon={<Icon>warning</Icon>} onClose={() =>
+                                    <Alert color="warning" sx={{mb: 3}} onClose={() =>
                                     {
                                        setWarningMessage(null);
                                     }}>
@@ -1015,7 +906,6 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
                                                    </Typography>
                                                    <Box display="flex">
                                                       <GotoRecordButton metaData={metaData} tableMetaData={tableMetaData} />
-                                                      {renderShareButton()}
                                                       <QActionsMenuButton isOpen={actionsMenu} onClickHandler={openActionsMenu} />
                                                    </Box>
                                                    {renderActionsMenu}
@@ -1064,7 +954,7 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
                                  </DialogContent>
                                  <DialogActions>
                                     <Button onClick={handleDeleteConfirmClose}>No</Button>
-                                    <Button onClick={handleDelete} autoFocus disabled={isDeleteSubmitting}>
+                                    <Button onClick={handleDelete} autoFocus>
                                        Yes
                                     </Button>
                                  </DialogActions>
@@ -1081,7 +971,7 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
 
                               {
                                  showEditChildForm &&
-                                 <Modal open={showEditChildForm !== null} onClose={(event, reason) => closeEditChildForm(event, reason)}>
+                                 <Modal open={showEditChildForm as boolean} onClose={(event, reason) => closeEditChildForm(event, reason)}>
                                     <div className="modalEditForm">
                                        <EntityForm
                                           isModal={true}
@@ -1112,11 +1002,6 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
                                  </Modal>
                               }
 
-                              {
-                                 showShareModal && tableMetaData && record &&
-                                 <ShareModal open={showShareModal} onClose={closeShareModal} tableMetaData={tableMetaData} record={record}></ShareModal>
-                              }
-
                            </Box>
                      }
                   </Box>

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

@@ -1,163 +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 {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QCriteriaOperator";
-import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
-import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
-import {QueryJoin} from "@kingsrook/qqq-frontend-core/lib/model/query/QueryJoin";
-import {Alert, Box} from "@mui/material";
-import Grid from "@mui/material/Grid";
-import BaseLayout from "qqq/layouts/BaseLayout";
-import RecordView, {getVisibleJoinTables} from "qqq/pages/records/view/RecordView";
-import Client from "qqq/utils/qqq/Client";
-import TableUtils from "qqq/utils/qqq/TableUtils";
-import React, {useEffect, useState} from "react";
-import {useSearchParams} from "react-router-dom";
-
-interface RecordViewByUniqueKeyProps
-{
-   table: QTableMetaData;
-}
-
-RecordViewByUniqueKey.defaultProps = {};
-
-const qController = Client.getInstance();
-
-/***************************************************************************
- ** Wrapper around RecordView, that reads a unique key from the query string,
- ** looks for a record matching that key, and shows that record.
- ***************************************************************************/
-export default function RecordViewByUniqueKey({table}: RecordViewByUniqueKeyProps): JSX.Element
-{
-   const tableName = table.name;
-
-   const [asyncLoadInited, setAsyncLoadInited] = useState(false);
-   const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
-   const [doneLoading, setDoneLoading] = useState(false);
-   const [record, setRecord] = useState(null as QRecord);
-   const [errorMessage, setErrorMessage] = useState(null as string);
-
-   const [queryParams] = useSearchParams();
-
-   if (!asyncLoadInited)
-   {
-      setAsyncLoadInited(true);
-
-      (async () =>
-      {
-         const tableMetaData = await qController.loadTableMetaData(tableName);
-         setTableMetaData(tableMetaData);
-
-         const criteria: QFilterCriteria[] = [];
-         for (let [name, value] of queryParams.entries())
-         {
-            criteria.push(new QFilterCriteria(name, QCriteriaOperator.EQUALS, [value]));
-            if(!tableMetaData.fields.has(name))
-            {
-               setErrorMessage(`Query-string parameter [${name}] is not a defined field on the ${tableMetaData.label} table.`);
-               setDoneLoading(true);
-               return;
-            }
-         }
-
-         let queryJoins: QueryJoin[] = null;
-         const visibleJoinTables = getVisibleJoinTables(tableMetaData);
-         if (visibleJoinTables.size > 0)
-         {
-            queryJoins = TableUtils.getQueryJoins(tableMetaData, visibleJoinTables);
-         }
-
-         const filter = new QQueryFilter(criteria, null, null, "AND", 0, 2);
-         qController.query(tableName, filter, queryJoins)
-            .then((queryResult) =>
-            {
-               setDoneLoading(true);
-               if (queryResult.length == 1)
-               {
-                  setRecord(queryResult[0]);
-               }
-               else if (queryResult.length == 0)
-               {
-                  setErrorMessage(`No ${tableMetaData.label} record was found matching the given values.`);
-               }
-               else if (queryResult.length > 1)
-               {
-                  setErrorMessage(`More than one ${tableMetaData.label} record was found matching the given values.`);
-               }
-            })
-            .catch((error) =>
-            {
-               setDoneLoading(true);
-               console.log(error);
-               if (error && error.message)
-               {
-                  setErrorMessage(error.message);
-               }
-               else if (error && error.response && error.response.data && error.response.data.error)
-               {
-                  setErrorMessage(error.response.data.error);
-               }
-               else
-               {
-                  setErrorMessage("Unexpected error running query");
-               }
-            });
-      })();
-   }
-
-   useEffect(() =>
-   {
-      if (asyncLoadInited)
-      {
-         setAsyncLoadInited(false);
-         setDoneLoading(false);
-         setRecord(null);
-      }
-   }, [queryParams]);
-
-   if (!doneLoading)
-   {
-      return (<div>Loading...</div>);
-   }
-   else if (record)
-   {
-      return (<RecordView table={table} record={record} />);
-   }
-   else if (errorMessage)
-   {
-      return (<BaseLayout>
-         <Box className="recordView">
-            <Grid container>
-               <Grid item xs={12}>
-                  <Box mb={3}>
-                     {
-                        <Alert color="error" sx={{mb: 3}}>{errorMessage}</Alert>
-                     }
-                  </Box>
-               </Grid>
-            </Grid>
-         </Box>
-      </BaseLayout>);
-   }
-}

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;
 }
@@ -421,14 +401,6 @@ input[type="search"]::-webkit-search-results-decoration
    font-size: 2rem !important;
 }
 
-.dashboard-table-actions-icon
-{
-   font-size: 1.5rem !important;
-   position: relative;
-   top: -5px;
-   margin-right: 8px;
-}
-
 .dashboard-schedule-icon
 {
    font-size: 1.1rem !important;
@@ -661,11 +633,6 @@ input[type="search"]::-webkit-search-results-decoration
    min-height: unset !important;
 }
 
-.MuiDataGrid-columnHeaders
-{
-   scrollbar-gutter: stable;
-}
-
 /* new style for toggle buttons */
 .MuiToggleButtonGroup-root
 {
@@ -673,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;
@@ -684,607 +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;
-}
-
-.recordView .widget
-{
-   padding: 24px;
-}
-
-.entityForm .widget
-{
-   padding: 24px;
-}
-
-.MuiPickersDay-root.Mui-selected, .MuiPickersDay-root.MuiPickersDay-dayWithMargin:hover
-{
-   color: white;
-   background-color: #0062FF !important;
-}
-
-/* several styles below here for user-defined alert inside helpContent */
-.helpContentAlert
-{
-   padding: 6px 16px;
-   font-size: 1rem;
-   font-weight: 300;
-   line-height: 1.6;
-   display: flex;
-}
-
-.helpContentAlert .MuiAlert-icon
-{
-   display: flex;
-   margin-right: 12px;
-   padding: 7px 0;
-   font-size: 22px;
-   opacity: 0.9;
-}
-
-.helpContentAlert .MuiAlert-icon .material-icons-round
-{
-   display: inline-block;
-   width: 1em;
-   height: 1em;
-}
-
-.helpContentAlert .MuiAlert-message
-{
-   padding: 8px 0;
-}
-
-.helpContentAlert.success
-{
-   background-color: rgb(240, 248, 241);
-   color: rgb(44, 76, 46);
-}
-
-.helpContentAlert.success .MuiAlert-icon .material-icons-round
-{
-   color: #4CAF50;
-}
-
-.helpContentAlert.warning
-{
-   background-color: rgb(254, 245, 234);
-   color: rgb(100, 65, 20);
-}
-
-.helpContentAlert.warning .MuiAlert-icon .material-icons-round
-{
-   color: #fb8c00;
-}
-
-.helpContentAlert.error
-{
-   background-color: rgb(254, 239, 238);
-   color: rgb(98, 41, 37);
-}
-
-.helpContentAlert.error .MuiAlert-icon .material-icons-round
-{
-   color: #F44335;
-}
-
-/* the alert widget, was built with minimal (no?) margins, for embedding in
- a parent widget; but for using it on a process, give it some breathing room */
-.processRun .widget .MuiAlert-root
-{
-   margin: 2rem 1rem;
-}
-
-
-.sqd-designer-react {
-   width: 100vw;
-   height: 90vh;
-}
-
-.sqd-editor {
-   padding: 10px;
-}
-input:read-only {
-   opacity: 0.35;
-}
-
-.sqd-editor {
-   padding: 10px;
-}
-input:read-only {
-   opacity: 0.35;
-}
-
-
-/* internal */
-.sqd-theme-light .sqd-toolbox {
-   background: #fff;
-   box-shadow: 0 0 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15);
-   border-radius: 10px;
-}
-.sqd-theme-light .sqd-toolbox-header-title {
-   color: #000;
-}
-.sqd-theme-light .sqd-toolbox-filter {
-   background: #fff;
-   color: #000;
-   border: 1px solid #c3c3c3;
-   border-radius: 10px;
-}
-.sqd-theme-light .sqd-toolbox-filter:focus {
-   border-color: #939393;
-}
-.sqd-theme-light .sqd-toolbox-group-title {
-   color: #000;
-   background: #e5e5e5;
-   border-radius: 10px;
-}
-
-.sqd-theme-light .sqd-toolbox-item {
-   color: #000;
-   border: 1px solid #c3c3c3;
-   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
-   background: #fff;
-   border-radius: 5px;
-}
-.sqd-theme-light .sqd-toolbox-item:hover {
-   border-color: #939393;
-   background: #fff;
-}
-.sqd-theme-light .sqd-toolbox-item .sqd-toolbox-item-icon.sqd-no-icon {
-   background: #c6c6c6;
-   border-radius: 4px;
-}
-
-.sqd-theme-light .sqd-control-bar {
-   background: #fff;
-   box-shadow: 0 0 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15);
-   border-radius: 10px;
-}
-.sqd-theme-light .sqd-control-bar-button {
-   border: 1px solid #c3c3c3;
-   background: #fff;
-   border-radius: 5px;
-}
-.sqd-theme-light .sqd-control-bar-button:hover {
-   border-color: #939393;
-   background: #fff;
-}
-.sqd-theme-light .sqd-control-bar-button .sqd-icon-path {
-   fill: #000;
-}
-.sqd-theme-light .sqd-control-bar-button.sqd-delete .sqd-icon-path {
-   fill: #e01a24;
-}
-
-.sqd-theme-light .sqd-smart-editor {
-   background: #fff;
-   box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
-}
-.sqd-theme-light .sqd-smart-editor-toggle {
-   background: #fff;
-   box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
-}
-
-.sqd-theme-light.sqd-context-menu {
-   background: #fff;
-   box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
-   border-radius: 4px;
-}
-
-.sqd-theme-light .sqd-context-menu-group {
-   color: #888;
-}
-
-.sqd-theme-light .sqd-context-menu-item {
-   color: #000;
-   border-radius: 4px;
-}
-
-.sqd-theme-light .sqd-context-menu-item:hover {
-   background: #eee;
-}
-
-.sqd-theme-light.sqd-designer {
-   background: #f9f9f9;
-}
-
-.sqd-theme-light .sqd-line-grid-path {
-   stroke: #e3e3e3;
-   stroke-width: 1;
-}
-
-.sqd-theme-light .sqd-join {
-   stroke-width: 2;
-   stroke: #000;
-}
-
-.sqd-theme-light .sqd-region {
-   stroke: #cecece;
-   stroke-width: 2;
-   stroke-dasharray: 3;
-}
-.sqd-theme-light .sqd-region.sqd-selected {
-   stroke: #ed4800;
-   stroke-width: 2;
-   stroke-dasharray: 0;
-}
-
-.sqd-theme-light .sqd-placeholder .sqd-placeholder-rect {
-   fill: #d8d8d8;
-   stroke: #6a6a6a;
-   stroke-width: 1;
-   stroke-dasharray: 3;
-}
-.sqd-theme-light .sqd-placeholder.sqd-hover .sqd-placeholder-rect {
-   fill: #ed4800;
-}
-.sqd-theme-light .sqd-placeholder-icon-path {
-   fill: #2b2b2b;
-}
-.sqd-theme-light .sqd-placeholder.sqd-hover .sqd-placeholder-icon-path {
-   fill: #fff;
-}
-
-.sqd-theme-light .sqd-validation-error {
-   fill: #ffa200;
-}
-.sqd-theme-light .sqd-validation-error-icon-path {
-   fill: #000;
-}
-
-.sqd-theme-light .sqd-root-start-stop-circle {
-   fill: #2c18df;
-}
-.sqd-theme-light .sqd-root-start-stop-icon {
-   fill: #fff;
-}
-
-.sqd-theme-light .sqd-step-task .sqd-step-task-rect {
-   fill: #fff;
-   stroke-width: 1;
-   stroke: #c3c3c3;
-   filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, 0.15));
-}
-.sqd-theme-light .sqd-step-task .sqd-step-task-rect.sqd-selected {
-   stroke: #ed4800;
-   stroke-width: 2;
-}
-.sqd-theme-light .sqd-step-task .sqd-step-task-text {
-   fill: #000;
-}
-.sqd-theme-light .sqd-step-task .sqd-step-task-empty-icon {
-   fill: #c6c6c6;
-}
-.sqd-theme-light .sqd-step-task .sqd-input {
-   fill: #fff;
-   stroke-width: 2;
-   stroke: #000;
-}
-.sqd-theme-light .sqd-step-task .sqd-output {
-   fill: #000;
-   stroke-width: 0;
-}
-
-.sqd-theme-light .sqd-step-switch > .sqd-label-primary > .sqd-label-text {
-   fill: #fff;
-}
-.sqd-theme-light .sqd-step-switch > .sqd-label-primary > .sqd-label-rect {
-   fill: #2411db;
-   stroke-width: 0;
-}
-.sqd-theme-light .sqd-step-switch > .sqd-label-secondary > .sqd-label-rect {
-   fill: #000;
-   stroke-width: 0;
-}
-.sqd-theme-light .sqd-step-switch > .sqd-label-secondary > .sqd-label-text {
-   fill: #fff;
-}
-.sqd-theme-light .sqd-step-switch > g > .sqd-input {
-   fill: #fff;
-   stroke-width: 2;
-   stroke: #000;
-}
-
-.sqd-theme-light .sqd-step-container > .sqd-label > .sqd-label-text {
-   fill: #fff;
-}
-.sqd-theme-light .sqd-step-container > .sqd-label > .sqd-label-rect {
-   fill: #2411db;
-   stroke-width: 0;
-}
-.sqd-theme-light .sqd-step-container > g > .sqd-input {
-   fill: #fff;
-   stroke-width: 2;
-   stroke: #000;
-}
-
-
-/* .sqd-designer */
-.sqd-designer {
-   position: relative;
-   display: flex;
-   width: 100%;
-   height: 100%;
-}
-
-.sqd-designer,
-.sqd-drag,
-.sqd-context-menu {
-   font-size: 13px;
-   line-height: 1em;
-}
-
-.sqd-hidden {
-   display: none !important;
-}
-
-.sqd-disabled {
-   opacity: 0.25;
-}
-
-/* .sqd-toolbox */
-.sqd-toolbox,
-.sqd-toolbox-filter {
-   font-size: 11px;
-   line-height: 1.2em;
-}
-
-.sqd-toolbox {
-   position: absolute;
-   top: 10px;
-   left: 10px;
-   z-index: 20;
-   box-sizing: border-box;
-   width: 250px;
-   -webkit-user-select: none;
-   user-select: none;
-}
-
-.sqd-toolbox-header {
-   position: relative;
-   padding: 15px 10px;
-   cursor: pointer;
-}
-
-.sqd-toolbox-header-title {
-   display: block;
-   font-size: 1.2em;
-   line-height: 1em;
-   font-weight: bold;
-}
-
-.sqd-toolbox-toggle-icon {
-   position: absolute;
-   top: 50%;
-   right: 10px;
-   width: 16px;
-   height: 16px;
-   margin: -8px 0 0;
-}
-
-.sqd-toolbox-header:hover .sqd-toolbox-toggle-icon {
-   opacity: 0.6;
-}
-
-.sqd-scrollbox {
-   position: relative;
-   overflow: hidden;
-}
-
-.sqd-scrollbox-body {
-   position: absolute;
-   top: 0;
-   left: 0;
-   width: 100%;
-}
-
-.sqd-toolbox-filter {
-   display: block;
-   box-sizing: border-box;
-   padding: 6px 8px;
-   outline: none;
-   width: 110px;
-   margin: 0 10px 10px;
-   box-sizing: border-box;
-}
-
-.sqd-toolbox-group-title {
-   text-align: center;
-   padding: 5px 0;
-   margin: 0 10px 10px;
-}
-
-.sqd-toolbox-item {
-   position: relative;
-   box-sizing: border-box;
-   margin: 0 10px 10px;
-   cursor: move;
-   width: 90%;
-}
-
-.sqd-toolbox-item-icon {
-   position: absolute;
-   top: 50%;
-   left: 5px;
-   margin-top: -10px;
-   width: 20px;
-   height: 20px;
-}
-
-.sqd-toolbox-item-icon-image {
-   width: 100%;
-   height: 100%;
-}
-
-.sqd-toolbox-item-text {
-   position: relative;
-   display: block;
-   padding: 10px 10px 10px 30px;
-   white-space: nowrap;
-   text-overflow: ellipsis;
-   overflow: hidden;
-}
-
-.sqd-drag {
-   position: absolute;
-   z-index: 9999999;
-   pointer-events: none;
-}
-
-/* .sqd-control-bar */
-.sqd-control-bar {
-   position: absolute;
-   bottom: 10px;
-   left: 10px;
-   z-index: 20;
-   padding: 8px 0 8px 8px;
-   white-space: nowrap;
-}
-
-.sqd-control-bar-button {
-   display: inline-block;
-   width: 32px;
-   height: 32px;
-   margin-right: 8px;
-   cursor: pointer;
-   box-sizing: border-box;
-}
-
-.sqd-control-bar-button-icon {
-   width: 24px;
-   height: 24px;
-   margin: 3px 0 0 3px;
-}
-
-.sqd-control-bar-button.sqd-disabled .sqd-control-bar-button-icon {
-   opacity: 0.2;
-}
-
-/* .sqd-smart-editor */
-.sqd-smart-editor-toggle {
-   position: absolute;
-   top: 0;
-   z-index: 29;
-   width: 36px;
-   height: 64px;
-   border-bottom-left-radius: 10px;
-   cursor: pointer;
-}
-
-.sqd-smart-editor-toggle-icon {
-   position: absolute;
-   top: 50%;
-   left: 50%;
-   width: 24px;
-   height: 24px;
-   margin: -12px 0 0 -12px;
-}
-
-.sqd-smart-editor-toggle:hover .sqd-smart-editor-toggle-icon {
-   opacity: 0.6;
-}
-
-.sqd-smart-editor {
-   z-index: 30;
-}
-
-.sqd-layout-desktop .sqd-smart-editor {
-   position: relative;
-   width: 300px;
-}
-
-.sqd-layout-desktop .sqd-smart-editor-toggle {
-   right: 300px;
-}
-
-.sqd-layout-desktop .sqd-smart-editor-toggle.sqd-collapsed {
-   right: 0;
-}
-
-.sqd-layout-mobile .sqd-smart-editor {
-   position: absolute;
-   top: 0;
-   right: 0;
-   bottom: 0;
-   left: 41px;
-}
-
-.sqd-layout-mobile .sqd-smart-editor-toggle {
-   left: 5px;
-}
-
-.sqd-layout-mobile .sqd-smart-editor-toggle.sqd-collapsed {
-   left: auto;
-   right: 0;
-}
-
-/* .sqd-context-menu */
-.sqd-context-menu {
-   position: absolute;
-   z-index: 2000000000;
-   overflow: hidden;
-   padding: 5px;
-}
-
-.sqd-context-menu-group,
-.sqd-context-menu-item {
-   width: 130px;
-   padding: 8px 10px;
-   white-space: nowrap;
-   text-overflow: ellipsis;
-   overflow: hidden;
-}
-
-.sqd-context-menu-group {
-   font-size: 11px;
-   line-height: 1em;
-}
-
-.sqd-context-menu-item {
-   cursor: pointer;
-   transition: background 70ms;
-}
-
-/* .sqd-workspace */
-.sqd-workspace {
-   flex: 1;
-   position: relative;
-   display: block;
-   -webkit-user-select: none;
-   user-select: none;
-}
-
-.sqd-workspace-canvas {
-   position: absolute;
-   top: 0;
-   left: 0;
-   cursor: move;
-}
-
-.sqd-label-text {
-   text-anchor: middle;
-   dominant-baseline: central;
-}
-
-.sqd-placeholder .sqd-placeholder-rect {
-   transition: fill 100ms;
-}
-
-.sqd-step-task-text {
-   text-anchor: left;
-   dominant-baseline: central;
-}

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

@@ -23,7 +23,6 @@ import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QControl
 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 {FilterVariableExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/FilterVariableExpression";
 import {NowExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/NowExpression";
 import {NowWithOffsetExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/NowWithOffsetExpression";
 import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QCriteriaOperator";
@@ -33,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";
 
@@ -66,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)
          {
             /////////////////////////////////////////////////////////////
@@ -109,8 +108,6 @@ class FilterUtils
          let [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, criteria.fieldName);
 
          let values = criteria.values;
-         let hasFilterVariable = false;
-
          if (field.possibleValueSourceName)
          {
             //////////////////////////////////////////////////////////////////////////////////
@@ -118,23 +115,10 @@ 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)
             {
-               ////////////////////////////////////////////////////////////////////////
-               // do not do this lookup if the field is a filter variable expression //
-               ////////////////////////////////////////////////////////////////////////
-               if (values[0].type && values[0].type == "FilterVariableExpression")
-               {
-                  hasFilterVariable = true;
-               }
-               else
-               {
-                  values = await qController.possibleValues(fieldTable.name, null, field.name, "", values);
-               }
+               values = await qController.possibleValues(fieldTable.name, null, field.name, "", values);
             }
 
             ////////////////////////////////////////////
@@ -173,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]);
-      }
    }
 
 
@@ -245,10 +221,6 @@ class FilterUtils
          {
             return (new ThisOrLastPeriodExpression(value));
          }
-         else if (value.type == "FilterVariableExpression")
-         {
-            return (new FilterVariableExpression(value));
-         }
       }
 
       return (null);
@@ -289,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}`;
                   }
@@ -339,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});
       }
    }
 
@@ -353,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. //
@@ -374,20 +340,11 @@ class FilterUtils
          {
             maxLoops = maxValuesToShow;
          }
-         else if (maxValuesToShow == 1 && criteria.values.length > 1)
-         {
-            maxLoops = 1;
-         }
 
          for (let i = 0; i < maxLoops; i++)
          {
             const value = criteria.values[i];
-            if (value.type == "FilterVariableExpression")
-            {
-               const expression = new FilterVariableExpression(value);
-               labels.push(expression.toString());
-            }
-            else if (value.type == "NowWithOffset")
+            if (value.type == "NowWithOffset")
             {
                const expression = new NowWithOffsetExpression(value);
                labels.push(expression.toString());
@@ -400,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));
             }
@@ -431,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(", "));
@@ -487,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);
    }
@@ -498,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);
       }
@@ -508,7 +451,7 @@ class FilterUtils
 
       try
       {
-         switch (criteria.operator)
+         switch(criteria.operator)
          {
             case QCriteriaOperator.EQUALS:
                return ("equals");
@@ -532,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:
@@ -573,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
       }
    }
 
@@ -586,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);
       }
@@ -595,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"}>
@@ -604,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
       {
@@ -612,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],
+         })]);
+      }
    }
 
 
@@ -133,11 +93,6 @@ class TableUtils
     *******************************************************************************/
    public static getFieldAndTable(tableMetaData: QTableMetaData, fieldName: string): [QFieldMetaData, QTableMetaData]
    {
-      if(!fieldName)
-      {
-         return [null, null];
-      }
-
       if (fieldName.indexOf(".") > -1)
       {
          const nameParts = fieldName.split(".", 2);
@@ -155,7 +110,7 @@ class TableUtils
          return ([tableMetaData.fields.get(fieldName), tableMetaData]);
       }
 
-      return [null, null];
+      return (null);
    }
 
 
@@ -178,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());