Merge branch 'feature/CE-1107-add-day-by-day-views-for-the' into integration/sprint-40

.circleci/config.yml

@@ -115,7 +115,7 @@ workflows:
           context: [ qqq-maven-registry-credentials, kingsrook-slack, build-qqq-sample-app ]
           filters:
             branches:
-              ignore: /(main|dev|integration.*)/
+              ignore: /(main|integration.*)/
             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|integration.*)/
             tags:
               only: /(version|snapshot)-.*/
 

.gitignore

@@ -5,7 +5,6 @@
 .yalc*
 yalc.lock
 .env
-/certs
 
 # dependencies
 /node_modules

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,7 +6,7 @@
       "@auth0/auth0-react": "1.10.2",
       "@emotion/react": "11.7.1",
       "@emotion/styled": "11.6.0",
-      "@kingsrook/qqq-frontend-core": "1.0.119",
+      "@kingsrook/qqq-frontend-core": "1.0.96",
       "@mui/icons-material": "5.4.1",
       "@mui/material": "5.11.1",
       "@mui/styles": "5.11.1",
@@ -36,8 +36,6 @@
       "html-to-text": "^9.0.5",
       "http-proxy-middleware": "2.0.6",
       "jwt-decode": "3.1.2",
-      "oidc-client-ts": "2.4.1",
-      "react-oidc-context": "2.3.1",
       "rapidoc": "9.3.4",
       "react": "18.0.0",
       "react-ace": "10.1.0",
@@ -46,7 +44,6 @@
       "react-dnd": "16.0.1",
       "react-dnd-html5-backend": "16.0.1",
       "react-dom": "18.0.0",
-      "react-dropzone": "14.3.5",
       "react-ga4": "2.1.0",
       "react-github-btn": "1.2.1",
       "react-google-drive-picker": "^1.2.0",
@@ -62,7 +59,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.25.0</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.25.0-integration-sprint-62-20250307-205536</version>
+         <version>0.20.0-20240308.165846-65</version>
       </dependency>
       <dependency>
          <groupId>org.slf4j</groupId>
@@ -154,11 +154,11 @@
                   <versionTagPrefix>version-</versionTagPrefix>
                </gitFlowConfig>
                <skipFeatureVersion>true</skipFeatureVersion> <!-- Keep feature names out of versions -->
+               <postReleaseGoals>install</postReleaseGoals>  <!-- Let CI run deploys -->
                <commitDevelopmentVersionAtStart>true</commitDevelopmentVersionAtStart>
                <versionDigitToIncrement>1</versionDigitToIncrement> <!-- In general, we update the minor -->
                <versionProperty>revision</versionProperty>
                <skipUpdateVersion>true</skipUpdateVersion>
-               <skipTestProject>true</skipTestProject> <!-- we allow CI to do the tests -->
             </configuration>
          </plugin>
 

public/index.html

@@ -25,6 +25,15 @@ Coded by www.creative-tim.com
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
     <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet" />
   </head>
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-X1NV0P06WS"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'G-X1NV0P06WS');
+  </script>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>

src/App.tsx

@@ -19,6 +19,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import {useAuth0} from "@auth0/auth0-react";
 import {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException";
 import {QAppNodeType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppNodeType";
 import {QAppTreeNode} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppTreeNode";
@@ -28,20 +29,16 @@ import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstan
 import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import Avatar from "@mui/material/Avatar";
-import Box from "@mui/material/Box";
 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 QContext from "QContext";
-import useAnonymousAuthenticationModule from "qqq/authorization/anonymous/useAnonymousAuthenticationModule";
-import useAuth0AuthenticationModule from "qqq/authorization/auth0/useAuth0AuthenticationModule";
-import useOAuth2AuthenticationModule from "qqq/authorization/oauth2/useOAuth2AuthenticationModule";
 import Sidenav from "qqq/components/horseshoe/sidenav/SideNav";
 import theme from "qqq/components/legacy/Theme";
-import {getBannerClassName, getBannerStyles, getBanner, makeBannerContent} from "qqq/components/misc/Banners";
-import {setMiniSidenav, useMaterialUIController} from "qqq/context";
+import {setMiniSidenav, setOpenConfigurator, useMaterialUIController} from "qqq/context";
 import AppHome from "qqq/pages/apps/Home";
 import NoApps from "qqq/pages/apps/NoApps";
 import ProcessRun from "qqq/pages/processes/ProcessRun";
@@ -52,7 +49,6 @@ 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";
@@ -65,14 +61,10 @@ import {Md5} from "ts-md5/dist/md5";
 const qController = Client.getInstance();
 export const SESSION_UUID_COOKIE_NAME = "sessionUUID";
 
-interface Props
+export default function App()
 {
-   authenticationMetaData: QAuthenticationMetaData;
-}
-
-export default function App({authenticationMetaData}: Props)
-{
-   const [, , removeCookie] = useCookies([SESSION_UUID_COOKIE_NAME]);
+   const [cookies, setCookie, removeCookie] = useCookies([SESSION_UUID_COOKIE_NAME]);
+   const {user, getAccessTokenSilently, logout} = useAuth0();
    const [loadingToken, setLoadingToken] = useState(false);
    const [isFullyAuthenticated, setIsFullyAuthenticated] = useState(false);
    const [profileRoutes, setProfileRoutes] = useState({});
@@ -81,20 +73,68 @@ export default function App({authenticationMetaData}: Props)
    const [needLicenseKey, setNeedLicenseKey] = useState(true);
    const [loggedInUser, setLoggedInUser] = useState({} as { name?: string, email?: string });
    const [defaultRoute, setDefaultRoute] = useState("/no-apps");
-   const [earlyReturnForAuth, setEarlyReturnForAuth] = useState(null as JSX.Element);
-
-   const {setupSession: auth0SetupSession, logout: auth0Logout} = useAuth0AuthenticationModule({setIsFullyAuthenticated, setLoggedInUser, setEarlyReturnForAuth});
-   const {setupSession: oauth2SetupSession, logout: oauth2Logout} = useOAuth2AuthenticationModule({setIsFullyAuthenticated, setLoggedInUser, setEarlyReturnForAuth, inOAuthContext: authenticationMetaData.type === "OAUTH2"});
-   const {setupSession: anonymousSetupSession, logout: anonymousLogout} = useAnonymousAuthenticationModule({setIsFullyAuthenticated, setLoggedInUser, setEarlyReturnForAuth});
 
    /////////////////////////////////////////////////////////
    // tell the client how to do a logout if it sees a 401 //
    /////////////////////////////////////////////////////////
-   Client.setUnauthorizedCallback(() => doLogout());
+   Client.setUnauthorizedCallback(() =>
+   {
+      logout();
+   });
+
+   const shouldStoreNewToken = (newToken: string, oldToken: string): boolean =>
+   {
+      if (!cookies[SESSION_UUID_COOKIE_NAME])
+      {
+         console.log("No session uuid cookie - so we should store a new one.");
+         return (true);
+      }
+
+      if (!oldToken)
+      {
+         console.log("No accessToken in localStorage - so we should store a new one.");
+         return (true);
+      }
+
+      try
+      {
+         const oldJSON: any = jwt_decode(oldToken);
+         const newJSON: any = jwt_decode(newToken);
+
+         ////////////////////////////////////////////////////////////////////////////////////
+         // 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()))
+         {
+            console.log("Access token in local storage was expired - so we should store a new one.");
+            return (true);
+         }
+
+         ////////////////////////////////////////////////////////////////////////////////////////////////
+         // 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"];
+
+         const different = JSON.stringify(newJSON) !== JSON.stringify(oldJSON);
+         if (different)
+         {
+            console.log("Latest access token from auth0 has changed vs localStorage - so we should store a new one.");
+         }
+         return (different);
+      }
+      catch (e)
+      {
+         console.log("Caught in shouldStoreNewToken: " + e);
+      }
+
+      return (true);
+   };
 
-   /////////////////////////////////////////////////
-   // deal with making sure user is authenticated //
-   /////////////////////////////////////////////////
    useEffect(() =>
    {
       if (loadingToken)
@@ -105,17 +145,65 @@ export default function App({authenticationMetaData}: Props)
 
       (async () =>
       {
+         const authenticationMetaData: QAuthenticationMetaData = await qController.getAuthenticationMetaData();
+
          if (authenticationMetaData.type === "AUTH_0")
          {
-            await auth0SetupSession();
-         }
-         else if (authenticationMetaData.type === "OAUTH2")
-         {
-            await oauth2SetupSession();
+            /////////////////////////////////////////
+            // use auth0 if auth type is ... auth0 //
+            /////////////////////////////////////////
+            try
+            {
+               console.log("Loading token from auth0...");
+               const accessToken = await getAccessTokenSilently();
+
+               const lsAccessToken = localStorage.getItem("accessToken");
+               if (shouldStoreNewToken(accessToken, lsAccessToken))
+               {
+                  console.log("Sending accessToken to backend, requesting a sessionUUID...");
+                  const {uuid: newSessionUuid, values} = 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. //
+                  /////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                  // 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
+               {
+                  console.log("Using existing sessionUUID cookie");
+               }
+
+               setIsFullyAuthenticated(true);
+               qController.setGotAuthentication();
+
+               setLoggedInUser(user);
+               console.log("Token load complete.");
+            }
+            catch (e)
+            {
+               console.log(`Error loading token: ${JSON.stringify(e)}`);
+               qController.clearAuthenticationMetaDataLocalStorage();
+               localStorage.removeItem("accessToken");
+               removeCookie(SESSION_UUID_COOKIE_NAME, {path: "/"});
+               logout();
+               return;
+            }
          }
          else if (authenticationMetaData.type === "FULLY_ANONYMOUS" || authenticationMetaData.type === "MOCK")
          {
-            await anonymousSetupSession();
+            /////////////////////////////////////////////
+            // use a random token if anonymous or mock //
+            /////////////////////////////////////////////
+            console.log("Generating random token...");
+            setIsFullyAuthenticated(true);
+            qController.setGotAuthentication();
+            setCookie(SESSION_UUID_COOKIE_NAME, Md5.hashStr(`${new Date()}`), {path: "/"});
+            console.log("Token generation complete.");
+            return;
          }
          else
          {
@@ -131,36 +219,13 @@ export default function App({authenticationMetaData}: Props)
       (async () =>
       {
          const metaData: QInstance = await qController.loadMetaData();
-         LicenseInfo.setLicenseKey(metaData.environmentValues?.get("MATERIAL_UI_LICENSE_KEY") || process.env.REACT_APP_MATERIAL_UI_LICENSE_KEY);
+         LicenseInfo.setLicenseKey(metaData.environmentValues.get("MATERIAL_UI_LICENSE_KEY") || process.env.REACT_APP_MATERIAL_UI_LICENSE_KEY);
          setNeedLicenseKey(false);
       })();
    }
 
-   /***************************************************************************
-    ** call appropriate logout function based on authentication meta data type
-    ***************************************************************************/
-   function doLogout()
-   {
-      if (authenticationMetaData?.type === "AUTH_0")
-      {
-         auth0Logout();
-      }
-      else if (authenticationMetaData?.type === "OAUTH2")
-      {
-         oauth2Logout();
-      }
-      else if (authenticationMetaData?.type === "FULLY_ANONYMOUS" || authenticationMetaData?.type === "MOCK")
-      {
-         anonymousLogout();
-      }
-      else
-      {
-         console.log(`No logout callback for authentication type [${authenticationMetaData?.type}].`);
-      }
-   }
-
    const [controller, dispatch] = useMaterialUIController();
-   const {miniSidenav, direction, sidenavColor} = controller;
+   const {miniSidenav, direction, layout, openConfigurator, sidenavColor} = controller;
    const [onMouseEnter, setOnMouseEnter] = useState(false);
    const {pathname} = useLocation();
    const [queryParams] = useSearchParams();
@@ -327,13 +392,6 @@ export default function App({authenticationMetaData}: Props)
                   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`,
@@ -453,10 +511,11 @@ export default function App({authenticationMetaData}: Props)
                }
             }
 
+            let profileRoutes = {};
             const gravatarBase = "https://www.gravatar.com/avatar/";
             const hash = Md5.hashStr(loggedInUser?.email || "user");
             const profilePicture = `${gravatarBase}${hash}`;
-            const profileRoutes = {
+            profileRoutes = {
                type: "collapse",
                name: loggedInUser?.name ?? "Anonymous",
                key: "username",
@@ -525,7 +584,10 @@ export default function App({authenticationMetaData}: Props)
                   localStorage.removeItem("accessToken");
                   removeCookie(SESSION_UUID_COOKIE_NAME, {path: "/"});
 
-                  doLogout();
+                  //////////////////////////////////////////////////////
+                  // todo - this is auth0 logout... make more generic //
+                  //////////////////////////////////////////////////////
+                  logout();
                   return;
                }
             }
@@ -533,9 +595,7 @@ export default function App({authenticationMetaData}: Props)
       })();
    }, [needToLoadRoutes, isFullyAuthenticated]);
 
-   ///////////////////////////////////////////////////
-   // Open sidenav when mouse enter on mini sidenav //
-   ///////////////////////////////////////////////////
+   // Open sidenav when mouse enter on mini sidenav
    const handleOnMouseEnter = () =>
    {
       if (miniSidenav && !onMouseEnter)
@@ -545,9 +605,7 @@ export default function App({authenticationMetaData}: Props)
       }
    };
 
-   /////////////////////////////////////////////////
-   // Close sidenav when mouse leave mini sidenav //
-   /////////////////////////////////////////////////
+   // Close sidenav when mouse leave mini sidenav
    const handleOnMouseLeave = () =>
    {
       if (onMouseEnter)
@@ -557,14 +615,16 @@ export default function App({authenticationMetaData}: Props)
       }
    };
 
+   // Change the openConfigurator state
+   const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator);
+
+   // Setting the dir attribute for the body element
    useEffect(() =>
    {
       document.body.setAttribute("dir", direction);
    }, [direction]);
 
-   //////////////////////////////////////////////////////
-   // Setting page scroll to 0 when changing the route //
-   //////////////////////////////////////////////////////
+   // Setting page scroll to 0 when changing the route
    useEffect(() =>
    {
       document.documentElement.scrollTop = 0;
@@ -604,50 +664,18 @@ export default function App({authenticationMetaData}: Props)
    const [dotMenuOpen, setDotMenuOpen] = useState(false);
    const [keyboardHelpOpen, setKeyboardHelpOpen] = useState(false);
    const [helpHelpActive] = useState(queryParams.has("helpHelp"));
-   const [userId, setUserId] = useState(loggedInUser?.email);
-
-   useEffect(() =>
-   {
-      setUserId(loggedInUser?.email);
-   }, [loggedInUser]);
-
 
    const [googleAnalyticsUtils] = useState(new GoogleAnalyticsUtils());
 
+
    /*******************************************************************************
     **
     *******************************************************************************/
    function recordAnalytics(model: AnalyticsModel)
    {
-      googleAnalyticsUtils.recordAnalytics(model);
+      googleAnalyticsUtils.recordAnalytics(model)
    }
 
-   ///////////////////////////////////////////////////////////////////
-   // if any of the auth/session setup code determined that we need //
-   // to render something and return early - then do so here.       //
-   ///////////////////////////////////////////////////////////////////
-   if (earlyReturnForAuth)
-   {
-      return (earlyReturnForAuth);
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function banner(): JSX.Element | null
-   {
-      const banner = getBanner(metaData?.branding, "QFMD_TOP_OF_SITE");
-
-      if (!banner)
-      {
-         return (null);
-      }
-
-      return (<Box className={getBannerClassName(banner)} sx={{display: "flex", justifyContent: "center", padding: "0.5rem", position: "sticky", top: "0", zIndex: 1, ...getBannerStyles(banner)}}>
-         {makeBannerContent(banner)}
-      </Box>);
-   }
 
    return (
 
@@ -661,7 +689,6 @@ export default function App({authenticationMetaData}: Props)
             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),
@@ -676,7 +703,6 @@ export default function App({authenticationMetaData}: Props)
             <ThemeProvider theme={theme}>
                <CssBaseline />
                <CommandMenu metaData={metaData} />
-               {banner()}
                <Sidenav
                   color={sidenavColor}
                   icon={branding.icon}
@@ -686,7 +712,6 @@ export default function App({authenticationMetaData}: Props)
                   routes={sideNavRoutes}
                   onMouseEnter={handleOnMouseEnter}
                   onMouseLeave={handleOnMouseLeave}
-                  logout={doLogout}
                />
                <Routes>
                   <Route path="*" element={<Navigate to={defaultRoute} />} />

src/CommandMenu.tsx

@@ -36,7 +36,7 @@ import Icon from "@mui/material/Icon";
 import Typography from "@mui/material/Typography";
 import {makeStyles} from "@mui/styles";
 import {Command} from "cmdk";
-import React, {useContext, useEffect, useRef, useState} from "react";
+import React, {useContext, useEffect, useRef} from "react";
 import {useNavigate} from "react-router-dom";
 import QContext from "QContext";
 import HistoryUtils, {QHistoryEntry} from "qqq/utils/HistoryUtils";
@@ -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,73 @@ 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 (labelA.localeCompare(labelB));
+      })
 
       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 (labelA.localeCompare(labelB));
+      })
+      return(
          <Command.Group heading="Tables">
             {
                tableNames.map((tableName: string, index: number) =>
@@ -293,7 +243,6 @@ const CommandMenu = ({metaData}: Props) =>
       );
    }
 
-
    /*******************************************************************************
     **
     *******************************************************************************/
@@ -303,16 +252,16 @@ 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 (labelA.localeCompare(labelB));
+      })
 
-      return (
+      return(
          <Command.Group heading="Apps">
             {
                appNames.map((appName: string, index: number) =>
@@ -327,37 +276,33 @@ 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 (labelA.localeCompare(labelB));
+      })
 
       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 +311,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>
@@ -508,6 +381,6 @@ const CommandMenu = ({metaData}: Props) =>
             </Dialog>
          }
       </React.Fragment>
-   );
-};
+   )
+}
 export default CommandMenu;

src/QContext.tsx

@@ -59,7 +59,6 @@ interface QContext
    pathToLabelMap?: {[path: string]: string};
    branding?: QBrandingMetaData;
    helpHelpActive?: boolean;
-   userId?: string;
 }
 
 const defaultState = {

src/index.tsx

@@ -19,97 +19,116 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import {Auth0Provider} from "@auth0/auth0-react";
 import {QAuthenticationMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAuthenticationMetaData";
+import React from "react";
+import {createRoot} from "react-dom/client";
+import {BrowserRouter, useNavigate, useSearchParams} from "react-router-dom";
 import App from "App";
 import "qqq/styles/qqq-override-styles.css";
 import "qqq/styles/globals.scss";
 import "qqq/styles/raycast.scss";
-import useAnonymousAuthenticationModule from "qqq/authorization/anonymous/useAnonymousAuthenticationModule";
-import useAuth0AuthenticationModule from "qqq/authorization/auth0/useAuth0AuthenticationModule";
-import useOAuth2AuthenticationModule from "qqq/authorization/oauth2/useOAuth2AuthenticationModule";
+import HandleAuthorizationError from "HandleAuthorizationError";
+import ProtectedRoute from "qqq/authorization/auth0/ProtectedRoute";
 import {MaterialUIControllerProvider} from "qqq/context";
 import Client from "qqq/utils/qqq/Client";
-import React from "react";
-import {createRoot} from "react-dom/client";
-import {BrowserRouter} from "react-router-dom";
-
 
 const qController = Client.getInstance();
 
-if (document.location.search && document.location.search.indexOf("clearAuthenticationMetaDataLocalStorage") > -1)
+if(document.location.search && document.location.search.indexOf("clearAuthenticationMetaDataLocalStorage") > -1)
 {
-   qController.clearAuthenticationMetaDataLocalStorage();
+   qController.clearAuthenticationMetaDataLocalStorage()
 }
 
-const authenticationMetaDataPromise: Promise<QAuthenticationMetaData> = qController.getAuthenticationMetaData();
+const authenticationMetaDataPromise: Promise<QAuthenticationMetaData> = qController.getAuthenticationMetaData()
 
 authenticationMetaDataPromise.then((authenticationMetaData) =>
 {
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function Auth0RouterBody()
+   // @ts-ignore
+   function Auth0ProviderWithRedirectCallback({children, ...props})
    {
-      const {renderAppWrapper} = useAuth0AuthenticationModule({});
-      return (renderAppWrapper(authenticationMetaData));
+      const navigate = useNavigate();
+      const [searchParams] = useSearchParams();
+
+      // @ts-ignore
+      const onRedirectCallback = (appState) =>
+      {
+         navigate((appState && appState.returnTo) || window.location.pathname);
+      };
+      if (searchParams.get("error"))
+      {
+         return (
+            // @ts-ignore
+            <Auth0Provider {...props}>
+               <HandleAuthorizationError errorMessage={searchParams.get("error_description")} />
+            </Auth0Provider>
+         );
+      }
+      else
+      {
+         return (
+            // @ts-ignore
+            <Auth0Provider onRedirectCallback={onRedirectCallback} {...props}>
+               {children}
+            </Auth0Provider>
+         );
+      }
    }
 
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function OAuth2RouterBody()
-   {
-      const {renderAppWrapper} = useOAuth2AuthenticationModule({inOAuthContext: false});
-      return (renderAppWrapper(authenticationMetaData, (
-         <MaterialUIControllerProvider>
-            <App authenticationMetaData={authenticationMetaData} />
-         </MaterialUIControllerProvider>
-      )));
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function AnonymousRouterBody()
-   {
-      const {renderAppWrapper} = useAnonymousAuthenticationModule({});
-      return (renderAppWrapper(authenticationMetaData, (
-         <MaterialUIControllerProvider>
-            <App authenticationMetaData={authenticationMetaData} />
-         </MaterialUIControllerProvider>
-      )));
-   }
-
-
    const container = document.getElementById("root");
    const root = createRoot(container);
 
    if (authenticationMetaData.type === "AUTH_0")
    {
-      root.render(<BrowserRouter>
-         <Auth0RouterBody />
-      </BrowserRouter>);
-   }
-   else if (authenticationMetaData.type === "OAUTH2")
-   {
-      root.render(<BrowserRouter>
-         <OAuth2RouterBody />
-      </BrowserRouter>);
-   }
-   else if (authenticationMetaData.type === "FULLY_ANONYMOUS" || authenticationMetaData.type === "MOCK")
-   {
-      root.render(<BrowserRouter>
-         <AnonymousRouterBody />
-      </BrowserRouter>);
+      // @ts-ignore
+      let domain: string = authenticationMetaData.data.baseUrl;
+
+      // @ts-ignore
+      const clientId = authenticationMetaData.data.clientId;
+
+      // @ts-ignore
+      const audience = authenticationMetaData.data.audience;
+
+      if(!domain || !clientId)
+      {
+         root.render(
+            <div>Error:  AUTH0 authenticationMetaData is missing domain [{domain}] and/or clientId [{clientId}].</div>
+         );
+         return;
+      }
+
+      if(domain.endsWith("/"))
+      {
+         /////////////////////////////////////////////////////////////////////////////////////
+         // auth0 lib fails if we have a trailing slash.  be a bit more graceful than that. //
+         /////////////////////////////////////////////////////////////////////////////////////
+         domain = domain.replace(/\/$/, "");
+      }
+
+      root.render(
+         <BrowserRouter>
+            <Auth0ProviderWithRedirectCallback
+               domain={domain}
+               clientId={clientId}
+               audience={audience}
+               redirectUri={`${window.location.origin}/`}
+            >
+               <MaterialUIControllerProvider>
+                  <ProtectedRoute component={App} />
+               </MaterialUIControllerProvider>
+            </Auth0ProviderWithRedirectCallback>
+         </BrowserRouter>
+      );
    }
    else
    {
-      root.render(<div>
-         Error: Unknown authenticationMetaData type: [{authenticationMetaData.type}].
-      </div>);
+      root.render(
+         <BrowserRouter>
+            <MaterialUIControllerProvider>
+               <App />
+            </MaterialUIControllerProvider>
+         </BrowserRouter>
+      );
    }
 
-});
+})

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

@@ -134,36 +134,17 @@ public class MaterialDashboardTableMetaData extends QSupplementalTableMetaData
 
       for(FieldRule fieldRule : CollectionUtils.nonNullList(fieldRules))
       {
-         validateFieldRule(qInstance, tableMetaData, qInstanceValidator, fieldRule, 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");
 
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   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()))
+         if(qInstanceValidator.assertCondition(StringUtils.hasContent(fieldRule.getSourceField()), prefix + "has a fieldRule without a sourceField"))
          {
-            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");
+            qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldRule.getSourceField()), prefix + "has a fieldRule with an unrecognized sourceField: " + fieldRule.getSourceField());
+         }
+
+         if(qInstanceValidator.assertCondition(StringUtils.hasContent(fieldRule.getTargetField()), prefix + "has a fieldRule without a targetField"))
+         {
+            qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldRule.getTargetField()), prefix + "has a fieldRule with an unrecognized targetField: " + fieldRule.getTargetField());
          }
       }
    }

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

@@ -38,8 +38,6 @@ public class FieldRule implements Serializable
    private FieldRuleAction  action;
    private String           targetField;
 
-   private String targetWidget;
-
 
 
    /*******************************************************************************
@@ -164,35 +162,4 @@ public class FieldRule implements Serializable
       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

@@ -27,6 +27,5 @@ package com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules;
  *******************************************************************************/
 public enum FieldRuleAction
 {
-   CLEAR_TARGET_FIELD,
-   RELOAD_WIDGET
+   CLEAR_TARGET_FIELD
 }

src/qqq/authorization/anonymous/useAnonymousAuthenticationModule.tsx

@@ -1,82 +0,0 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2025.  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 {QAuthenticationMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAuthenticationMetaData";
-import {SESSION_UUID_COOKIE_NAME} from "App";
-import Client from "qqq/utils/qqq/Client";
-import {useCookies} from "react-cookie";
-import {Md5} from "ts-md5/dist/md5";
-
-const qController = Client.getInstance();
-
-interface Props
-{
-   setIsFullyAuthenticated?: (is: boolean) => void;
-   setLoggedInUser?: (user: any) => void;
-   setEarlyReturnForAuth?: (element: JSX.Element | null) => void;
-}
-
-/***************************************************************************
- ** hook for working with the anonymous authentication module
- ***************************************************************************/
-export default function useAnonymousAuthenticationModule({setIsFullyAuthenticated, setLoggedInUser, setEarlyReturnForAuth}: Props)
-{
-   const [cookies, setCookie, removeCookie] = useCookies([SESSION_UUID_COOKIE_NAME]);
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   const setupSession = async () =>
-   {
-      console.log("Generating random token...");
-      setIsFullyAuthenticated(true);
-      qController.setGotAuthentication();
-      setCookie(SESSION_UUID_COOKIE_NAME, Md5.hashStr(`${new Date()}`), {path: "/"});
-      console.log("Token generation complete.");
-   };
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   const logout = () =>
-   {
-      qController.clearAuthenticationMetaDataLocalStorage();
-      removeCookie(SESSION_UUID_COOKIE_NAME, {path: "/"});
-   };
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   const renderAppWrapper = (authenticationMetaData: QAuthenticationMetaData, children: JSX.Element): JSX.Element =>
-   {
-      return children;
-   };
-
-
-   return {
-      setupSession,
-      logout,
-      renderAppWrapper
-   };
-
-}

src/qqq/authorization/auth0/useAuth0AuthenticationModule.tsx

@@ -1,252 +0,0 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2025.  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 {Auth0Provider, useAuth0} from "@auth0/auth0-react";
-import {QAuthenticationMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAuthenticationMetaData";
-import App, {SESSION_UUID_COOKIE_NAME} from "App";
-import HandleAuthorizationError from "HandleAuthorizationError";
-import jwt_decode from "jwt-decode";
-import ProtectedRoute from "qqq/authorization/auth0/ProtectedRoute";
-import {MaterialUIControllerProvider} from "qqq/context";
-import Client from "qqq/utils/qqq/Client";
-import {useCookies} from "react-cookie";
-import {useNavigate, useSearchParams} from "react-router-dom";
-
-const qController = Client.getInstance();
-
-interface Props
-{
-   setIsFullyAuthenticated?: (is: boolean) => void;
-   setLoggedInUser?: (user: any) => void;
-   setEarlyReturnForAuth?: (element: JSX.Element | null) => void;
-}
-
-/***************************************************************************
- ** hook for working with the Auth0 authentication module
- ***************************************************************************/
-export default function useAuth0AuthenticationModule({setIsFullyAuthenticated, setLoggedInUser}: Props)
-{
-   const {user: auth0User, getAccessTokenSilently: auth0GetAccessTokenSilently, logout: useAuth0Logout} = useAuth0();
-
-   const [cookies, removeCookie] = useCookies([SESSION_UUID_COOKIE_NAME]);
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   const shouldStoreNewToken = (newToken: string, oldToken: string): boolean =>
-   {
-      if (!cookies[SESSION_UUID_COOKIE_NAME])
-      {
-         console.log("No session uuid cookie - so we should store a new one.");
-         return (true);
-      }
-
-      if (!oldToken)
-      {
-         console.log("No accessToken in localStorage - so we should store a new one.");
-         return (true);
-      }
-
-      try
-      {
-         const oldJSON: any = jwt_decode(oldToken);
-         const newJSON: any = jwt_decode(newToken);
-
-         ////////////////////////////////////////////////////////////////////////////////////
-         // 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()))
-         {
-            console.log("Access token in local storage was expired - so we should store a new one.");
-            return (true);
-         }
-
-         ////////////////////////////////////////////////////////////////////////////////////////////////
-         // 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"];
-
-         const different = JSON.stringify(newJSON) !== JSON.stringify(oldJSON);
-         if (different)
-         {
-            console.log("Latest access token from auth0 has changed vs localStorage - so we should store a new one.");
-         }
-         return (different);
-      }
-      catch (e)
-      {
-         console.log("Caught in shouldStoreNewToken: " + e);
-      }
-
-      return (true);
-   };
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   const setupSession = async () =>
-   {
-      try
-      {
-         console.log("Loading token from auth0...");
-         const accessToken = await auth0GetAccessTokenSilently();
-
-         const lsAccessToken = localStorage.getItem("accessToken");
-         if (shouldStoreNewToken(accessToken, lsAccessToken))
-         {
-            console.log("Sending accessToken to backend, requesting a sessionUUID...");
-            const {uuid: values} = await qController.manageSession(accessToken, null);
-
-            localStorage.setItem("accessToken", accessToken);
-            localStorage.setItem("sessionValues", JSON.stringify(values));
-            console.log("Got new sessionUUID from backend, and stored new accessToken");
-         }
-         else
-         {
-            console.log("Using existing sessionUUID cookie");
-         }
-
-         setIsFullyAuthenticated(true);
-         qController.setGotAuthentication();
-
-         setLoggedInUser(auth0User);
-         console.log("Token load complete.");
-      }
-      catch (e)
-      {
-         console.log(`Error loading token: ${JSON.stringify(e)}`);
-         qController.clearAuthenticationMetaDataLocalStorage();
-         localStorage.removeItem("accessToken");
-         removeCookie(SESSION_UUID_COOKIE_NAME, {path: "/"});
-         useAuth0Logout();
-         return;
-      }
-   };
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   const logout = () =>
-   {
-      useAuth0Logout({returnTo: window.location.origin});
-   };
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   // @ts-ignore
-   function Auth0ProviderWithRedirectCallback({children, ...props})
-   {
-      const navigate = useNavigate();
-      const [searchParams] = useSearchParams();
-
-      // @ts-ignore
-      const onRedirectCallback = (appState) =>
-      {
-         navigate((appState && appState.returnTo) || window.location.pathname);
-      };
-      if (searchParams.get("error"))
-      {
-         return (
-            // @ts-ignore
-            <Auth0Provider {...props}>
-               <HandleAuthorizationError errorMessage={searchParams.get("error_description")} />
-            </Auth0Provider>
-         );
-      }
-      else
-      {
-         return (
-            // @ts-ignore
-            <Auth0Provider onRedirectCallback={onRedirectCallback} {...props}>
-               {children}
-            </Auth0Provider>
-         );
-      }
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   const renderAppWrapper = (authenticationMetaData: QAuthenticationMetaData): JSX.Element =>
-   {
-      // @ts-ignore
-      let domain: string = authenticationMetaData.data.baseUrl;
-
-      // @ts-ignore
-      const clientId = authenticationMetaData.data.clientId;
-
-      // @ts-ignore
-      const audience = authenticationMetaData.data.audience;
-
-      if (!domain || !clientId)
-      {
-         return (
-            <div>Error: AUTH0 authenticationMetaData is missing baseUrl [{domain}] and/or clientId [{clientId}].</div>
-         );
-      }
-
-      if (domain.endsWith("/"))
-      {
-         /////////////////////////////////////////////////////////////////////////////////////
-         // auth0 lib fails if we have a trailing slash.  be a bit more graceful than that. //
-         /////////////////////////////////////////////////////////////////////////////////////
-         domain = domain.replace(/\/$/, "");
-      }
-
-      /***************************************************************************
-       ** simple Functional Component to wrap the <App> and pass the authentication-
-       ** MetaData prop in, so a simple Component can be passed into ProtectedRoute
-       ***************************************************************************/
-      function WrappedApp()
-      {
-         return <App authenticationMetaData={authenticationMetaData} />
-      }
-
-      return (
-         <Auth0ProviderWithRedirectCallback
-            domain={domain}
-            clientId={clientId}
-            audience={audience}
-            redirectUri={`${window.location.origin}/`}>
-            <MaterialUIControllerProvider>
-               <ProtectedRoute component={WrappedApp} />
-            </MaterialUIControllerProvider>
-         </Auth0ProviderWithRedirectCallback>
-      );
-   };
-
-
-   return {
-      setupSession,
-      logout,
-      renderAppWrapper
-   };
-
-}

src/qqq/authorization/oauth2/useOAuth2AuthenticationModule.tsx

@@ -1,188 +0,0 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2025.  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 {QAuthenticationMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAuthenticationMetaData";
-import {SESSION_UUID_COOKIE_NAME} from "App";
-import Client from "qqq/utils/qqq/Client";
-import {useCookies} from "react-cookie";
-import {AuthContextProps, AuthProvider, useAuth} from "react-oidc-context";
-import {useNavigate, useSearchParams} from "react-router-dom";
-
-const qController = Client.getInstance();
-
-interface Props
-{
-   setIsFullyAuthenticated?: (is: boolean) => void;
-   setLoggedInUser?: (user: any) => void;
-   setEarlyReturnForAuth?: (element: JSX.Element | null) => void;
-   inOAuthContext: boolean;
-}
-
-/***************************************************************************
- ** hook for working with the OAuth2  authentication module
- ***************************************************************************/
-export default function useOAuth2AuthenticationModule({setIsFullyAuthenticated, setLoggedInUser, setEarlyReturnForAuth, inOAuthContext}: Props)
-{
-   ///////////////////////////////////////////////////////////////////////////////////////
-   // the useAuth hook should only be called if we're inside the <AuthProvider> element //
-   // so on the page that uses this hook to call renderAppWrapper, we aren't in that    //
-   // element/context, thus, don't call that hook.                                      //
-   ///////////////////////////////////////////////////////////////////////////////////////
-   const authOidc: AuthContextProps | null = inOAuthContext ? useAuth() : null;
-
-   const [cookies, removeCookie] = useCookies([SESSION_UUID_COOKIE_NAME]);
-   const [searchParams] = useSearchParams();
-   const navigate = useNavigate();
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   const setupSession = async () =>
-   {
-      try
-      {
-         const preSigninRedirectPathnameKey = "oauth2.preSigninRedirect.pathname";
-         if (window.location.pathname == "/token")
-         {
-            ///////////////////////////////////////////////////////////////////////////
-            // if we're at a path of /token, get code & state params, look up values //
-            // from that state in local storage, and make a post to the backend to   //
-            // with these values - which will itself talk to the identity provider   //
-            // to get an access token, and ultimately a session.                     //
-            ///////////////////////////////////////////////////////////////////////////
-            const code = searchParams.get("code");
-            const state = searchParams.get("state");
-            const oidcString = localStorage.getItem(`oidc.${state}`);
-            if (oidcString)
-            {
-               const oidcObject = JSON.parse(oidcString) as { [name: string]: any };
-               console.log(oidcObject);
-               const manageSessionRequestBody = {code: code, codeVerifier: oidcObject.code_verifier, redirectUri: oidcObject.redirect_uri};
-               const {uuid: newSessionUuid, values} = await qController.manageSession(null, null, manageSessionRequestBody);
-               console.log(`we have new session UUID: ${newSessionUuid}`);
-
-               setIsFullyAuthenticated(true);
-               qController.setGotAuthentication();
-
-               setLoggedInUser(values?.user);
-               console.log("Token load complete.");
-
-               const preSigninRedirectPathname = localStorage.getItem(preSigninRedirectPathnameKey);
-               localStorage.removeItem(preSigninRedirectPathname);
-               navigate(preSigninRedirectPathname ?? "/", {replace: true});
-            }
-            else
-            {
-               ////////////////////////////////////////////
-               // if unrecognized state, render an error //
-               ////////////////////////////////////////////
-               setEarlyReturnForAuth(<div>Login error:  Unrecognized state.  Refresh to try again.</div>);
-            }
-         }
-         else
-         {
-            //////////////////////////////////////////////////////////////////////////
-            // if we have a sessionUUID cookie, try to validate it with the backend //
-            //////////////////////////////////////////////////////////////////////////
-            const sessionUuid = cookies[SESSION_UUID_COOKIE_NAME];
-            if (sessionUuid)
-            {
-               console.log(`we have session UUID: ${sessionUuid} - validating it...`);
-               const {values} = await qController.manageSession(null, sessionUuid, null);
-
-               setIsFullyAuthenticated(true);
-               qController.setGotAuthentication();
-
-               setLoggedInUser(values?.user);
-               console.log("Token load complete.");
-            }
-            else
-            {
-               /////////////////////////////////////////////////////////////////////////////////////////////////
-               // else no cookie, and not a token url, we need to redirect to the provider's login page       //
-               // capture the path the user was trying to access in local storage, to redirect back to later. //
-               /////////////////////////////////////////////////////////////////////////////////////////////////
-               console.log("Loading token from OAuth2 provider...");
-               console.log(authOidc);
-               localStorage.setItem(preSigninRedirectPathnameKey, window.location.pathname);
-               setEarlyReturnForAuth(<div>Signing in...</div>);
-               authOidc?.signinRedirect();
-            }
-         }
-      }
-      catch (e)
-      {
-         console.log(`Error loading token: ${JSON.stringify(e)}`);
-         logout();
-         return;
-      }
-   };
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   const logout = () =>
-   {
-      qController.clearAuthenticationMetaDataLocalStorage();
-      removeCookie(SESSION_UUID_COOKIE_NAME, {path: "/"});
-      authOidc?.signoutRedirect();
-   };
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   const renderAppWrapper = (authenticationMetaData: QAuthenticationMetaData, children: JSX.Element): JSX.Element =>
-   {
-      const authority: string = authenticationMetaData.data.baseUrl;
-      const clientId = authenticationMetaData.data.clientId;
-
-      if (!authority || !clientId)
-      {
-         return (
-            <div>Error: OAuth2 authenticationMetaData is missing baseUrl [{authority}] and/or clientId [{clientId}].</div>
-         );
-      }
-
-      const oidcConfig =
-         {
-            authority: authority,
-            client_id: clientId,
-            redirect_uri: `${window.location.origin}/token`,
-            response_type: "code",
-            scope: "openid profile email offline_access",
-         };
-
-      return (<AuthProvider {...oidcConfig}>
-         {children}
-      </AuthProvider>
-      );
-   };
-
-
-   return {
-      setupSession,
-      logout,
-      renderAppWrapper
-   };
-
-}

src/qqq/components/buttons/AuthenticationButton.tsx

@@ -1,6 +1,6 @@
 /*
  * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2025.  Kingsrook, LLC
+ * 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/
@@ -19,18 +19,20 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-package com.kingsrook.qqq.frontend.materialdashboard.model.metadata;
+import {useAuth0} from "@auth0/auth0-react";
+import {Button} from "@mui/material";
+import React from "react";
 
-
-import com.kingsrook.qqq.backend.core.model.metadata.branding.BannerSlot;
-
-
-/*******************************************************************************
- **
- *******************************************************************************/
-public enum MaterialDashboardBannerSlots implements BannerSlot
+function AuthenticationButton()
 {
-   QFMD_TOP_OF_SITE,
-   QFMD_TOP_OF_BODY,
-   QFMD_SIDE_NAV_UNDER_LOGO
+   const {loginWithRedirect, logout, isAuthenticated} = useAuth0();
+
+   if (isAuthenticated)
+   {
+      return <Button onClick={() => logout({returnTo: window.location.origin})}>Log Out</Button>;
+   }
+
+   return <Button onClick={() => loginWithRedirect()}>Log In</Button>;
 }
+
+export default AuthenticationButton;

src/qqq/components/buttons/DefaultButtons.tsx

@@ -30,17 +30,14 @@ import MDButton from "qqq/components/legacy/MDButton";
 
 export const standardWidth = "150px";
 
-const standardML = {xs: 1, md: 3};
-
 interface QCreateNewButtonProps
 {
    tablePath: string;
 }
-
 export function QCreateNewButton({tablePath}: QCreateNewButtonProps): JSX.Element
 {
    return (
-      <Box display="inline-block" ml={standardML} mr={0} width={standardWidth}>
+      <Box display="inline-block" ml={3} mr={0} width={standardWidth}>
          <Link to={`${tablePath}/create`}>
             <MDButton variant="gradient" color="info" fullWidth startIcon={<Icon>add</Icon>}>
                Create New
@@ -57,7 +54,6 @@ interface QSaveButtonProps
    onClickHandler?: any,
    disabled: boolean
 }
-
 QSaveButton.defaultProps = {
    label: "Save",
    iconName: "save"
@@ -66,7 +62,7 @@ QSaveButton.defaultProps = {
 export function QSaveButton({label, iconName, onClickHandler, disabled}: QSaveButtonProps): JSX.Element
 {
    return (
-      <Box ml={standardML} width={standardWidth}>
+      <Box ml={3} width={standardWidth}>
          <MDButton type="submit" variant="gradient" color="info" size="small" onClick={onClickHandler} fullWidth startIcon={<Icon>{iconName}</Icon>} disabled={disabled}>
             {label}
          </MDButton>
@@ -76,18 +72,17 @@ export function QSaveButton({label, iconName, onClickHandler, disabled}: QSaveBu
 
 interface QDeleteButtonProps
 {
-   onClickHandler: any;
-   disabled?: boolean;
+   onClickHandler: any
+   disabled?: boolean
 }
 
 QDeleteButton.defaultProps = {
    disabled: false
 };
-
 export function QDeleteButton({onClickHandler, disabled}: QDeleteButtonProps): JSX.Element
 {
    return (
-      <Box ml={standardML} width={standardWidth}>
+      <Box ml={3} width={standardWidth}>
          <MDButton variant="gradient" color="primary" size="small" onClick={onClickHandler} fullWidth startIcon={<Icon>delete</Icon>} disabled={disabled}>
             Delete
          </MDButton>
@@ -98,7 +93,7 @@ export function QDeleteButton({onClickHandler, disabled}: QDeleteButtonProps): J
 export function QEditButton(): JSX.Element
 {
    return (
-      <Box ml={standardML} width={standardWidth}>
+      <Box ml={3} width={standardWidth}>
          <Link to="edit">
             <MDButton variant="gradient" color="dark" size="small" fullWidth startIcon={<Icon>edit</Icon>}>
                Edit
@@ -137,7 +132,7 @@ interface QCancelButtonProps
    onClickHandler: any;
    disabled: boolean;
    label?: string;
-   iconName?: string;
+   iconName?: string
 }
 
 export function QCancelButton({
@@ -145,7 +140,7 @@ export function QCancelButton({
 }: QCancelButtonProps): JSX.Element
 {
    return (
-      <Box ml={standardML} width={standardWidth}>
+      <Box ml="auto" width={standardWidth}>
          <MDButton type="button" variant="outlined" color="dark" size="small" fullWidth startIcon={<Icon>{iconName}</Icon>} onClick={onClickHandler} disabled={disabled}>
             {label}
          </MDButton>
@@ -160,15 +155,15 @@ QCancelButton.defaultProps = {
 
 interface QSubmitButtonProps
 {
-   label?: string;
-   iconName?: string;
-   disabled: boolean;
+   label?: string
+   iconName?: string
+   disabled: boolean
 }
 
 export function QSubmitButton({label, iconName, disabled}: QSubmitButtonProps): JSX.Element
 {
    return (
-      <Box ml={standardML} width={standardWidth}>
+      <Box ml={3} width={standardWidth}>
          <MDButton type="submit" variant="gradient" color="dark" size="small" fullWidth startIcon={<Icon>{iconName}</Icon>} disabled={disabled}>
             {label}
          </MDButton>
@@ -180,24 +175,3 @@ QSubmitButton.defaultProps = {
    label: "Submit",
    iconName: "check",
 };
-
-interface QAlternateButtonProps
-{
-   label: string,
-   iconName?: string,
-   disabled: boolean,
-   onClick?: () => void
-}
-
-export function QAlternateButton({label, iconName, disabled, onClick}: QAlternateButtonProps): JSX.Element
-{
-   return (
-      <Box ml={standardML} width={standardWidth}>
-         <MDButton type="button" variant="gradient" color="secondary" size="small" fullWidth startIcon={iconName && <Icon>{iconName}</Icon>} onClick={onClick} disabled={disabled}>
-            {label}
-         </MDButton>
-      </Box>
-   );
-}
-
-QAlternateButton.defaultProps = {};

src/qqq/components/forms/BooleanFieldSwitch.tsx

@@ -80,12 +80,11 @@ interface Props
    label: string;
    value: boolean;
    isDisabled: boolean;
-   onChangeCallback?: (newValue: any) => void;
 }
 
 
 
-function BooleanFieldSwitch({name, label, value, isDisabled, onChangeCallback}: Props) : JSX.Element
+function BooleanFieldSwitch({name, label, value, isDisabled}: Props) : JSX.Element
 {
    const {setFieldValue} = useFormikContext();
 
@@ -94,10 +93,6 @@ function BooleanFieldSwitch({name, label, value, isDisabled, onChangeCallback}:
       if(!isDisabled)
       {
          setFieldValue(name, newValue);
-         if(onChangeCallback)
-         {
-            onChangeCallback(newValue);
-         }
          event.stopPropagation();
       }
    }
@@ -105,10 +100,6 @@ function BooleanFieldSwitch({name, label, value, isDisabled, onChangeCallback}:
    const toggleSwitch = () =>
    {
       setFieldValue(name, !value);
-      if(onChangeCallback)
-      {
-         onChangeCallback(!value);
-      }
    }
 
    const classNullSwitch = (value === null || value == undefined || `${value}` == "") ? "nullSwitch" : "";

src/qqq/components/forms/DynamicForm.tsx

@@ -19,16 +19,21 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {AdornmentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/AdornmentType";
+import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
+import {colors, Icon, InputLabel} from "@mui/material";
 import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
 import Grid from "@mui/material/Grid";
+import Tooltip from "@mui/material/Tooltip";
+import {useFormikContext} from "formik";
+import React, {useState} from "react";
 import QDynamicFormField from "qqq/components/forms/DynamicFormField";
 import DynamicSelect from "qqq/components/forms/DynamicSelect";
-import FileInputField from "qqq/components/forms/FileInputField";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import HelpContent from "qqq/components/misc/HelpContent";
-import React from "react";
+import ValueUtils from "qqq/utils/qqq/ValueUtils";
 
 interface Props
 {
@@ -45,6 +50,28 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
 {
    const {formFields, values, errors, touched} = formData;
 
+   const formikProps = useFormikContext();
+   const [fileName, setFileName] = useState(null as string);
+
+   const fileChanged = (event: React.FormEvent<HTMLInputElement>, field: any) =>
+   {
+      setFileName(null);
+      if (event.currentTarget.files && event.currentTarget.files[0])
+      {
+         setFileName(event.currentTarget.files[0].name);
+      }
+
+      formikProps.setFieldValue(field.name, event.currentTarget.files[0]);
+   };
+
+   const removeFile = (fieldName: string) =>
+   {
+      setFileName(null);
+      formikProps.setFieldValue(fieldName, null);
+      record?.values.delete(fieldName)
+      record?.displayValues.delete(fieldName)
+   };
+
    const bulkEditSwitchChanged = (name: string, value: boolean) =>
    {
       bulkEditSwitchChangeHandler(name, value);
@@ -55,9 +82,14 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
       <Box>
          <Box lineHeight={0}>
             <MDTypography variant="h5">{formLabel}</MDTypography>
+            {/* TODO - help text
+        <MDTypography variant="button" color="text">
+          Mandatory information
+        </MDTypography>
+        */}
          </Box>
          <Box mt={1.625}>
-            <Grid container lg={12} display="flex" spacing={3}>
+            <Grid container spacing={3}>
                {formFields
                   && Object.keys(formFields).length > 0
                   && Object.keys(formFields).map((fieldName: any) =>
@@ -73,74 +105,93 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
                         values[fieldName] = "";
                      }
 
-                     let formattedHelpContent = <HelpContent helpContents={field?.fieldMetaData?.helpContents} roles={helpRoles} helpContentKey={`${helpContentKeyPrefix ?? ""}field:${fieldName}`} />;
-                     if (formattedHelpContent)
+                     let formattedHelpContent = <HelpContent helpContents={field.fieldMetaData.helpContents} roles={helpRoles} helpContentKey={`${helpContentKeyPrefix ?? ""}field:${fieldName}`} />;
+                     if(formattedHelpContent)
                      {
-                        formattedHelpContent = <Box color="#757575" fontSize="0.875rem" mt="-0.25rem">{formattedHelpContent}</Box>;
+                        formattedHelpContent = <Box color="#757575" fontSize="0.875rem" mt="-0.25rem">{formattedHelpContent}</Box>
                      }
 
-                     const labelElement = <DynamicFormFieldLabel name={field.name} label={field.label} />;
+                     const labelElement = <Box fontSize="1rem" fontWeight="500" marginBottom="0.25rem">
+                        <label htmlFor={field.name}>{field.label}</label>
+                     </Box>
 
-                     let itemLG = (field?.fieldMetaData?.gridColumns && field?.fieldMetaData?.gridColumns > 0) ? field.fieldMetaData.gridColumns : 6;
-                     let itemXS = 12;
-                     let itemSM = 6;
-
-                     /////////////
-                     // files!! //
-                     /////////////
                      if (field.type === "file")
                      {
-                        const fileUploadAdornment = field.fieldMetaData?.getAdornment(AdornmentType.FILE_UPLOAD);
-                        const width = fileUploadAdornment?.values?.get("width") ?? "half";
-
-                        if (width == "full")
-                        {
-                           itemSM = 12;
-                           itemLG = 12;
-                        }
-
+                        const pseudoField = new QFieldMetaData({name: fieldName, type: QFieldType.BLOB});
                         return (
-                           <Grid item lg={itemLG} xs={itemXS} sm={itemSM} flexDirection="column" key={fieldName}>
-                              {labelElement}
-                              <FileInputField field={field} record={record} errorMessage={errors[fieldName]} />
+                           <Grid item xs={12} sm={6} key={fieldName}>
+                              <Box mb={1.5}>
+                                 {labelElement}
+                                 {
+                                    record && record.values.get(fieldName) && <Box fontSize="0.875rem" pb={1}>
+                                       Current File:
+                                       <Box display="inline-flex" pl={1}>
+                                          {ValueUtils.getDisplayValue(pseudoField, record, "view")}
+                                          <Tooltip placement="bottom" title="Remove current file">
+                                             <Icon className="blobIcon" fontSize="small" onClick={(e) => removeFile(fieldName)}>delete</Icon>
+                                          </Tooltip>
+                                       </Box>
+                                    </Box>
+                                 }
+                                 <Box display="flex" alignItems="center">
+                                    <Button variant="outlined" component="label">
+                                       <span style={{color: colors.lightBlue[500]}}>Choose file to upload</span>
+                                       <input
+                                          id={fieldName}
+                                          name={fieldName}
+                                          type="file"
+                                          hidden
+                                          onChange={(event: React.FormEvent<HTMLInputElement>) => fileChanged(event, field)}
+                                       />
+                                    </Button>
+                                    <Box ml={1} fontSize={"1rem"}>
+                                       {fileName}
+                                    </Box>
+                                 </Box>
+
+                                 <Box mt={0.75}>
+                                    <MDTypography component="div" variant="caption" color="error" fontWeight="regular">
+                                       {errors[fieldName] && <span>You must select a file to proceed</span>}
+                                    </MDTypography>
+                                 </Box>
+                              </Box>
                            </Grid>
                         );
                      }
 
-                     ///////////////////////
-                     // possible values!! //
-                     ///////////////////////
-                     else if (field.possibleValueProps)
+                     // possible values!!
+                     if (field.possibleValueProps)
                      {
                         const otherValuesMap = field.possibleValueProps.otherValues ?? new Map<string, any>();
                         Object.keys(values).forEach((key) =>
                         {
                            otherValuesMap.set(key, values[key]);
-                        });
+                        })
 
                         return (
-                           <Grid item lg={itemLG} xs={itemXS} sm={itemSM} key={fieldName}>
+                           <Grid item xs={12} sm={6} key={fieldName}>
                               {labelElement}
                               <DynamicSelect
-                                 fieldPossibleValueProps={field.possibleValueProps}
+                                 tableName={field.possibleValueProps.tableName}
+                                 processName={field.possibleValueProps.processName}
+                                 fieldName={fieldName}
                                  isEditable={field.isEditable}
                                  fieldLabel=""
                                  initialValue={values[fieldName]}
+                                 initialDisplayValue={field.possibleValueProps.initialDisplayValue}
                                  bulkEditMode={bulkEditMode}
                                  bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
                                  otherValues={otherValuesMap}
-                                 useCase="form"
                               />
                               {formattedHelpContent}
                            </Grid>
                         );
                      }
 
-                     ///////////////////////
-                     // everything else!! //
-                     ///////////////////////
+                     // todo? inputProps={{ autoComplete: "" }}
+                     // todo? placeholder={password.placeholder}
                      return (
-                        <Grid item lg={itemLG} xs={itemXS} sm={itemSM} key={fieldName}>
+                        <Grid item xs={12} sm={6} key={fieldName}>
                            {labelElement}
                            <QDynamicFormField
                               id={field.name}
@@ -175,19 +226,4 @@ QDynamicForm.defaultProps = {
    },
 };
 
-
-interface DynamicFormFieldLabelProps
-{
-   name: string;
-   label: string;
-}
-
-export function DynamicFormFieldLabel({name, label}: DynamicFormFieldLabelProps): JSX.Element
-{
-   return (<Box fontSize="1rem" fontWeight="500" marginBottom="0.25rem">
-      <label htmlFor={name}>{label}</label>
-   </Box>);
-}
-
-
 export default QDynamicForm;

src/qqq/components/forms/DynamicFormField.tsx

@@ -19,19 +19,16 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {QPossibleValue} from "@kingsrook/qqq-frontend-core/lib/model/QPossibleValue";
-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 DynamicSelect from "qqq/components/forms/DynamicSelect";
-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
@@ -42,10 +39,6 @@ interface Props
    value: any;
    type: string;
    isEditable?: boolean;
-   placeholder?: string;
-   backgroundColor?: string;
-
-   onChangeCallback?: (newValue: any) => void;
 
    [key: string]: any;
 
@@ -55,7 +48,7 @@ interface Props
 }
 
 function QDynamicFormField({
-   label, name, displayFormat, value, bulkEditMode, bulkEditSwitchChangeHandler, type, isEditable, placeholder, backgroundColor, formFieldObject, onChangeCallback, ...rest
+   label, name, displayFormat, value, bulkEditMode, bulkEditSwitchChangeHandler, type, isEditable, formFieldObject, ...rest
 }: Props): JSX.Element
 {
    const [switchChecked, setSwitchChecked] = useState(false);
@@ -71,30 +64,18 @@ function QDynamicFormField({
       inputLabelProps.shrink = true;
    }
 
-   const inputProps: any = {};
+   const inputProps = {};
    if (displayFormat && displayFormat.startsWith("$"))
    {
+      // @ts-ignore
       inputProps.startAdornment = <InputAdornment position="start">$</InputAdornment>;
    }
    if (displayFormat && displayFormat.endsWith("%%"))
    {
+      // @ts-ignore
       inputProps.endAdornment = <InputAdornment position="end">%</InputAdornment>;
    }
 
-   if (placeholder)
-   {
-      inputProps.placeholder = placeholder
-   }
-
-   if(backgroundColor)
-   {
-      inputProps.sx = {
-         "&.MuiInputBase-root": {
-            backgroundColor: backgroundColor
-         }
-      };
-   }
-
    // @ts-ignore
    const handleOnWheel = (e) =>
    {
@@ -104,95 +85,13 @@ 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 || onChangeCallback)
-   {
-      onChange.onChange = (e: any) =>
-      {
-         if(isToUpperCase || isToLowerCase)
-         {
-            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);
-               if(onChangeCallback)
-               {
-                  onChangeCallback(newValue);
-               }
-            });
-
-            const input = document.getElementById(name) as HTMLInputElement;
-            if (input)
-            {
-               input.setSelectionRange(beforeStart, beforeEnd);
-            }
-         }
-         else if(onChangeCallback)
-         {
-            onChangeCallback(e.currentTarget.value);
-         }
-      };
-   }
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function dynamicSelectOnChange(newValue?: QPossibleValue)
-   {
-      if(onChangeCallback)
-      {
-         onChangeCallback(newValue == null ? null : newValue.id)
-      }
-   }
-
    let field;
    let getsBulkEditHtmlLabel = true;
-   if(formFieldObject.possibleValueProps)
-   {
-      field = (<DynamicSelect
-         name={name}
-         fieldPossibleValueProps={formFieldObject.possibleValueProps}
-         isEditable={!isDisabled}
-         fieldLabel={label}
-         initialValue={value}
-         bulkEditMode={bulkEditMode}
-         bulkEditSwitchChangeHandler={bulkEditSwitchChangeHandler}
-         onChange={dynamicSelectOnChange}
-         // otherValues={otherValuesMap}
-         useCase="form"
-      />)
-   }
-   else if (type === "checkbox")
+   if (type === "checkbox")
    {
       getsBulkEditHtmlLabel = false;
       field = (<>
-         <BooleanFieldSwitch name={name} label={label} value={value} isDisabled={isDisabled} onChangeCallback={onChangeCallback} />
+         <BooleanFieldSwitch name={name} label={label} value={value} isDisabled={isDisabled} />
          <Box mt={0.75}>
             <MDTypography component="div" variant="caption" color="error" fontWeight="regular">
                {!isDisabled && <div className="fieldErrorMessage"><ErrorMessage name={name} render={msg => <span data-field-error="true">{msg}</span>} /></div>}
@@ -203,7 +102,7 @@ function QDynamicFormField({
    else if (type === "ace")
    {
       let mode = "text";
-      if (formFieldObject && formFieldObject.languageMode)
+      if(formFieldObject && formFieldObject.languageMode)
       {
          mode = formFieldObject.languageMode;
       }
@@ -220,10 +119,6 @@ function QDynamicFormField({
                onChange={(value: string, event: any) =>
                {
                   setFieldValue(name, value, false);
-                  if(onChangeCallback)
-                  {
-                     onChangeCallback(value);
-                  }
                }}
                setOptions={{useWorker: false}}
                width="100%"
@@ -238,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")
@@ -278,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

@@ -22,7 +22,6 @@
 import {AdornmentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/AdornmentType";
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
-import {FieldPossibleValueProps} from "qqq/models/fields/FieldPossibleValueProps";
 import * as Yup from "yup";
 
 
@@ -130,11 +129,18 @@ class DynamicFormUtils
 
       if (effectivelyIsRequired)
       {
-         ////////////////////////////////////////////////////////////////////////////////////////////
-         // the "nullable(true)" here doesn't mean that you're allowed to set the field to null... //
-         // rather, it's more like "null is how empty will be treated" or some-such...             //
-         ////////////////////////////////////////////////////////////////////////////////////////////
-         return (Yup.string().required(`${field.label ?? "This field"} is required.`).nullable(true));
+         if (field.possibleValueSourceName)
+         {
+            ////////////////////////////////////////////////////////////////////////////////////////////
+            // the "nullable(true)" here doesn't mean that you're allowed to set the field to null... //
+            // rather, it's more like "null is how empty will be treated" or some-such...             //
+            ////////////////////////////////////////////////////////////////////////////////////////////
+            return (Yup.string().required(`${field.label} is required.`).nullable(true));
+         }
+         else
+         {
+            return (Yup.string().required(`${field.label} is required.`));
+         }
       }
       return (null);
    }
@@ -149,49 +155,35 @@ class DynamicFormUtils
       {
          const field = qFields[i];
 
-         if(!dynamicFormFields[field.name])
-         {
-            continue;
-         }
-
          /////////////////////////////////////////
          // add props for possible value fields //
          /////////////////////////////////////////
-         if (field.possibleValueSourceName || field.inlinePossibleValueSource)
+         if (field.possibleValueSourceName && dynamicFormFields[field.name])
          {
-            let props: FieldPossibleValueProps =
-               {
-                  isPossibleValue: true,
-                  fieldName: field.name,
-                  initialDisplayValue: null
-               }
-
+            let initialDisplayValue = null;
             if (displayValues)
             {
-               props.initialDisplayValue = displayValues.get(field.name);
+               initialDisplayValue = displayValues.get(field.name);
             }
 
-            if(field.inlinePossibleValueSource)
+            if (tableName)
             {
-               //////////////////////////////////////////////////////////////////////
-               // handle an inline PVS - which is a list of possible value objects //
-               //////////////////////////////////////////////////////////////////////
-               props.possibleValues = field.inlinePossibleValueSource;
-            }
-            else if (tableName)
-            {
-               props.tableName = tableName;
-            }
-            else if (processName)
-            {
-               props.processName = processName;
+               dynamicFormFields[field.name].possibleValueProps =
+                  {
+                     isPossibleValue: true,
+                     tableName: tableName,
+                     initialDisplayValue: initialDisplayValue,
+                  };
             }
             else
             {
-               props.possibleValueSourceName = field.possibleValueSourceName;
+               dynamicFormFields[field.name].possibleValueProps =
+                  {
+                     isPossibleValue: true,
+                     processName: processName,
+                     initialDisplayValue: initialDisplayValue,
+                  };
             }
-
-            dynamicFormFields[field.name].possibleValueProps = props;
          }
       }
    }
@@ -210,7 +202,7 @@ class DynamicFormUtils
 
       if (Array.isArray(disabledFields))
       {
-         return (disabledFields.indexOf(fieldName) > -1);
+         return (disabledFields.indexOf(fieldName) > -1)
       }
       else
       {
@@ -218,44 +210,6 @@ class DynamicFormUtils
       }
    }
 
-
-   /***************************************************************************
-    * 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,20 +28,21 @@ 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 {FieldPossibleValueProps} from "qqq/models/fields/FieldPossibleValueProps";
 import Client from "qqq/utils/qqq/Client";
-import React, {useEffect, useState} from "react";
 
 interface Props
 {
-   fieldPossibleValueProps: FieldPossibleValueProps;
+   tableName?: string;
+   processName?: string;
+   fieldName: string;
    overrideId?: string;
-   name?: string;
    fieldLabel: string;
    inForm: boolean;
    initialValue?: any;
+   initialDisplayValue?: string;
    initialValues?: QPossibleValue[];
    onChange?: any;
    isEditable?: boolean;
@@ -51,12 +52,14 @@ interface Props
    otherValues?: Map<string, any>;
    variant: "standard" | "outlined";
    initiallyOpen: boolean;
-   useCase: "form" | "filter";
 }
 
 DynamicSelect.defaultProps = {
+   tableName: null,
+   processName: null,
    inForm: true,
    initialValue: null,
+   initialDisplayValue: null,
    initialValues: undefined,
    onChange: null,
    isEditable: true,
@@ -70,76 +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({fieldPossibleValueProps, overrideId, name, fieldLabel, inForm, initialValue, initialValues, onChange, isEditable, isMultiple, bulkEditMode, bulkEditSwitchChangeHandler, otherValues, variant, initiallyOpen, useCase}: Props)
+function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabel, inForm, initialValue, initialDisplayValue, initialValues, onChange, isEditable, isMultiple, bulkEditMode, bulkEditSwitchChangeHandler, otherValues, variant, initiallyOpen}: Props)
 {
-   const {fieldName, initialDisplayValue, possibleValueSourceName, possibleValues, processName, tableName} = fieldPossibleValueProps;
-
    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 - //
@@ -167,38 +110,9 @@ function DynamicSelect({fieldPossibleValueProps, overrideId, name, fieldLabel, i
       setFieldValueRef = setFieldValue;
    }
 
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   const filterInlinePossibleValues = (searchTerm: string, possibleValues: QPossibleValue[]): QPossibleValue[] =>
-   {
-      return possibleValues.filter(pv => pv.label?.toLowerCase().startsWith(searchTerm));
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   const loadResults = async (): Promise<QPossibleValue[]> =>
-   {
-      if(possibleValues)
-      {
-         return filterInlinePossibleValues(searchTerm, possibleValues)
-      }
-      else
-      {
-         return await qController.possibleValues(tableName, processName, possibleValueSourceName ?? fieldName, searchTerm ?? "", null, otherValues, useCase);
-      }
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
    useEffect(() =>
    {
-      if (firstRender)
+      if(firstRender)
       {
          // console.log("First render, so not searching...");
          setFirstRender(false);
@@ -219,9 +133,9 @@ function DynamicSelect({fieldPossibleValueProps, overrideId, name, fieldLabel, i
       (async () =>
       {
          // console.log(`doing a search with ${searchTerm}`);
-         const results: QPossibleValue[] = await loadResults();
+         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);
@@ -232,7 +146,7 @@ function DynamicSelect({fieldPossibleValueProps, overrideId, name, fieldLabel, i
          // console.log(`${results}`);
          if (active)
          {
-            setOptions([...results]);
+            setOptions([ ...results ]);
          }
       })();
 
@@ -240,67 +154,50 @@ function DynamicSelect({fieldPossibleValueProps, overrideId, name, fieldLabel, i
       {
          active = false;
       };
-   }, [searchTerm]);
+   }, [ searchTerm ]);
 
-
-   /***************************************************************************
-    ** todo - finish... call it in onOpen?
-    ***************************************************************************/
+   // 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 loadResults();
-
+            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);
       }
    };
 
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
    const handleBlur = (x: any) =>
    {
       setSearchTerm(null);
-   };
+   }
 
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
    const handleChanged = (event: React.SyntheticEvent, value: any | any[], reason: string, details?: string) =>
    {
       // console.log("handleChanged.  value is:");
       // console.log(value);
       setSearchTerm(null);
 
-      if (onChange)
+      if(onChange)
       {
-         if (isMultiple)
+         if(isMultiple)
          {
             onChange(value);
          }
@@ -309,16 +206,12 @@ function DynamicSelect({fieldPossibleValueProps, overrideId, name, fieldLabel, i
             onChange(value ? new QPossibleValue(value) : null);
          }
       }
-      else if (setFieldValueRef && fieldName)
+      else if(setFieldValueRef)
       {
          setFieldValueRef(fieldName, value ? value.id : null);
       }
    };
 
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
    const filterOptions = (options: { id: any; label: string; }[], state: FilterOptionsState<{ id: any; label: string; }>): { id: any; label: string; }[] =>
    {
       /////////////////////////////////////////////////////////////////////////////////
@@ -326,12 +219,8 @@ function DynamicSelect({fieldPossibleValueProps, overrideId, name, fieldLabel, i
       // 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}) =>
    {
@@ -339,24 +228,23 @@ function DynamicSelect({fieldPossibleValueProps, overrideId, name, fieldLabel, i
 
       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 = (
             <>
@@ -378,12 +266,8 @@ function DynamicSelect({fieldPossibleValueProps, overrideId, name, fieldLabel, i
             {content}
          </li>
       );
-   };
+   }
 
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
    const bulkEditSwitchChanged = () =>
    {
       const newSwitchValue = !switchChecked;
@@ -398,14 +282,28 @@ function DynamicSelect({fieldPossibleValueProps, overrideId, name, fieldLabel, i
    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 ?? "anonymous"}
-            name={name}
+            id={overrideId ?? fieldName}
             sx={autocompleteSX}
             open={open}
             fullWidth
@@ -413,7 +311,7 @@ function DynamicSelect({fieldPossibleValueProps, overrideId, name, fieldLabel, i
             {
                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("");
@@ -426,19 +324,19 @@ function DynamicSelect({fieldPossibleValueProps, overrideId, name, fieldLabel, i
             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}
@@ -485,7 +383,7 @@ function DynamicSelect({fieldPossibleValueProps, overrideId, name, fieldLabel, i
             inForm &&
             <Box mt={0.75}>
                <MDTypography component="div" variant="caption" color="error" fontWeight="regular">
-                  {!isDisabled && <div className="fieldErrorMessage"><ErrorMessage name={overrideId ?? fieldName ?? possibleValueSourceName ?? "anonymous"} 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>
          }
@@ -502,8 +400,7 @@ function DynamicSelect({fieldPossibleValueProps, overrideId, name, fieldLabel, i
                   id={`bulkEditSwitch-${fieldName}`}
                   checked={switchChecked}
                   onClick={bulkEditSwitchChanged}
-                  sx={{
-                     top: "-4px",
+                  sx={{top: "-4px",
                      "& .MuiSwitch-track": {
                         height: 20,
                         borderRadius: 10,
@@ -522,7 +419,7 @@ function DynamicSelect({fieldPossibleValueProps, overrideId, name, fieldLabel, i
    else
    {
       return (
-         <Box>
+         <Box mb={1.5}>
             {autocomplete}
          </Box>
       );

src/qqq/components/forms/FileInputField.tsx

@@ -1,156 +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 {AdornmentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/AdornmentType";
-import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
-import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
-import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-import {Button, colors, Icon} from "@mui/material";
-import Box from "@mui/material/Box";
-import Tooltip from "@mui/material/Tooltip";
-import {useFormikContext} from "formik";
-import MDTypography from "qqq/components/legacy/MDTypography";
-import ValueUtils from "qqq/utils/qqq/ValueUtils";
-import React, {useCallback, useState} from "react";
-import {useDropzone} from "react-dropzone";
-
-interface FileInputFieldProps
-{
-   field: any,
-   record?: QRecord,
-   errorMessage?: any
-}
-
-export default function FileInputField({field, record, errorMessage}: FileInputFieldProps): JSX.Element
-{
-   const [fileName, setFileName] = useState(null as string);
-
-   const formikProps = useFormikContext();
-
-   const fileChanged = (event: React.FormEvent<HTMLInputElement>, field: any) =>
-   {
-      setFileName(null);
-      if (event.currentTarget.files && event.currentTarget.files[0])
-      {
-         setFileName(event.currentTarget.files[0].name);
-      }
-
-      formikProps.setFieldValue(field.name, event.currentTarget.files[0]);
-   };
-
-   const onDrop = useCallback((acceptedFiles: any) =>
-   {
-      setFileName(null);
-      if (acceptedFiles.length && acceptedFiles[0])
-      {
-         setFileName(acceptedFiles[0].name);
-      }
-
-      formikProps.setFieldValue(field.name, acceptedFiles[0]);
-   }, []);
-   const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop});
-
-
-   const removeFile = (fieldName: string) =>
-   {
-      setFileName(null);
-      formikProps.setFieldValue(fieldName, null);
-      record?.values.delete(fieldName);
-      record?.displayValues.delete(fieldName);
-   };
-
-   const pseudoField = new QFieldMetaData({name: field.name, type: QFieldType.BLOB});
-
-   const fileUploadAdornment = field.fieldMetaData?.getAdornment(AdornmentType.FILE_UPLOAD);
-   const format = fileUploadAdornment?.values?.get("format") ?? "button";
-
-   return (
-      <Box mb={1.5}>
-         {
-            record && record.values.get(field.name) && <Box fontSize="0.875rem" pb={1}>
-               Current File:
-               <Box display="inline-flex" pl={1}>
-                  {ValueUtils.getDisplayValue(pseudoField, record, "view")}
-                  <Tooltip placement="bottom" title="Remove current file">
-                     <Icon className="blobIcon" fontSize="small" onClick={(e) => removeFile(field.name)}>delete</Icon>
-                  </Tooltip>
-               </Box>
-            </Box>
-         }
-
-         {
-            format == "button" &&
-               <Box display="flex" alignItems="center">
-                  <Button variant="outlined" component="label">
-                     <span style={{color: colors.lightBlue[500]}}>Choose file to upload</span>
-                     <input
-                        id={field.name}
-                        name={field.name}
-                        type="file"
-                        hidden
-                        onChange={(event: React.FormEvent<HTMLInputElement>) => fileChanged(event, field)}
-                     />
-                  </Button>
-                  <Box ml={1} fontSize={"1rem"}>
-                     {fileName}
-                  </Box>
-               </Box>
-         }
-
-         {
-            format == "dragAndDrop" &&
-            <>
-               <Box {...getRootProps()} sx={
-                  {
-                     display: "flex",
-                     alignItems: "center",
-                     justifyContent: "center",
-                     width: "100%",
-                     height: "300px",
-                     borderRadius: "2rem",
-                     backgroundColor: isDragActive ? colors.lightBlue[50] : "transparent",
-                     border: `2px ${isDragActive ? "solid" : "dashed"} ${colors.lightBlue[500]}`
-                  }}>
-                  <input {...getInputProps()} />
-                  <Box display="flex" alignItems="center" flexDirection="column">
-                     <Icon sx={{fontSize: "4rem !important", color: colors.lightBlue[500]}}>upload_file</Icon>
-                     <Box>Drag and drop a file</Box>
-                     <Box fontSize="1rem" m="0.5rem">or</Box>
-                     <Box border={`2px solid ${colors.lightBlue[500]}`} mt="0.25rem" padding="0.25rem 1rem" borderRadius="0.5rem" sx={{cursor: "pointer"}} fontSize="1rem">
-                        Browse files
-                     </Box>
-                  </Box>
-               </Box>
-               <Box fontSize={"1rem"} mt="0.25rem">
-                  {fileName}&nbsp;
-               </Box>
-            </>
-         }
-
-         <Box mt={0.75}>
-            <MDTypography component="div" variant="caption" color="error" fontWeight="regular">
-               {errorMessage && <span>{errorMessage}</span>}
-            </MDTypography>
-         </Box>
-      </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/Footer.tsx

@@ -64,14 +64,13 @@ function Footer({company, links}: Props): JSX.Element
       <Box
          width="100%"
          display="flex"
-         flexDirection={{xs: "column", md: "row"}}
+         flexDirection={{xs: "column", lg: "row"}}
          justifyContent="space-between"
          alignItems="center"
          px={1.5}
          style={{
             position: "fixed", bottom: "0px", zIndex: -1, marginBottom: "10px",
          }}
-         left={{xs: "0", xl: "auto"}}
       >
          {
             href && name &&

src/qqq/components/horseshoe/NavBar.tsx

@@ -19,16 +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 {Theme} from "@mui/material/styles";
 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";
@@ -45,8 +45,7 @@ interface Props
    isMini?: boolean;
 }
 
-interface HistoryEntry
-{
+interface HistoryEntry {
    id: number;
    path: string;
    label: string;
@@ -65,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(() =>
    {
@@ -100,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
@@ -112,7 +111,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
    const goToHistory = (path: string) =>
    {
       navigate(path);
-   };
+   }
 
    function buildHistoryEntries()
    {
@@ -120,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);
    }
 
@@ -134,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)
    {
@@ -147,8 +146,8 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
          {...props}
          style={{whiteSpace: "nowrap", width: "auto"}}
          placement="bottom-end"
-      />);
-   };
+      />)
+   }
 
    const renderHistory = () =>
    {
@@ -167,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">
@@ -185,7 +184,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
             )}
          />
       );
-   };
+   }
 
    // Styles for the navbar icons
    const iconsStyle = ({
@@ -211,34 +210,21 @@ 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]);
 
-   ///////////////////////////////////////////////////////////////////////////////////////////////
-   // set the right-half of the navbar up so that below the 'md' breakpoint, it just disappears //
-   ///////////////////////////////////////////////////////////////////////////////////////////////
-   const navbarRowRight = (theme: Theme, {isMini}: any) =>
-   {
-      return {
-         [theme.breakpoints.down("md")]: {
-            display: "none",
-         },
-         ...navbarRow(theme, isMini)
-      }
-   };
-
    return (
       <AppBar
          position={absolute ? "absolute" : navbarType}
@@ -255,22 +241,17 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
                <QBreadcrumbs icon="home" title={breadcrumbTitle} route={route} light={light} />
             </Box>
             {isMini ? null : (
-               <Box sx={(theme) => navbarRowRight(theme, {isMini})}>
-                  <Box mt={"-0.25rem"} pb={"0.75rem"} pr={2} mr={-2} sx={{"& *": {cursor: "pointer !important"}}}>
+               <Box sx={(theme) => navbarRow(theme, {isMini})}>
+                  <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>
          {
             pageHeader &&
             <Box display="flex" justifyContent="space-between">
-               <MDTypography pb="0.5rem" variant="h3" color={light ? "white" : "dark"} noWrap>
+               <MDTypography pb="0.5rem" textTransform="capitalize" variant="h3" color={light ? "white" : "dark"} noWrap>
                   {pageHeader}
                </MDTypography>
             </Box>

src/qqq/components/horseshoe/sidenav/SideNav.tsx

@@ -20,22 +20,21 @@
  */
 
 import {QBrandingMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QBrandingMetaData";
-import {Button} from "@mui/material";
 import Box from "@mui/material/Box";
 import Divider from "@mui/material/Divider";
 import Icon from "@mui/material/Icon";
 import Link from "@mui/material/Link";
 import List from "@mui/material/List";
+import {ReactNode, useEffect, useReducer, useState} from "react";
+import {NavLink, useLocation} from "react-router-dom";
+import AuthenticationButton from "qqq/components/buttons/AuthenticationButton";
 import SideNavCollapse from "qqq/components/horseshoe/sidenav/SideNavCollapse";
 import SideNavItem from "qqq/components/horseshoe/sidenav/SideNavItem";
 import SideNavList from "qqq/components/horseshoe/sidenav/SideNavList";
 import SidenavRoot from "qqq/components/horseshoe/sidenav/SideNavRoot";
 import sidenavLogoLabel from "qqq/components/horseshoe/sidenav/styles/SideNav";
 import MDTypography from "qqq/components/legacy/MDTypography";
-import {getBannerClassName, getBannerStyles, getBanner, makeBannerContent} from "qqq/components/misc/Banners";
 import {setMiniSidenav, setTransparentSidenav, setWhiteSidenav, useMaterialUIController,} from "qqq/context";
-import {ReactNode, useEffect, useReducer, useState} from "react";
-import {NavLink, useLocation} from "react-router-dom";
 
 
 interface Props
@@ -45,7 +44,6 @@ interface Props
    logo?: string;
    appName?: string;
    branding?: QBrandingMetaData;
-   logout: () => void;
    routes: {
       [key: string]:
          | ReactNode
@@ -68,7 +66,7 @@ interface Props
    [key: string]: any;
 }
 
-function Sidenav({color, icon, logo, appName, branding, routes, logout, ...rest}: Props): JSX.Element
+function Sidenav({color, icon, logo, appName, branding, routes, ...rest}: Props): JSX.Element
 {
    const [openCollapse, setOpenCollapse] = useState<boolean | string>(false);
    const [openNestedCollapse, setOpenNestedCollapse] = useState<boolean | string>(false);
@@ -259,7 +257,7 @@ function Sidenav({color, icon, logo, appName, branding, routes, logout, ...rest}
                      active={key === collapseName}
                      open={openCollapse === key}
                      noCollapse={noCollapse}
-                     onClick={() => (!noCollapse ? (openCollapse === key ? setOpenCollapse(false) : setOpenCollapse(key)) : null)}
+                     onClick={() => (! noCollapse ? (openCollapse === key ? setOpenCollapse(false) : setOpenCollapse(key)) : null) }
                   >
                      {collapse ? renderCollapse(collapse) : null}
                   </SideNavCollapse>
@@ -302,30 +300,6 @@ function Sidenav({color, icon, logo, appName, branding, routes, logout, ...rest}
       }
    );
 
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function EnvironmentBanner({branding}: { branding: QBrandingMetaData }): JSX.Element | null
-   {
-      // deprecated!
-      if (branding && branding.environmentBannerText)
-      {
-         return <Box mt={2} bgcolor={branding.environmentBannerColor} borderRadius={2}>
-            {branding.environmentBannerText}
-         </Box>;
-      }
-
-      const banner = getBanner(branding, "QFMD_SIDE_NAV_UNDER_LOGO");
-      if (banner)
-      {
-         return <Box className={getBannerClassName(banner)} mt={2} borderRadius={2} sx={getBannerStyles(banner)}>
-            {makeBannerContent(banner)}
-         </Box>;
-      }
-
-      return (null);
-   }
-
    return (
       <SidenavRoot
          {...rest}
@@ -356,7 +330,12 @@ function Sidenav({color, icon, logo, appName, branding, routes, logout, ...rest}
                </Box>
                }
             </Box>
-            <EnvironmentBanner branding={branding} />
+            {
+               branding && branding.environmentBannerText &&
+               <Box mt={2} bgcolor={branding.environmentBannerColor} borderRadius={2}>
+                  {branding.environmentBannerText}
+               </Box>
+            }
          </Box>
          <Divider
             light={
@@ -371,7 +350,7 @@ function Sidenav({color, icon, logo, appName, branding, routes, logout, ...rest}
                (darkMode && !transparentSidenav && whiteSidenav)
             }
          />
-         <Button onClick={logout}>Log Out</Button>
+         <AuthenticationButton />
       </SidenavRoot>
    );
 }

src/qqq/components/horseshoe/sidenav/SideNavRoot.tsx

@@ -97,7 +97,6 @@ export default styled(Drawer)(({theme, ownerState}: { theme?: Theme | any; owner
          margin: "0",
          borderRadius: "0",
          height: "100%",
-         top: "unset",
 
          ...(miniSidenav ? drawerCloseStyles() : drawerOpenStyles()),
       },

src/qqq/components/misc/Banners.tsx

@@ -1,97 +0,0 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2025.  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 {Banner} from "@kingsrook/qqq-frontend-core/lib/model/metaData/Banner";
-import {QBrandingMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QBrandingMetaData";
-import parse from "html-react-parser";
-
-/////////////////////////////////////////////////////////////////////////////////////////////////////////////
-// One may render a banner using the functions in this file as:                                            //
-//                                                                                                         //
-// const banner = getBanner(branding, "QFMD_SIDE_NAV_UNDER_LOGO");                                         //
-// return (<Box className={getBannerClassName(banner)} sx={{padding: "1rem", ...getBannerStyles(banner)}}> //
-//    {makeBannerContent(banner)}                                                                          //
-// </Box>);                                                                                                //
-/////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
-
-/***************************************************************************
- **
- ***************************************************************************/
-export function getBanner(branding: QBrandingMetaData, slot: string): Banner | null
-{
-   if (branding?.banners?.has(slot))
-   {
-      return (branding.banners.get(slot));
-   }
-
-   return (null);
-}
-
-
-/***************************************************************************
- **
- ***************************************************************************/
-export function getBannerStyles(banner: Banner)
-{
-   let bgColor = "";
-   let color = "";
-
-   if (banner)
-   {
-      if (banner.backgroundColor)
-      {
-         bgColor = banner.backgroundColor;
-      }
-
-      if (banner.textColor)
-      {
-         bgColor = banner.textColor;
-      }
-   }
-
-   const rest = banner?.additionalStyles ?? {};
-
-   return ({
-      backgroundColor: bgColor,
-      color: color,
-      ...rest
-   });
-}
-
-
-/***************************************************************************
- **
- ***************************************************************************/
-export function getBannerClassName(banner: Banner)
-{
-   return `banner ${banner?.severity?.toLowerCase()}`;
-}
-
-
-/***************************************************************************
- **
- ***************************************************************************/
-export function makeBannerContent(banner: Banner): JSX.Element
-{
-   return <>{banner?.messageHTML ? parse(banner?.messageHTML) : banner?.messageText}</>;
-}
-

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

@@ -20,7 +20,6 @@
  */
 
 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 {QTableVariant} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableVariant";
@@ -36,11 +35,11 @@ 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 React, {useState} from "react";
+import {useNavigate} from "react-router-dom";
 import {QCancelButton} from "qqq/components/buttons/DefaultButtons";
 import MDButton from "qqq/components/legacy/MDButton";
 import Client from "qqq/utils/qqq/Client";
-import React, {useState} from "react";
-import {useNavigate} from "react-router-dom";
 
 interface Props
 {
@@ -72,12 +71,7 @@ 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;
@@ -88,38 +82,31 @@ function GotoRecordDialog(props: Props): JSX.Element
       {
          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)
    {
-      options.unshift([pkey]);
+      fields.unshift(pkey);
    }
 
    const makeInitialValues = () =>
    {
       const rs = {} as { [field: string]: string };
-      options.forEach((option) => option.forEach((field) => rs[field.name] = ""));
+      fields.forEach((field) => rs[field.name] = "");
       return (rs);
    };
 
@@ -154,16 +141,11 @@ function GotoRecordDialog(props: Props): JSX.Element
       }
       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)
@@ -172,51 +154,10 @@ function GotoRecordDialog(props: Props): JSX.Element
       }
    };
 
-
-   /*******************************************************************************
-    ** 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) =>
-      {
-         if (field.type == QFieldType.STRING && !values[field.name])
-         {
-            return;
-         }
-         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, null, "AND", null, 10);
       try
       {
          const queryResult = await qController.query(props.tableMetaData.name, filter, null, props.tableVariant);
@@ -227,26 +168,12 @@ 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);
          }
       }
@@ -260,7 +187,7 @@ function GotoRecordDialog(props: Props): JSX.Element
 
    if (props.tableMetaData)
    {
-      if (options.length == 0 && !error)
+      if (fields.length == 0 && !error)
       {
          setError("This table is not configured for this feature.");
       }
@@ -273,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 &&
@@ -362,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,7 +22,6 @@
 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";
@@ -129,7 +128,6 @@ function HelpContent({helpContents, roles, heading, helpContentKey}: Props): JSX
    let selectedHelpContent = getMatchingHelpContent(helpContentsArray, roles);
 
    let content = null;
-   let errorContent = "Error rendering help content.";
    if (helpHelpActive)
    {
       if (!selectedHelpContent)
@@ -137,7 +135,6 @@ function HelpContent({helpContents, roles, heading, helpContentKey}: Props): JSX
          selectedHelpContent = new QHelpContent({content: ""});
       }
       content = selectedHelpContent.content + ` [${helpContentKey ?? "?"}]`;
-      errorContent += ` [${helpContentKey ?? "?"}]`;
    }
    else if(selectedHelpContent)
    {
@@ -151,9 +148,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/QHierarchyAutoComplete.tsx

@@ -1,795 +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 Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Icon from "@mui/material/Icon";
-import IconButton from "@mui/material/IconButton";
-import List from "@mui/material/List/List";
-import ListItem, {ListItemProps} from "@mui/material/ListItem/ListItem";
-import Menu from "@mui/material/Menu";
-import Switch from "@mui/material/Switch";
-import TextField from "@mui/material/TextField";
-import Tooltip from "@mui/material/Tooltip/Tooltip";
-import React, {useState} from "react";
-
-export type Option = { label: string, value: string | number, [key: string]: any }
-
-export type Group = { label: string, value: string | number, options: Option[], subGroups?: Group[], [key: string]: any }
-
-type StringOrNumber = string | number
-
-interface QHierarchyAutoCompleteProps
-{
-   idPrefix: string;
-   heading?: string;
-   placeholder?: string;
-   defaultGroup: Group;
-   showGroupHeaderEvenIfNoSubGroups: boolean;
-   optionValuesToHide?: StringOrNumber[];
-   buttonProps: any;
-   buttonChildren: JSX.Element | string;
-   menuDirection: "down" | "up";
-
-   isModeSelectOne?: boolean;
-   keepOpenAfterSelectOne?: boolean;
-   handleSelectedOption?: (option: Option, group: Group) => void;
-
-   isModeToggle?: boolean;
-   toggleStates?: { [optionValue: string]: boolean };
-   disabledStates?: { [optionValue: string]: boolean };
-   tooltips?: { [optionValue: string]: string };
-   handleToggleOption?: (option: Option, group: Group, newValue: boolean) => void;
-
-   optionEndAdornment?: JSX.Element;
-   handleAdornmentClick?: (option: Option, group: Group, event: React.MouseEvent<any>) => void;
-   forceRerender?: number
-}
-
-QHierarchyAutoComplete.defaultProps = {
-   menuDirection: "down",
-   showGroupHeaderEvenIfNoSubGroups: false,
-   isModeSelectOne: false,
-   keepOpenAfterSelectOne: false,
-   isModeToggle: false,
-};
-
-interface GroupWithOptions
-{
-   group?: Group;
-   options: Option[];
-}
-
-
-/***************************************************************************
- ** a sort of re-implementation of Autocomplete, that can display headers
- ** & children, which may be collapsable (Is that only for toggle mode?)
- ** but which also can have adornments that trigger actions, or be in a
- ** single-click-do-something mode.
- *
- ** Originally built just for fields  exposed on a table query screen, but
- ** then factored out of that for use in bulk-load (where it wasn't based on
- ** exposed joins).
- ***************************************************************************/
-export default function QHierarchyAutoComplete({idPrefix, heading, placeholder, defaultGroup, showGroupHeaderEvenIfNoSubGroups, optionValuesToHide, buttonProps, buttonChildren, isModeSelectOne, keepOpenAfterSelectOne, isModeToggle, handleSelectedOption, toggleStates, disabledStates, tooltips, handleToggleOption, optionEndAdornment, handleAdornmentClick, menuDirection, forceRerender}: QHierarchyAutoCompleteProps): JSX.Element
-{
-   const [menuAnchorElement, setMenuAnchorElement] = useState(null);
-   const [searchText, setSearchText] = useState("");
-   const [focusedIndex, setFocusedIndex] = useState(null as number);
-
-   const [optionsByGroup, setOptionsByGroup] = useState([] as GroupWithOptions[]);
-   const [collapsedGroups, setCollapsedGroups] = useState({} as { [groupValue: string | number]: boolean });
-
-   const [lastMouseOverXY, setLastMouseOverXY] = useState({x: 0, y: 0});
-   const [timeOfLastArrow, setTimeOfLastArrow] = useState(0);
-
-   //////////////////
-   // check usages //
-   //////////////////
-   if(isModeSelectOne)
-   {
-      if(!handleSelectedOption)
-      {
-         throw("In QAutoComplete, if isModeSelectOne=true, then a callback for handleSelectedOption must be provided.");
-      }
-   }
-
-   if(isModeToggle)
-   {
-      if(!toggleStates)
-      {
-         throw("In QAutoComplete, if isModeToggle=true, then a model for toggleStates must be provided.");
-      }
-      if(!handleToggleOption)
-      {
-         throw("In QAutoComplete, if isModeToggle=true, then a callback for handleToggleOption must be provided.");
-      }
-   }
-
-   /////////////////////
-   // init some stuff //
-   /////////////////////
-   if (optionsByGroup.length == 0)
-   {
-      collapsedGroups[defaultGroup.value] = false;
-
-      if (defaultGroup.subGroups?.length > 0)
-      {
-         /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-         // if we have exposed joins, put the table meta data with its fields, and then all of the join tables & fields too //
-         /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-         optionsByGroup.push({group: defaultGroup, options: getGroupOptionsAsAlphabeticalArray(defaultGroup)});
-
-         for (let i = 0; i < defaultGroup.subGroups?.length; i++)
-         {
-            const subGroup = defaultGroup.subGroups[i];
-            optionsByGroup.push({group: subGroup, options: getGroupOptionsAsAlphabeticalArray(subGroup)});
-
-            collapsedGroups[subGroup.value] = false;
-         }
-      }
-      else
-      {
-         ///////////////////////////////////////////////////////////
-         // no exposed joins - just the table (w/o its meta-data) //
-         ///////////////////////////////////////////////////////////
-         optionsByGroup.push({options: getGroupOptionsAsAlphabeticalArray(defaultGroup)});
-      }
-
-      setOptionsByGroup(optionsByGroup);
-      setCollapsedGroups(collapsedGroups);
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function getGroupOptionsAsAlphabeticalArray(group: Group): Option[]
-   {
-      const options: Option[] = [];
-      group.options.forEach(option =>
-      {
-         let fullOptionValue = option.value;
-         if(group.value != defaultGroup.value)
-         {
-            fullOptionValue = `${defaultGroup.value}.${option.value}`;
-         }
-
-         if(optionValuesToHide && optionValuesToHide.indexOf(fullOptionValue) > -1)
-         {
-            return;
-         }
-         options.push(option)
-      });
-      options.sort((a, b) => a.label.localeCompare(b.label));
-      return (options);
-   }
-
-
-   const optionsByGroupToShow: GroupWithOptions[] = [];
-   let maxOptionIndex = 0;
-   optionsByGroup.forEach((groupWithOptions) =>
-   {
-      let optionsToShowForThisGroup = groupWithOptions.options.filter(doesOptionMatchSearchText);
-      if (optionsToShowForThisGroup.length > 0)
-      {
-         optionsByGroupToShow.push({group: groupWithOptions.group, options: optionsToShowForThisGroup});
-         maxOptionIndex += optionsToShowForThisGroup.length;
-      }
-   });
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function doesOptionMatchSearchText(option: Option): boolean
-   {
-      if (searchText == "")
-      {
-         return (true);
-      }
-
-      const columnLabelMinusTable = option.label.replace(/.*: /, "");
-      if (columnLabelMinusTable.toLowerCase().startsWith(searchText.toLowerCase()))
-      {
-         return (true);
-      }
-
-      try
-      {
-         ////////////////////////////////////////////////////////////
-         // try to match word-boundary followed by the filter text //
-         // e.g., "name" would match "First Name" or "Last Name"   //
-         ////////////////////////////////////////////////////////////
-         const re = new RegExp("\\b" + searchText.toLowerCase());
-         if (columnLabelMinusTable.toLowerCase().match(re))
-         {
-            return (true);
-         }
-      }
-      catch (e)
-      {
-         //////////////////////////////////////////////////////////////////////////////////
-         // in case text is an invalid regex... well, at least do a starts-with match... //
-         //////////////////////////////////////////////////////////////////////////////////
-         if (columnLabelMinusTable.toLowerCase().startsWith(searchText.toLowerCase()))
-         {
-            return (true);
-         }
-      }
-
-      const tableLabel = option.label.replace(/:.*/, "");
-      if (tableLabel)
-      {
-         try
-         {
-            ////////////////////////////////////////////////////////////
-            // try to match word-boundary followed by the filter text //
-            // e.g., "name" would match "First Name" or "Last Name"   //
-            ////////////////////////////////////////////////////////////
-            const re = new RegExp("\\b" + searchText.toLowerCase());
-            if (tableLabel.toLowerCase().match(re))
-            {
-               return (true);
-            }
-         }
-         catch (e)
-         {
-            //////////////////////////////////////////////////////////////////////////////////
-            // in case text is an invalid regex... well, at least do a starts-with match... //
-            //////////////////////////////////////////////////////////////////////////////////
-            if (tableLabel.toLowerCase().startsWith(searchText.toLowerCase()))
-            {
-               return (true);
-            }
-         }
-      }
-
-      return (false);
-   }
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function openMenu(event: any)
-   {
-      setFocusedIndex(null);
-      setMenuAnchorElement(event.currentTarget);
-      setTimeout(() =>
-      {
-         document.getElementById(`field-list-dropdown-${idPrefix}-textField`).focus();
-         doSetFocusedIndex(0, true);
-      });
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function closeMenu()
-   {
-      setMenuAnchorElement(null);
-   }
-
-
-   /*******************************************************************************
-    ** Event handler for toggling an option in toggle mode
-    *******************************************************************************/
-   function handleOptionToggle(event: React.ChangeEvent<HTMLInputElement>, option: Option, group: Group)
-   {
-      event.stopPropagation();
-      handleToggleOption(option, group, event.target.checked);
-   }
-
-
-   /*******************************************************************************
-    ** Event handler for toggling a group in toggle mode
-    *******************************************************************************/
-   function handleGroupToggle(event: React.ChangeEvent<HTMLInputElement>, group: Group)
-   {
-      event.stopPropagation();
-
-      const optionsList = [...group.options.values()];
-      for (let i = 0; i < optionsList.length; i++)
-      {
-         const option = optionsList[i];
-         if (doesOptionMatchSearchText(option))
-         {
-            handleToggleOption(option, group, event.target.checked);
-         }
-      }
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function toggleCollapsedGroup(value: string | number)
-   {
-      collapsedGroups[value] = !collapsedGroups[value];
-      setCollapsedGroups(Object.assign({}, collapsedGroups));
-   }
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function getShownOptionAndGroupByIndex(targetIndex: number): { option: Option, group: Group }
-   {
-      let index = -1;
-      for (let i = 0; i < optionsByGroupToShow.length; i++)
-      {
-         const groupWithOption = optionsByGroupToShow[i];
-         for (let j = 0; j < groupWithOption.options.length; j++)
-         {
-            index++;
-
-            if (index == targetIndex)
-            {
-               return {option: groupWithOption.options[j], group: groupWithOption.group};
-            }
-         }
-      }
-
-      return (null);
-   }
-
-
-   /*******************************************************************************
-    ** event handler for keys presses
-    *******************************************************************************/
-   function keyDown(event: any)
-   {
-      // console.log(`Event key: ${event.key}`);
-      setTimeout(() => document.getElementById(`field-list-dropdown-${idPrefix}-textField`).focus());
-
-      if (isModeSelectOne && event.key == "Enter" && focusedIndex != null)
-      {
-         setTimeout(() =>
-         {
-            event.stopPropagation();
-
-            const {option, group} = getShownOptionAndGroupByIndex(focusedIndex);
-            if (option)
-            {
-               const fullOptionValue = group && group.value != defaultGroup.value ? `${group.value}.${option.value}` : option.value;
-               const isDisabled = disabledStates && disabledStates[fullOptionValue]
-               if(isDisabled)
-               {
-                  return;
-               }
-
-               if(!keepOpenAfterSelectOne)
-               {
-                  closeMenu();
-               }
-
-               handleSelectedOption(option, group ?? defaultGroup);
-
-            }
-         });
-         return;
-      }
-
-      const keyOffsetMap: { [key: string]: number } = {
-         "End": 10000,
-         "Home": -10000,
-         "ArrowDown": 1,
-         "ArrowUp": -1,
-         "PageDown": 5,
-         "PageUp": -5,
-      };
-
-      const offset = keyOffsetMap[event.key];
-      if (offset)
-      {
-         event.stopPropagation();
-         setTimeOfLastArrow(new Date().getTime());
-
-         if (isModeSelectOne)
-         {
-            let startIndex = focusedIndex;
-            if (offset > 0)
-            {
-               /////////////////
-               // a down move //
-               /////////////////
-               if (startIndex == null)
-               {
-                  startIndex = -1;
-               }
-
-               let goalIndex = startIndex + offset;
-               if (goalIndex > maxOptionIndex - 1)
-               {
-                  goalIndex = maxOptionIndex - 1;
-               }
-
-               doSetFocusedIndex(goalIndex, true);
-            }
-            else
-            {
-               ////////////////
-               // an up move //
-               ////////////////
-               let goalIndex = startIndex + offset;
-               if (goalIndex < 0)
-               {
-                  goalIndex = 0;
-               }
-
-               doSetFocusedIndex(goalIndex, true);
-            }
-         }
-      }
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function doSetFocusedIndex(i: number, tryToScrollIntoView: boolean): void
-   {
-      if (isModeSelectOne)
-      {
-         setFocusedIndex(i);
-         console.log(`Setting index to ${i}`);
-
-         if (tryToScrollIntoView)
-         {
-            const element = document.getElementById(`field-list-dropdown-${idPrefix}-${i}`);
-            element?.scrollIntoView({block: "center"});
-         }
-      }
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function setFocusedOption(option: Option, group: Group, tryToScrollIntoView: boolean)
-   {
-      let index = -1;
-      for (let i = 0; i < optionsByGroupToShow.length; i++)
-      {
-         const groupWithOption = optionsByGroupToShow[i];
-         for (let j = 0; j < groupWithOption.options.length; j++)
-         {
-            const loopOption = groupWithOption.options[j];
-            index++;
-
-            const groupMatches = (group == null || group.value == groupWithOption.group.value);
-            if (groupMatches && option.value == loopOption.value)
-            {
-               doSetFocusedIndex(index, tryToScrollIntoView);
-               return;
-            }
-         }
-      }
-   }
-
-
-   /*******************************************************************************
-    ** event handler for mouse-over the menu
-    *******************************************************************************/
-   function handleMouseOver(event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLDivElement> | React.MouseEvent<HTMLLIElement>, option: Option, group: Group, isDisabled: boolean)
-   {
-      //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-      // so we're trying to fix the case where, if you put your mouse over an element, but then press up/down arrows,                                     //
-      // where the mouse will become over a different element after the scroll, and the focus will follow the mouse instead of keyboard.                  //
-      // the last x/y isn't really useful, because the mouse generally isn't left exactly where it was when the mouse-over happened (edge of the element) //
-      // but the keyboard last-arrow time that we capture, that's what's actually being useful in here                                                    //
-      //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-      if (event.clientX == lastMouseOverXY.x && event.clientY == lastMouseOverXY.y)
-      {
-         // console.log("mouse didn't move, so, doesn't count");
-         return;
-      }
-
-      const now = new Date().getTime();
-      // console.log(`Compare now [${now}] to last arrow [${timeOfLastArrow}] (diff: [${now - timeOfLastArrow}])`);
-      if (now < timeOfLastArrow + 300)
-      {
-         // console.log("An arrow event happened less than 300 mills ago, so doesn't count.");
-         return;
-      }
-
-      // console.log("yay, mouse over...");
-      if(isDisabled)
-      {
-         setFocusedIndex(null);
-      }
-      else
-      {
-         setFocusedOption(option, group, false);
-      }
-      setLastMouseOverXY({x: event.clientX, y: event.clientY});
-   }
-
-
-   /*******************************************************************************
-    ** event handler for text input changes
-    *******************************************************************************/
-   function updateSearch(event: React.ChangeEvent<HTMLInputElement>)
-   {
-      setSearchText(event?.target?.value ?? "");
-      doSetFocusedIndex(0, true);
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function doHandleAdornmentClick(option: Option, group: Group, event: React.MouseEvent<any>)
-   {
-      console.log("In doHandleAdornmentClick");
-      closeMenu();
-      handleAdornmentClick(option, group, event);
-   }
-
-   /////////////////////////////////////////////////////////
-   // compute the group-level toggle state & count values //
-   /////////////////////////////////////////////////////////
-   const groupToggleStates: { [value: string]: boolean } = {};
-   const groupToggleCounts: { [value: string]: number } = {};
-
-   if (isModeToggle)
-   {
-      const {allOn, count} = getGroupToggleState(defaultGroup, true);
-      groupToggleStates[defaultGroup.value] = allOn;
-      groupToggleCounts[defaultGroup.value] = count;
-
-      for (let i = 0; i < defaultGroup.subGroups?.length; i++)
-      {
-         const subGroup = defaultGroup.subGroups[i];
-         const {allOn, count} = getGroupToggleState(subGroup, false);
-         groupToggleStates[subGroup.value] = allOn;
-         groupToggleCounts[subGroup.value] = count;
-      }
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function getGroupToggleState(group: Group, isMainGroup: boolean): {allOn: boolean, count: number}
-   {
-      const optionsList = [...group.options.values()];
-      let allOn = true;
-      let count = 0;
-      for (let i = 0; i < optionsList.length; i++)
-      {
-         const option = optionsList[i];
-         const name = isMainGroup ? option.value : `${group.value}.${option.value}`;
-         if(!toggleStates[name])
-         {
-            allOn = false;
-         }
-         else
-         {
-            count++;
-         }
-      }
-
-      return ({allOn: allOn, count: count});
-   }
-
-
-   let index = -1;
-   const textFieldId = `field-list-dropdown-${idPrefix}-textField`;
-   let listItemPadding = isModeToggle ? "0.125rem" : "0.5rem";
-
-   ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
-   // for z-indexes, we set each table header to i+1, then the fields in that table to i (so they go behind it) //
-   // then we increment i by 2 for the next table (so the next header goes above the previous header)           //
-   // this fixes a thing where, if one table's name wrapped to 2 lines, then when the next table below it would //
-   // come up, if it was only 1 line, then the second line from the previous one would bleed through.           //
-   ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
-   let zIndex = 1;
-
-   return (
-      <>
-         <Button onClick={openMenu} {...buttonProps}>
-            {buttonChildren}
-         </Button>
-         <Menu
-            anchorEl={menuAnchorElement}
-            anchorOrigin={{vertical: menuDirection == "down" ? "bottom" : "top", horizontal: "left"}}
-            transformOrigin={{vertical: menuDirection == "down" ? "top" : "bottom", horizontal: "left"}}
-            open={menuAnchorElement != null}
-            onClose={closeMenu}
-            onKeyDown={keyDown} // this is added here so arrow-key-up/down events don't make the whole menu become "focused" (blue outline).  it works.
-            keepMounted
-         >
-            <Box width={isModeToggle ? "305px" : "265px"} borderRadius={2} className={`fieldListMenuBody fieldListMenuBody-${idPrefix}`}>
-               {
-                  heading &&
-                  <Box px={1} py={0.5} fontWeight={"700"}>
-                     {heading}
-                  </Box>
-               }
-               <Box p={1} pt={0.5}>
-                  <TextField id={textFieldId} variant="outlined" placeholder={placeholder ?? "Search Fields"} fullWidth value={searchText} onChange={updateSearch} onKeyDown={keyDown} inputProps={{sx: {pr: "2rem"}}} />
-                  {
-                     searchText != "" && <IconButton sx={{position: "absolute", right: "0.5rem", top: "0.5rem"}} onClick={() =>
-                     {
-                        updateSearch(null);
-                        document.getElementById(textFieldId).focus();
-                     }}><Icon fontSize="small">close</Icon></IconButton>
-                  }
-               </Box>
-               <Box maxHeight={"445px"} minHeight={"445px"} overflow="auto" mr={"-0.5rem"} sx={{scrollbarGutter: "stable"}}>
-                  <List sx={{px: "0.5rem", cursor: "default"}}>
-                     {
-                        optionsByGroupToShow.map((groupWithOptions) =>
-                        {
-                           let headerContents = null;
-                           const headerGroup = groupWithOptions.group || defaultGroup;
-                           if (groupWithOptions.group || showGroupHeaderEvenIfNoSubGroups)
-                           {
-                              headerContents = (<b>{headerGroup.label}</b>);
-                           }
-
-                           if (isModeToggle)
-                           {
-                              headerContents = (<FormControlLabel
-                                 sx={{display: "flex", alignItems: "flex-start", "& .MuiFormControlLabel-label": {lineHeight: "1.4", fontWeight: "500 !important"}}}
-                                 control={<Switch
-                                    size="small"
-                                    sx={{top: "1px"}}
-                                    checked={toggleStates[headerGroup.value]}
-                                    onChange={(event) => handleGroupToggle(event, headerGroup)}
-                                 />}
-                                 label={<span style={{marginTop: "0.25rem", display: "inline-block"}}><b>{headerGroup.label} Fields</b>&nbsp;<span style={{fontWeight: 400}}>({groupToggleCounts[headerGroup.value]})</span></span>} />);
-                           }
-
-                           if (isModeToggle)
-                           {
-                              headerContents = (
-                                 <>
-                                    <IconButton
-                                       onClick={() => toggleCollapsedGroup(headerGroup.value)}
-                                       sx={{justifyContent: "flex-start", fontSize: "0.875rem", pt: 0.5, pb: 0, mr: "0.25rem"}}
-                                       disableRipple={true}
-                                    >
-                                       <Icon sx={{fontSize: "1.5rem !important", position: "relative", top: "2px"}}>{collapsedGroups[headerGroup.value] ? "expand_less" : "expand_more"}</Icon>
-                                    </IconButton>
-                                    {headerContents}
-                                 </>
-                              );
-                           }
-
-                           let marginLeft = "unset";
-                           if (isModeToggle)
-                           {
-                              marginLeft = "-1rem";
-                           }
-
-                           zIndex += 2;
-
-                           return (
-                              <React.Fragment key={groupWithOptions.group?.value ?? "theGroup"}>
-                                 <>
-                                    {headerContents && <ListItem sx={{position: "sticky", top: -1, zIndex: zIndex + 1, padding: listItemPadding, ml: marginLeft, display: "flex", alignItems: "flex-start", backgroundImage: "linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,1) 90%, rgba(255,255,255,0))"}}>{headerContents}</ListItem>}
-                                    {
-                                       groupWithOptions.options.map((option) =>
-                                       {
-                                          index++;
-                                          const key = `${groupWithOptions?.group?.value}-${option.value}`;
-
-                                          let label: JSX.Element | string = option.label;
-                                          const fullOptionValue = groupWithOptions.group && groupWithOptions.group.value != defaultGroup.value ? `${groupWithOptions.group.value}.${option.value}` : option.value;
-                                          const isDisabled = disabledStates && disabledStates[fullOptionValue]
-
-                                          if (collapsedGroups[headerGroup.value])
-                                          {
-                                             return (<React.Fragment key={key} />);
-                                          }
-
-                                          let style = {};
-                                          if (index == focusedIndex)
-                                          {
-                                             style = {backgroundColor: "#EFEFEF"};
-                                          }
-
-                                          const onClick: ListItemProps = {};
-                                          if (isModeSelectOne)
-                                          {
-                                             onClick.onClick = () =>
-                                             {
-                                                if(isDisabled)
-                                                {
-                                                   return;
-                                                }
-
-                                                if(!keepOpenAfterSelectOne)
-                                                {
-                                                   closeMenu();
-                                                }
-                                                handleSelectedOption(option, groupWithOptions.group ?? defaultGroup);
-                                             };
-                                          }
-
-                                          if (optionEndAdornment)
-                                          {
-                                             label = <Box width="100%" display="inline-flex" justifyContent="space-between">
-                                                {label}
-                                                <Box onClick={(event) => handleAdornmentClick(option, groupWithOptions.group, event)}>
-                                                   {optionEndAdornment}
-                                                </Box>
-                                             </Box>;
-                                          }
-
-                                          let contents = <>{label}</>;
-                                          let paddingLeft = "0.5rem";
-
-                                          if (isModeToggle)
-                                          {
-                                             contents = (<FormControlLabel
-                                                sx={{display: "flex", alignItems: "flex-start", "& .MuiFormControlLabel-label": {lineHeight: "1.4", color: "#606060", fontWeight: "500 !important"}}}
-                                                control={<Switch
-                                                   size="small"
-                                                   sx={{top: "-3px"}}
-                                                   checked={toggleStates[fullOptionValue]}
-                                                   onChange={(event) => handleOptionToggle(event, option, groupWithOptions.group)}
-                                                />}
-                                                label={label} />);
-                                             paddingLeft = "2.5rem";
-                                          }
-
-                                          const listItem = <ListItem
-                                             key={key}
-                                             id={`field-list-dropdown-${idPrefix}-${index}`}
-                                             sx={{color: isDisabled ? "#C0C0C0" : "#757575", p: 1, borderRadius: ".5rem", padding: listItemPadding, pl: paddingLeft, scrollMarginTop: "3rem", zIndex: zIndex, background: "#FFFFFF", ...style}}
-                                             onMouseOver={(event) => 
-                                             {
-                                                handleMouseOver(event, option, groupWithOptions.group, isDisabled)
-                                             }}
-                                             {...onClick}
-                                          >{contents}</ListItem>;
-
-                                          if(tooltips[fullOptionValue])
-                                          {
-                                             return <Tooltip key={key} title={tooltips[fullOptionValue]} placement="right" enterDelay={500}>{listItem}</Tooltip>
-                                          }
-                                          else
-                                          {
-
-                                             return listItem
-                                          }
-                                       })
-                                    }
-                                 </>
-                              </React.Fragment>
-                           );
-                        })
-                     }
-                     {
-                        index == -1 && <ListItem sx={{p: "0.5rem"}}><i>No options found.</i></ListItem>
-                     }
-                  </List>
-               </Box>
-            </Box>
-         </Menu>
-      </>
-   );
-}

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

@@ -1,790 +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 {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
-import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
-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, Button} from "@mui/material";
-import Box from "@mui/material/Box";
-import Dialog from "@mui/material/Dialog";
-import DialogActions from "@mui/material/DialogActions";
-import DialogContent from "@mui/material/DialogContent";
-import DialogTitle from "@mui/material/DialogTitle";
-import Divider from "@mui/material/Divider";
-import Icon from "@mui/material/Icon";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-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 QContext from "QContext";
-import colors from "qqq/assets/theme/base/colors";
-import {QCancelButton, QDeleteButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
-import {BulkLoadMapping, BulkLoadTableStructure, FileDescription} from "qqq/models/processes/BulkLoadModels";
-import Client from "qqq/utils/qqq/Client";
-import {SavedBulkLoadProfileUtils} from "qqq/utils/qqq/SavedBulkLoadProfileUtils";
-import React, {useContext, useEffect, useRef, useState} from "react";
-import {useLocation} from "react-router-dom";
-
-interface Props
-{
-   metaData: QInstance,
-   tableMetaData: QTableMetaData,
-   tableStructure: BulkLoadTableStructure,
-   currentSavedBulkLoadProfileRecord: QRecord,
-   currentMapping: BulkLoadMapping,
-   bulkLoadProfileOnChangeCallback?: (record: QRecord | null) => void,
-   allowSelectingProfile?: boolean,
-   fileDescription?: FileDescription,
-   bulkLoadProfileResetToSuggestedMappingCallback?: () => void
-}
-
-SavedBulkLoadProfiles.defaultProps = {
-   allowSelectingProfile: true
-};
-
-const qController = Client.getInstance();
-
-/***************************************************************************
- ** menu-button, text elements, and modal(s) that let you work with saved
- ** bulk-load profiles.
- ***************************************************************************/
-function SavedBulkLoadProfiles({metaData, tableMetaData, tableStructure, currentSavedBulkLoadProfileRecord, bulkLoadProfileOnChangeCallback, currentMapping, allowSelectingProfile, fileDescription, bulkLoadProfileResetToSuggestedMappingCallback}: Props): JSX.Element
-{
-   const [yourSavedBulkLoadProfiles, setYourSavedBulkLoadProfiles] = useState([] as QRecord[]);
-   const [bulkLoadProfilesSharedWithYou, setBulkLoadProfilesSharedWithYou] = useState([] as QRecord[]);
-   const [savedBulkLoadProfilesMenu, setSavedBulkLoadProfilesMenu] = useState(null);
-   const [savedBulkLoadProfilesHaveLoaded, setSavedBulkLoadProfilesHaveLoaded] = useState(false);
-   const [isSubmitting, setIsSubmitting] = useState(false);
-
-   const [savePopupOpen, setSavePopupOpen] = useState(false);
-   const [isSaveAsAction, setIsSaveAsAction] = useState(false);
-   const [isRenameAction, setIsRenameAction] = useState(false);
-   const [isDeleteAction, setIsDeleteAction] = useState(false);
-   const [savedBulkLoadProfileNameInputValue, setSavedBulkLoadProfileNameInputValue] = useState(null as string);
-   const [popupAlertContent, setPopupAlertContent] = useState("");
-
-   const [savedSuccessMessage, setSavedSuccessMessage] = useState(null as string);
-   const [savedFailedMessage, setSavedFailedMessage] = useState(null as string);
-
-   const anchorRef = useRef<HTMLDivElement>(null);
-   const location = useLocation();
-   const [saveOptionsOpen, setSaveOptionsOpen] = useState(false);
-
-   const SAVE_OPTION = "Save...";
-   const DUPLICATE_OPTION = "Duplicate...";
-   const RENAME_OPTION = "Rename...";
-   const DELETE_OPTION = "Delete...";
-   const CLEAR_OPTION = "New Profile";
-   const RESET_TO_SUGGESTION = "Reset to Suggested Mapping";
-
-   const {accentColor, accentColorLight, userId: currentUserId} = useContext(QContext);
-
-   const openSavedBulkLoadProfilesMenu = (event: any) => setSavedBulkLoadProfilesMenu(event.currentTarget);
-   const closeSavedBulkLoadProfilesMenu = () => setSavedBulkLoadProfilesMenu(null);
-
-   ////////////////////////////////////////////////////////////////////////
-   // load records on first run (if user is allowed to select a profile) //
-   ////////////////////////////////////////////////////////////////////////
-   useEffect(() =>
-   {
-      if (allowSelectingProfile)
-      {
-         loadSavedBulkLoadProfiles()
-            .then(() =>
-            {
-               setSavedBulkLoadProfilesHaveLoaded(true);
-            });
-      }
-   }, []);
-
-
-   const baseBulkLoadMapping: BulkLoadMapping = currentSavedBulkLoadProfileRecord ? BulkLoadMapping.fromSavedProfileRecord(tableStructure, currentSavedBulkLoadProfileRecord) : new BulkLoadMapping(tableStructure);
-   const bulkLoadProfileDiffs: any[] = SavedBulkLoadProfileUtils.diffBulkLoadMappings(tableStructure, fileDescription, baseBulkLoadMapping, currentMapping);
-   let bulkLoadProfileIsModified = false;
-   if (bulkLoadProfileDiffs.length > 0)
-   {
-      bulkLoadProfileIsModified = true;
-   }
-
-   /*******************************************************************************
-    ** make request to load all saved profiles from backend
-    *******************************************************************************/
-   async function loadSavedBulkLoadProfiles()
-   {
-      if (!tableMetaData)
-      {
-         return;
-      }
-
-      const formData = new FormData();
-      formData.append("tableName", tableMetaData.name);
-
-      const savedBulkLoadProfiles = await makeSavedBulkLoadProfileRequest("querySavedBulkLoadProfile", formData);
-      const yourSavedBulkLoadProfiles: QRecord[] = [];
-      const bulkLoadProfilesSharedWithYou: QRecord[] = [];
-      for (let i = 0; i < savedBulkLoadProfiles.length; i++)
-      {
-         const record = savedBulkLoadProfiles[i];
-         if (record.values.get("userId") == currentUserId)
-         {
-            yourSavedBulkLoadProfiles.push(record);
-         }
-         else
-         {
-            bulkLoadProfilesSharedWithYou.push(record);
-         }
-      }
-      setYourSavedBulkLoadProfiles(yourSavedBulkLoadProfiles);
-      setBulkLoadProfilesSharedWithYou(bulkLoadProfilesSharedWithYou);
-   }
-
-
-   /*******************************************************************************
-    ** fired when a saved record is clicked from the dropdown
-    *******************************************************************************/
-   const handleSavedBulkLoadProfileRecordOnClick = async (record: QRecord) =>
-   {
-      setSavePopupOpen(false);
-      closeSavedBulkLoadProfilesMenu();
-
-      if (bulkLoadProfileOnChangeCallback)
-      {
-         bulkLoadProfileOnChangeCallback(record);
-      }
-   };
-
-
-   /*******************************************************************************
-    ** fired when a save option is selected from the save... button/dropdown combo
-    *******************************************************************************/
-   const handleDropdownOptionClick = (optionName: string) =>
-   {
-      setSaveOptionsOpen(false);
-      setPopupAlertContent("");
-      closeSavedBulkLoadProfilesMenu();
-      setSavePopupOpen(true);
-      setIsSaveAsAction(false);
-      setIsRenameAction(false);
-      setIsDeleteAction(false);
-
-      switch (optionName)
-      {
-         case SAVE_OPTION:
-            if (currentSavedBulkLoadProfileRecord == null)
-            {
-               setSavedBulkLoadProfileNameInputValue("");
-            }
-            break;
-         case DUPLICATE_OPTION:
-            setSavedBulkLoadProfileNameInputValue("");
-            setIsSaveAsAction(true);
-            break;
-         case CLEAR_OPTION:
-            setSavePopupOpen(false);
-            if (bulkLoadProfileOnChangeCallback)
-            {
-               bulkLoadProfileOnChangeCallback(null);
-            }
-            break;
-         case RESET_TO_SUGGESTION:
-            setSavePopupOpen(false);
-            if(bulkLoadProfileResetToSuggestedMappingCallback)
-            {
-               bulkLoadProfileResetToSuggestedMappingCallback();
-            }
-            break;
-         case RENAME_OPTION:
-            if (currentSavedBulkLoadProfileRecord != null)
-            {
-               setSavedBulkLoadProfileNameInputValue(currentSavedBulkLoadProfileRecord.values.get("label"));
-            }
-            setIsRenameAction(true);
-            break;
-         case DELETE_OPTION:
-            setIsDeleteAction(true);
-            break;
-      }
-   };
-
-
-   /*******************************************************************************
-    ** fired when save or delete button saved on confirmation dialogs
-    *******************************************************************************/
-   async function handleDialogButtonOnClick()
-   {
-      try
-      {
-         setPopupAlertContent("");
-         setIsSubmitting(true);
-
-         const formData = new FormData();
-         if (isDeleteAction)
-         {
-            formData.append("id", currentSavedBulkLoadProfileRecord.values.get("id"));
-            await makeSavedBulkLoadProfileRequest("deleteSavedBulkLoadProfile", formData);
-
-            setSavePopupOpen(false);
-            setSaveOptionsOpen(false);
-
-            await (async () =>
-            {
-               handleDropdownOptionClick(CLEAR_OPTION);
-            })();
-         }
-         else
-         {
-            formData.append("tableName", tableMetaData.name);
-
-            /////////////////////////////////////////////////////////////////////////////////////////
-            // convert the BulkLoadMapping object to a BulkLoadProfile - the thing that gets saved //
-            /////////////////////////////////////////////////////////////////////////////////////////
-            const bulkLoadProfile = currentMapping.toProfile();
-            const mappingJson = JSON.stringify(bulkLoadProfile.profile);
-            formData.append("mappingJson", mappingJson);
-
-            if (isSaveAsAction || isRenameAction || currentSavedBulkLoadProfileRecord == null)
-            {
-               formData.append("label", savedBulkLoadProfileNameInputValue);
-               if (currentSavedBulkLoadProfileRecord != null && isRenameAction)
-               {
-                  formData.append("id", currentSavedBulkLoadProfileRecord.values.get("id"));
-               }
-            }
-            else
-            {
-               formData.append("id", currentSavedBulkLoadProfileRecord.values.get("id"));
-               formData.append("label", currentSavedBulkLoadProfileRecord?.values.get("label"));
-            }
-            const recordList = await makeSavedBulkLoadProfileRequest("storeSavedBulkLoadProfile", formData);
-            await (async () =>
-            {
-               if (recordList && recordList.length > 0)
-               {
-                  setSavedBulkLoadProfilesHaveLoaded(false);
-                  setSavedSuccessMessage("Profile Saved.");
-                  setTimeout(() => setSavedSuccessMessage(null), 2500);
-
-                  if (allowSelectingProfile)
-                  {
-                     loadSavedBulkLoadProfiles();
-                     handleSavedBulkLoadProfileRecordOnClick(recordList[0]);
-                  }
-                  else
-                  {
-                     if (bulkLoadProfileOnChangeCallback)
-                     {
-                        bulkLoadProfileOnChangeCallback(recordList[0]);
-                     }
-                  }
-               }
-            })();
-         }
-
-         setSavePopupOpen(false);
-         setSaveOptionsOpen(false);
-      }
-      catch (e: any)
-      {
-         let message = JSON.stringify(e);
-         if (typeof e == "string")
-         {
-            message = e;
-         }
-         else if (typeof e == "object" && e.message)
-         {
-            message = e.message;
-         }
-
-         setPopupAlertContent(message);
-         console.log(`Setting error: ${message}`);
-      }
-      finally
-      {
-         setIsSubmitting(false);
-      }
-   }
-
-
-   /*******************************************************************************
-    ** stores the current dialog input text to state
-    *******************************************************************************/
-   const handleSaveDialogInputChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) =>
-   {
-      setSavedBulkLoadProfileNameInputValue(event.target.value);
-   };
-
-
-   /*******************************************************************************
-    ** closes current dialog
-    *******************************************************************************/
-   const handleSavePopupClose = () =>
-   {
-      setSavePopupOpen(false);
-   };
-
-
-   /*******************************************************************************
-    ** make a request to the backend for various savedBulkLoadProfile processes
-    *******************************************************************************/
-   async function makeSavedBulkLoadProfileRequest(processName: string, formData: FormData): Promise<QRecord[]>
-   {
-      /////////////////////////
-      // fetch saved records //
-      /////////////////////////
-      let savedBulkLoadProfiles = [] as QRecord[];
-      try
-      {
-         //////////////////////////////////////////////////////////////////
-         // we don't want this job to go async, so, pass a large timeout //
-         //////////////////////////////////////////////////////////////////
-         formData.append(QController.STEP_TIMEOUT_MILLIS_PARAM_NAME, 60 * 1000);
-         const processResult = await qController.processInit(processName, formData, qController.defaultMultipartFormDataHeaders());
-         if (processResult instanceof QJobError)
-         {
-            const jobError = processResult as QJobError;
-            throw (jobError.error);
-         }
-         else
-         {
-            const result = processResult as QJobComplete;
-            if (result.values.savedBulkLoadProfileList)
-            {
-               for (let i = 0; i < result.values.savedBulkLoadProfileList.length; i++)
-               {
-                  const qRecord = new QRecord(result.values.savedBulkLoadProfileList[i]);
-                  savedBulkLoadProfiles.push(qRecord);
-               }
-            }
-         }
-      }
-      catch (e)
-      {
-         throw (e);
-      }
-
-      return (savedBulkLoadProfiles);
-   }
-
-   const hasStorePermission = metaData?.processes.has("storeSavedBulkLoadProfile");
-   const hasDeletePermission = metaData?.processes.has("deleteSavedBulkLoadProfile");
-   const hasQueryPermission = metaData?.processes.has("querySavedBulkLoadProfile");
-
-   const tooltipMaxWidth = (maxWidth: string) =>
-   {
-      return ({
-         slotProps: {
-            tooltip: {
-               sx: {
-                  maxWidth: maxWidth
-               }
-            }
-         }
-      });
-   };
-
-   const menuTooltipAttribs = {...tooltipMaxWidth("250px"), placement: "left", enterDelay: 1000} as TooltipProps;
-
-   let disabledBecauseNotOwner = false;
-   let notOwnerTooltipText = null;
-   if (currentSavedBulkLoadProfileRecord && currentSavedBulkLoadProfileRecord.values.get("userId") != currentUserId)
-   {
-      disabledBecauseNotOwner = true;
-      notOwnerTooltipText = "You may not save changes to this bulk load profile, because you are not its owner.";
-   }
-
-   const menuWidth = "300px";
-   const renderSavedBulkLoadProfilesMenu = tableMetaData && (
-      <Menu
-         anchorEl={savedBulkLoadProfilesMenu}
-         anchorOrigin={{vertical: "bottom", horizontal: "left",}}
-         transformOrigin={{vertical: "top", horizontal: "left",}}
-         open={Boolean(savedBulkLoadProfilesMenu)}
-         onClose={closeSavedBulkLoadProfilesMenu}
-         keepMounted
-         PaperProps={{style: {maxHeight: "calc(100vh - 200px)", minWidth: menuWidth}}}
-      >
-         {
-            <MenuItem sx={{width: menuWidth}} disabled style={{opacity: "initial"}}><b>Bulk Load Profile Actions</b></MenuItem>
-         }
-         {
-            !allowSelectingProfile &&
-            <MenuItem sx={{width: menuWidth}} disabled style={{opacity: "initial", whiteSpace: "wrap", display: "block"}}>
-               {
-                  currentSavedBulkLoadProfileRecord ?
-                     <span>You are using the bulk load profile:<br /><b style={{paddingLeft: "1rem"}}>{currentSavedBulkLoadProfileRecord.values.get("label")}</b><br /><br />You can manage this profile on this screen.</span>
-                     : <span>You are not using a saved bulk load profile.<br /><br />You can save your profile on this screen.</span>
-               }
-            </MenuItem>
-         }
-         {
-            !allowSelectingProfile && <Divider />
-         }
-         {
-            hasStorePermission &&
-            <Tooltip {...menuTooltipAttribs} title={notOwnerTooltipText ?? <>Save your current mapping, 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>
-                     {currentSavedBulkLoadProfileRecord ? "Save..." : "Save As..."}
-                  </MenuItem>
-               </span>
-            </Tooltip>
-         }
-         {
-            hasStorePermission && currentSavedBulkLoadProfileRecord != null &&
-            <Tooltip {...menuTooltipAttribs} title={notOwnerTooltipText ?? "Change the name for this saved bulk load profile."}>
-               <span>
-                  <MenuItem disabled={currentSavedBulkLoadProfileRecord === null || disabledBecauseNotOwner} onClick={() => handleDropdownOptionClick(RENAME_OPTION)}>
-                     <ListItemIcon><Icon>edit</Icon></ListItemIcon>
-                     Rename...
-                  </MenuItem>
-               </span>
-            </Tooltip>
-         }
-         {
-            hasStorePermission && currentSavedBulkLoadProfileRecord != null &&
-            <Tooltip {...menuTooltipAttribs} title="Save a new copy this bulk load profile, with a different name, separate from the original.">
-               <span>
-                  <MenuItem disabled={currentSavedBulkLoadProfileRecord === null} onClick={() => handleDropdownOptionClick(DUPLICATE_OPTION)}>
-                     <ListItemIcon><Icon>content_copy</Icon></ListItemIcon>
-                     Save As...
-                  </MenuItem>
-               </span>
-            </Tooltip>
-         }
-         {
-            hasDeletePermission && currentSavedBulkLoadProfileRecord != null &&
-            <Tooltip {...menuTooltipAttribs} title={notOwnerTooltipText ?? "Delete this saved bulk load profile."}>
-               <span>
-                  <MenuItem disabled={currentSavedBulkLoadProfileRecord === null || disabledBecauseNotOwner} onClick={() => handleDropdownOptionClick(DELETE_OPTION)}>
-                     <ListItemIcon><Icon>delete</Icon></ListItemIcon>
-                     Delete...
-                  </MenuItem>
-               </span>
-            </Tooltip>
-         }
-         {
-            allowSelectingProfile &&
-            <Tooltip {...menuTooltipAttribs} title="Create a new blank bulk load profile for this table, removing all mappings.">
-               <span>
-                  <MenuItem onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>
-                     <ListItemIcon><Icon>monitor</Icon></ListItemIcon>
-                     New Bulk Load Profile
-                  </MenuItem>
-               </span>
-            </Tooltip>
-         }
-         {
-            allowSelectingProfile &&
-            <Box>
-               {
-                  <Divider />
-               }
-               <MenuItem disabled style={{"opacity": "initial"}}><b>Your Saved Bulk Load Profiles</b></MenuItem>
-               {
-                  yourSavedBulkLoadProfiles && yourSavedBulkLoadProfiles.length > 0 ? (
-                     yourSavedBulkLoadProfiles.map((record: QRecord, index: number) =>
-                        <MenuItem sx={{paddingLeft: "50px"}} key={`savedFiler-${index}`} onClick={() => handleSavedBulkLoadProfileRecordOnClick(record)}>
-                           {record.values.get("label")}
-                        </MenuItem>
-                     )
-                  ) : (
-                     <MenuItem disabled sx={{opacity: "1 !important"}}>
-                        <i>You do not have any saved bulk load profiles for this table.</i>
-                     </MenuItem>
-                  )
-               }
-               <MenuItem disabled style={{"opacity": "initial"}}><b>Bulk Load Profiles Shared with you</b></MenuItem>
-               {
-                  bulkLoadProfilesSharedWithYou && bulkLoadProfilesSharedWithYou.length > 0 ? (
-                     bulkLoadProfilesSharedWithYou.map((record: QRecord, index: number) =>
-                        <MenuItem sx={{paddingLeft: "50px"}} key={`savedFiler-${index}`} onClick={() => handleSavedBulkLoadProfileRecordOnClick(record)}>
-                           {record.values.get("label")}
-                        </MenuItem>
-                     )
-                  ) : (
-                     <MenuItem disabled sx={{opacity: "1 !important"}}>
-                        <i>You do not have any bulk load profiles shared with you for this table.</i>
-                     </MenuItem>
-                  )
-               }
-            </Box>
-         }
-      </Menu>
-   );
-
-   let buttonText = "Saved Bulk Load Profiles";
-   let buttonBackground = "none";
-   let buttonBorder = colors.grayLines.main;
-   let buttonColor = colors.gray.main;
-
-   if (currentSavedBulkLoadProfileRecord)
-   {
-      if (bulkLoadProfileIsModified)
-      {
-         buttonBackground = accentColorLight;
-         buttonBorder = buttonBackground;
-         buttonColor = accentColor;
-      }
-      else
-      {
-         buttonBackground = accentColor;
-         buttonBorder = buttonBackground;
-         buttonColor = "#FFFFFF";
-      }
-   }
-
-   const buttonStyles = {
-      border: `1px solid ${buttonBorder}`,
-      backgroundColor: buttonBackground,
-      color: buttonColor,
-      "&:focus:not(:hover)": {
-         color: buttonColor,
-         backgroundColor: buttonBackground,
-      },
-      "&:hover": {
-         color: buttonColor,
-         backgroundColor: buttonBackground,
-      }
-   };
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function isSaveButtonDisabled(): boolean
-   {
-      if (isSubmitting)
-      {
-         return (true);
-      }
-
-      const haveInputText = (savedBulkLoadProfileNameInputValue != null && savedBulkLoadProfileNameInputValue.trim() != "");
-
-      if (isSaveAsAction || isRenameAction || currentSavedBulkLoadProfileRecord == null)
-      {
-         if (!haveInputText)
-         {
-            return (true);
-         }
-      }
-
-      return (false);
-   }
-
-   const linkButtonStyle = {
-      minWidth: "unset",
-      textTransform: "none",
-      fontSize: "0.875rem",
-      fontWeight: "500",
-      padding: "0.5rem"
-   };
-
-   return (
-      hasQueryPermission && tableMetaData ? (
-         <>
-            <Box order="1" mr={"0.5rem"}>
-               <Button
-                  onClick={openSavedBulkLoadProfilesMenu}
-                  sx={{
-                     borderRadius: "0.75rem",
-                     textTransform: "none",
-                     fontWeight: 500,
-                     fontSize: "0.875rem",
-                     p: "0.5rem",
-                     ...buttonStyles
-                  }}
-               >
-                  <Icon sx={{mr: "0.5rem"}}>save</Icon>
-                  {buttonText}
-                  <Icon sx={{ml: "0.5rem"}}>keyboard_arrow_down</Icon>
-               </Button>
-               {renderSavedBulkLoadProfilesMenu}
-            </Box>
-            <Box order="3" display="flex" justifyContent="center" flexDirection="column">
-               <Box pl={2} pr={2} fontSize="0.875rem" sx={{display: "flex", alignItems: "center"}}>
-                  {
-                     savedSuccessMessage && <Box color={colors.success.main}>{savedSuccessMessage}</Box>
-                  }
-                  {
-                     savedFailedMessage && <Box color={colors.error.main}>{savedFailedMessage}</Box>
-                  }
-                  {
-                     !currentSavedBulkLoadProfileRecord /*&& bulkLoadProfileIsModified*/ && <>
-                        {
-                           <>
-                              <Tooltip {...tooltipMaxWidth("24rem")} sx={{cursor: "pointer"}} title={<>
-                                 <b>Unsaved Mapping</b>
-                                 <ul style={{padding: "0.5rem 1rem"}}>
-                                    <li>You are not using a saved bulk load profile.</li>
-                                    {
-                                       /*bulkLoadProfileDiffs.map((s: string, i: number) => <li key={i}>{s}</li>)*/
-                                    }
-                                 </ul>
-                              </>}>
-                                 <Button disableRipple={true} sx={linkButtonStyle} onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>Save Bulk Load Profile As&hellip;</Button>
-                              </Tooltip>
-
-                              {/* vertical rule */}
-                              {allowSelectingProfile && <Box display="inline-block" borderLeft={`1px solid ${colors.grayLines.main}`} height="1rem" width="1px" position="relative" />}
-                           </>
-                        }
-
-                        {/* for the no-profile use-case, don't give a reset-link on screens other than the first (file mapping) one - which is tied to the allowSelectingProfile attribute */}
-                        {allowSelectingProfile && <>
-                           <Box pl="0.5rem">Reset to:</Box>
-                           <Button disableRipple={true} sx={{color: colors.gray.main, ...linkButtonStyle}} onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>Empty Mapping</Button>
-                           <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(RESET_TO_SUGGESTION)}>Suggested Mapping</Button>
-                        </>}
-
-
-                     </>
-                  }
-                  {
-                     currentSavedBulkLoadProfileRecord && bulkLoadProfileIsModified && <>
-                        <Tooltip {...tooltipMaxWidth("24rem")} sx={{cursor: "pointer"}} title={<>
-                           <b>Unsaved Changes</b>
-                           <ul style={{padding: "0.5rem 1rem"}}>
-                              {
-                                 bulkLoadProfileDiffs.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"}}>{bulkLoadProfileDiffs.length} Unsaved Change{bulkLoadProfileDiffs.length == 1 ? "" : "s"}</Box>
-                        </Tooltip>
-
-                        {disabledBecauseNotOwner ? <>&nbsp;&nbsp;</> : <Button disableRipple={true} sx={linkButtonStyle} onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>Save&hellip;</Button>}
-
-                        {/* vertical rule */}
-                        {/* also, don't give a reset-link on screens other than the first (file mapping) one - which is tied to the allowSelectingProfile attribute */}
-                        {/* partly because it isn't correctly resetting the values, but also because, it's a litle unclear that what, it would reset changes from other screens too?? */}
-                        {
-                           allowSelectingProfile && <>
-                              <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={() => handleSavedBulkLoadProfileRecordOnClick(currentSavedBulkLoadProfileRecord)}>Reset All Changes</Button>
-                           </>
-                        }
-                     </>
-                  }
-               </Box>
-            </Box>
-            {
-               <Dialog
-                  open={savePopupOpen}
-                  onClose={handleSavePopupClose}
-                  aria-labelledby="alert-dialog-title"
-                  aria-describedby="alert-dialog-description"
-                  onKeyPress={(e) =>
-                  {
-                     ////////////////////////////////////////////////////
-                     // make user actually hit delete button           //
-                     // but for other modes, let Enter submit the form //
-                     ////////////////////////////////////////////////////
-                     if (e.key == "Enter" && !isDeleteAction)
-                     {
-                        handleDialogButtonOnClick();
-                     }
-                  }}
-               >
-                  {
-                     currentSavedBulkLoadProfileRecord ? (
-                        isDeleteAction ? (
-                           <DialogTitle id="alert-dialog-title">Delete Bulk Load Profile</DialogTitle>
-                        ) : (
-                           isSaveAsAction ? (
-                              <DialogTitle id="alert-dialog-title">Save Bulk Load Profile As</DialogTitle>
-                           ) : (
-                              isRenameAction ? (
-                                 <DialogTitle id="alert-dialog-title">Rename Bulk Load Profile</DialogTitle>
-                              ) : (
-                                 <DialogTitle id="alert-dialog-title">Update Existing Bulk Load Profile</DialogTitle>
-                              )
-                           )
-                        )
-                     ) : (
-                        <DialogTitle id="alert-dialog-title">Save New Bulk Load Profile</DialogTitle>
-                     )
-                  }
-                  <DialogContent sx={{width: "500px"}}>
-                     {popupAlertContent ? (
-                        <Box mb={1}>
-                           <Alert severity="error" onClose={() => setPopupAlertContent("")}>{popupAlertContent}</Alert>
-                        </Box>
-                     ) : ("")}
-                     {
-                        (!currentSavedBulkLoadProfileRecord || isSaveAsAction || isRenameAction) && !isDeleteAction ? (
-                           <Box>
-                              {
-                                 isSaveAsAction ? (
-                                    <Box mb={3}>Enter a name for this new saved bulk load profile.</Box>
-                                 ) : (
-                                    <Box mb={3}>Enter a new name for this saved bulk load profile.</Box>
-                                 )
-                              }
-                              <TextField
-                                 autoFocus
-                                 name="custom-delimiter-value"
-                                 placeholder="Bulk Load Profile Name"
-                                 inputProps={{width: "100%", maxLength: 100}}
-                                 value={savedBulkLoadProfileNameInputValue}
-                                 sx={{width: "100%"}}
-                                 onChange={handleSaveDialogInputChange}
-                                 onFocus={event =>
-                                 {
-                                    event.target.select();
-                                 }}
-                              />
-                           </Box>
-                        ) : (
-                           isDeleteAction ? (
-                              <Box>Are you sure you want to delete the bulk load profile {`'${currentSavedBulkLoadProfileRecord?.values.get("label")}'`}?</Box>
-                           ) : (
-                              <Box>Are you sure you want to update the bulk load profile {`'${currentSavedBulkLoadProfileRecord?.values.get("label")}'`}?</Box>
-                           )
-                        )
-                     }
-                  </DialogContent>
-                  <DialogActions>
-                     <QCancelButton onClickHandler={handleSavePopupClose} disabled={false} />
-                     {
-                        isDeleteAction ?
-                           <QDeleteButton onClickHandler={handleDialogButtonOnClick} disabled={isSubmitting} />
-                           :
-                           <QSaveButton label="Save" onClickHandler={handleDialogButtonOnClick} disabled={isSaveButtonDisabled()} />
-                     }
-                  </DialogActions>
-               </Dialog>
-            }
-         </>
-      ) : null
-   );
-}
-
-export default SavedBulkLoadProfiles;

src/qqq/components/misc/SavedViews.tsx

@@ -60,7 +60,7 @@ interface Props
    view?: RecordQueryView;
    viewAsJson?: string;
    viewOnChangeCallback?: (selectedSavedViewId: number) => void;
-   loadingSavedView: boolean;
+   loadingSavedView: boolean
    queryScreenUsage: QueryScreenUsage;
 }
 
@@ -69,8 +69,6 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    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);
@@ -93,14 +91,14 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    const CLEAR_OPTION = "New View";
    const NEW_REPORT_OPTION = "Create Report from Current View";
 
-   const {accentColor, accentColorLight, userId: currentUserId} = useContext(QContext);
+   const {accentColor, accentColorLight} = 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.   //
-   /////////////////////////////////////////////////////////////////////////////////////////////
+   /////////////////////////////////////////////////////////////////////////////////////////
+   // this component is used by <RecordQuery> - but that component has different usages - //
+   // e.g., the full-fledged query screen, but also, within other screens (e.g., a modal  //
+   // under the ReportSetupWidget).  So, there are some behaviors we only want when we're //
+   // on the full-fledged query screen, such as changing the URL with saved view ids.     //
+   /////////////////////////////////////////////////////////////////////////////////////////
    const isQueryScreen = queryScreenUsage == "queryScreen";
 
    const openSavedViewsMenu = (event: any) => setSavedViewsMenu(event.currentTarget);
@@ -116,13 +114,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 +130,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
     *******************************************************************************/
    async function loadSavedViews()
    {
-      if (!tableMetaData)
+      if (! tableMetaData)
       {
          return;
       }
@@ -142,26 +140,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 +152,14 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
       setSaveFilterPopupOpen(false);
       closeSavedViewsMenu();
       viewOnChangeCallback(record.values.get("id"));
-      if (isQueryScreen)
+      if(isQueryScreen)
       {
          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 +171,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,28 +186,28 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
             setIsSaveFilterAs(true);
             break;
          case CLEAR_OPTION:
-            setSaveFilterPopupOpen(false);
+            setSaveFilterPopupOpen(false)
             viewOnChangeCallback(null);
-            if (isQueryScreen)
+            if(isQueryScreen)
             {
                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);
+            setIsDeleteFilter(true)
             break;
          case NEW_REPORT_OPTION:
             createNewReport();
             break;
       }
-   };
+   }
 
 
    /*******************************************************************************
@@ -232,11 +215,11 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
     *******************************************************************************/
    function createNewReport()
    {
-      const defaultValues: { [key: string]: any } = {};
+      const defaultValues: {[key: string]: any} = {};
       defaultValues.tableName = tableMetaData.name;
 
       let filterForBackend = JSON.parse(JSON.stringify(view.queryFilter));
-      filterForBackend = FilterUtils.prepQueryFilterForBackend(tableMetaData, filterForBackend);
+      filterForBackend  = FilterUtils.prepQueryFilterForBackend(tableMetaData, filterForBackend);
 
       defaultValues.queryFilterJson = JSON.stringify(filterForBackend);
       defaultValues.columnsJson = JSON.stringify(view.queryColumns);
@@ -244,6 +227,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    }
 
 
+
    /*******************************************************************************
     ** fired when save or delete button saved on confirmation dialogs
     *******************************************************************************/
@@ -263,7 +247,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
             setSaveFilterPopupOpen(false);
             setSaveOptionsOpen(false);
 
-            await (async () =>
+            await(async() =>
             {
                handleDropdownOptionClick(CLEAR_OPTION);
             })();
@@ -283,14 +267,14 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
             ////////////////////////////////////////////////////////////////////////////
             // strip away incomplete filters too, just for cleaner saved view filters //
             ////////////////////////////////////////////////////////////////////////////
-            FilterUtils.stripAwayIncompleteCriteria(viewObject.queryFilter);
+            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 +285,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 +302,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 +321,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    }
 
 
+
    /*******************************************************************************
     ** hides/shows the save options
     *******************************************************************************/
@@ -346,6 +331,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    };
 
 
+
    /*******************************************************************************
     ** closes save options menu (on clickaway)
     *******************************************************************************/
@@ -360,6 +346,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    };
 
 
+
    /*******************************************************************************
     ** stores the current dialog input text to state
     *******************************************************************************/
@@ -369,6 +356,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    };
 
 
+
    /*******************************************************************************
     ** closes current dialog
     *******************************************************************************/
@@ -378,6 +366,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    };
 
 
+
    /*******************************************************************************
     ** make a request to the backend for various savedView processes
     *******************************************************************************/
@@ -386,7 +375,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
       /////////////////////////
       // fetch saved filters //
       /////////////////////////
-      let savedViews = [] as QRecord[];
+      let savedViews = [] as QRecord[]
       try
       {
          //////////////////////////////////////////////////////////////////
@@ -397,12 +386,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 +403,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
       }
       catch (e)
       {
-         throw (e);
+         throw(e);
       }
 
       return (savedViews);
@@ -427,27 +416,17 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
 
    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}
@@ -464,101 +443,75 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
          }
          {
             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>
+            <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>
+            <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 &&
             <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>
+            <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>
+               <MenuItem onClick={() => handleDropdownOptionClick(NEW_REPORT_OPTION)}>
+                  <ListItemIcon><Icon>article</Icon></ListItemIcon>
+                  Create Report from Current View
+               </MenuItem>
             </Tooltip>
          }
          {
-            isQueryScreen && <Divider />
+            isQueryScreen && <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"}}>
                   <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 +520,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 +548,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 +593,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>
@@ -671,7 +624,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
                            </>
                         }
 
-                        <Button disableRipple={true} sx={{color: colors.gray.main, ...linkButtonStyle}} onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>Reset All Changes</Button>
+                        <Button disableRipple={true} sx={{color: colors.gray.main, ... linkButtonStyle}} onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>Reset All Changes</Button>
                      </>
                   }
                   {
@@ -682,20 +635,16 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
                               {
                                  viewDiffs.map((s: string, i: number) => <li key={i}>{s}</li>)
                               }
-                           </ul>
-                           {
-                              notOwnerTooltipText && <i>{notOwnerTooltipText}</i>
-                           }
-                        </>}>
+                           </ul></>}>
                            <Box display="inline" sx={{...linkButtonStyle, p: 0, cursor: "default", position: "relative", top: "-1px"}}>{viewDiffs.length} Unsaved Change{viewDiffs.length == 1 ? "" : "s"}</Box>
                         </Tooltip>
 
-                        {disabledBecauseNotOwner ? <>&nbsp;&nbsp;</> : <Button disableRipple={true} sx={linkButtonStyle} onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>Save&hellip;</Button>}
+                        <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={() => handleSavedViewRecordOnClick(currentSavedView)}>Reset All Changes</Button>
                      </>
                   }
                   {
@@ -714,17 +663,16 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
                                     {
                                        viewDiffs.map((s: string, i: number) => <li key={i}>{s}</li>)
                                     }
-                                 </ul>
-                              </>}>
+                                 </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={{color: colors.gray.main, ... linkButtonStyle}} onClick={() => handleSavedViewRecordOnClick(currentSavedView)}>Reset Changes</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>
+                        <Button disableRipple={true} sx={{color: colors.gray.main, ... linkButtonStyle}} onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>Reset to New View</Button>
                      </Box>
                   }
                </Box>
@@ -754,15 +702,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 +721,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 +744,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 +759,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/processes/BulkLoadFileMappingField.tsx

@@ -1,329 +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 {Checkbox, FormControlLabel, Radio, Tooltip} from "@mui/material";
-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 IconButton from "@mui/material/IconButton";
-import RadioGroup from "@mui/material/RadioGroup";
-import TextField from "@mui/material/TextField";
-import {useFormikContext} from "formik";
-import colors from "qqq/assets/theme/base/colors";
-import QDynamicFormField from "qqq/components/forms/DynamicFormField";
-import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
-import {BulkLoadField, FileDescription} from "qqq/models/processes/BulkLoadModels";
-import Client from "qqq/utils/qqq/Client";
-import React, {useEffect, useState} from "react";
-
-interface BulkLoadMappingFieldProps
-{
-   bulkLoadField: BulkLoadField,
-   isRequired: boolean,
-   removeFieldCallback?: () => void,
-   fileDescription: FileDescription,
-   forceParentUpdate?: () => void,
-}
-
-const xIconButtonSX =
-   {
-      border: `1px solid ${colors.grayLines.main} !important`,
-      borderRadius: "0.5rem",
-      textTransform: "none",
-      fontSize: "1rem",
-      fontWeight: "400",
-      width: "30px",
-      minWidth: "30px",
-      height: "2rem",
-      minHeight: "2rem",
-      paddingLeft: 0,
-      paddingRight: 0,
-      marginRight: "0.5rem",
-      marginTop: "0.5rem",
-      color: colors.error.main,
-      "&:hover": {color: colors.error.main},
-      "&:focus": {color: colors.error.main},
-      "&:focus:not(:hover)": {color: colors.error.main},
-   };
-
-const qController = Client.getInstance();
-
-/***************************************************************************
- ** row for a single field on the bulk load mapping screen.
- ***************************************************************************/
-export default function BulkLoadFileMappingField({bulkLoadField, isRequired, removeFieldCallback, fileDescription, forceParentUpdate}: BulkLoadMappingFieldProps): JSX.Element
-{
-   const columnNames = fileDescription.getColumnNames();
-
-   const [valueType, setValueType] = useState(bulkLoadField.valueType);
-   const [selectedColumn, setSelectedColumn] = useState({label: columnNames[bulkLoadField.columnIndex], value: bulkLoadField.columnIndex});
-   const [selectedColumnInputValue, setSelectedColumnInputValue] = useState(columnNames[bulkLoadField.columnIndex]);
-
-   const [doingInitialLoadOfPossibleValue, setDoingInitialLoadOfPossibleValue] = useState(false);
-   const [everDidInitialLoadOfPossibleValue, setEverDidInitialLoadOfPossibleValue] = useState(false);
-   const [possibleValueInitialDisplayValue, setPossibleValueInitialDisplayValue] = useState(null as string);
-
-   const fieldMetaData = new QFieldMetaData(bulkLoadField.field);
-   const dynamicField = DynamicFormUtils.getDynamicField(fieldMetaData);
-   const dynamicFieldInObject: any = {};
-   dynamicFieldInObject[fieldMetaData["name"]] = dynamicField;
-   DynamicFormUtils.addPossibleValueProps(dynamicFieldInObject, [fieldMetaData], bulkLoadField.tableStructure.tableName, null, null);
-
-   /////////////////////////////////////////////////////////////////////////////////////
-   // deal with dynamically loading the initial default value for a possible value... //
-   /////////////////////////////////////////////////////////////////////////////////////
-   let actuallyDoingInitialLoadOfPossibleValue = doingInitialLoadOfPossibleValue;
-   if(dynamicField.possibleValueProps && bulkLoadField.defaultValue && !doingInitialLoadOfPossibleValue && !everDidInitialLoadOfPossibleValue)
-   {
-      actuallyDoingInitialLoadOfPossibleValue = true;
-      setDoingInitialLoadOfPossibleValue(true);
-      setEverDidInitialLoadOfPossibleValue(true);
-
-      (async () =>
-      {
-         try
-         {
-            const possibleValues = await qController.possibleValues(bulkLoadField.tableStructure.tableName, null, fieldMetaData.name, null, [bulkLoadField.defaultValue], undefined, "filter");
-            if (possibleValues && possibleValues.length > 0)
-            {
-               setPossibleValueInitialDisplayValue(possibleValues[0].label);
-            }
-            else
-            {
-               setPossibleValueInitialDisplayValue(null);
-            }
-         }
-         catch(e)
-         {
-            console.log(`Error loading possible value: ${e}`)
-         }
-
-         actuallyDoingInitialLoadOfPossibleValue = false;
-         setDoingInitialLoadOfPossibleValue(false);
-      })();
-   }
-
-   if(dynamicField.possibleValueProps && possibleValueInitialDisplayValue)
-   {
-      dynamicField.possibleValueProps.initialDisplayValue = possibleValueInitialDisplayValue;
-   }
-
-   //////////////////////////////////////////////////////
-   // build array of options for the columns drop down //
-   // don't allow duplicates                           //
-   //////////////////////////////////////////////////////
-   const columnOptions: { value: number, label: string }[] = [];
-   const usedLabels: {[label: string]: boolean} = {};
-   for (let i = 0; i < columnNames.length; i++)
-   {
-      const label = columnNames[i];
-      if(!usedLabels[label])
-      {
-         columnOptions.push({label: label, value: i});
-         usedLabels[label] = true;
-      }
-   }
-
-   //////////////////////////////////////////////////////////////////////
-   // try to pick up changes in the hasHeaderRow toggle from way above //
-   //////////////////////////////////////////////////////////////////////
-   if(bulkLoadField.columnIndex != null && bulkLoadField.columnIndex != undefined && selectedColumn.label && columnNames[bulkLoadField.columnIndex] != selectedColumn.label)
-   {
-      setSelectedColumn({label: columnNames[bulkLoadField.columnIndex], value: bulkLoadField.columnIndex})
-      setSelectedColumnInputValue(columnNames[bulkLoadField.columnIndex]);
-   }
-
-   const mainFontSize = "0.875rem";
-   const smallerFontSize = "0.75rem";
-
-   /////////////////////////////////////////////////////////////////////////////////////////////
-   // some field types get their value from formik.                                           //
-   // so for a pre-populated value, do an on-load useEffect, that'll set the value in formik. //
-   /////////////////////////////////////////////////////////////////////////////////////////////
-   const {setFieldValue} = useFormikContext();
-   useEffect(() =>
-   {
-      if (valueType == "defaultValue")
-      {
-         setFieldValue(`${bulkLoadField.field.name}.defaultValue`, bulkLoadField.defaultValue);
-      }
-   }, []);
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function columnChanged(event: any, newValue: any, reason: string)
-   {
-      setSelectedColumn(newValue);
-      setSelectedColumnInputValue(newValue == null ? "" : newValue.label);
-
-      bulkLoadField.columnIndex = newValue == null ? null : newValue.value;
-
-      if (fileDescription.hasHeaderRow)
-      {
-         bulkLoadField.headerName = newValue == null ? null : newValue.label;
-      }
-
-      bulkLoadField.error = null;
-      bulkLoadField.warning = null;
-      forceParentUpdate && forceParentUpdate();
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function defaultValueChanged(newValue: any)
-   {
-      setFieldValue(`${bulkLoadField.field.name}.defaultValue`, newValue);
-      bulkLoadField.defaultValue = newValue;
-      bulkLoadField.error = null;
-      bulkLoadField.warning = null;
-      forceParentUpdate && forceParentUpdate();
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function valueTypeChanged(isColumn: boolean)
-   {
-      const newValueType = isColumn ? "column" : "defaultValue";
-      bulkLoadField.valueType = newValueType;
-      setValueType(newValueType);
-      bulkLoadField.error = null;
-      bulkLoadField.warning = null;
-      forceParentUpdate && forceParentUpdate();
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function mapValuesChanged(value: boolean)
-   {
-      bulkLoadField.doValueMapping = value;
-      forceParentUpdate && forceParentUpdate();
-   }
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function changeSelectedColumnInputValue(e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>)
-   {
-      setSelectedColumnInputValue(e.target.value);
-   }
-
-   return (<Box py="0.5rem" sx={{borderBottom: "1px solid lightgray", width: "100%", overflow: "auto"}} id={`blfmf-${bulkLoadField.field.name}`}>
-      <Box display="grid" gridTemplateColumns="200px 400px auto" fontSize="1rem" gap="0.5rem" sx={
-         {
-            "& .MuiFormControlLabel-label": {ml: "0 !important", fontWeight: "normal !important", fontSize: mainFontSize}
-         }}>
-
-         <Box display="flex" alignItems="flex-start">
-            {
-               (!isRequired) && <Tooltip placement="bottom" title="Remove this field from your mapping.">
-                  <Button sx={xIconButtonSX} onClick={() => removeFieldCallback()}><Icon>clear</Icon></Button>
-               </Tooltip>
-            }
-            <Box pt="0.625rem">
-               {bulkLoadField.getQualifiedLabel()}
-            </Box>
-         </Box>
-
-         <RadioGroup name="valueType" value={valueType}>
-            <Box>
-               <Box display="flex" alignItems="center" sx={{height: "45px"}}>
-                  <FormControlLabel value="column" control={<Radio size="small" onChange={(event, checked) => valueTypeChanged(checked)} />} label={"File column"} sx={{minWidth: "140px", whiteSpace: "nowrap"}} />
-                  {
-                     valueType == "column" && <Box width="100%">
-                        <Autocomplete
-                           id={bulkLoadField.field.name}
-                           renderInput={(params) => (<TextField {...params} label={""} value={selectedColumnInputValue} onChange={e => changeSelectedColumnInputValue(e)} fullWidth variant="outlined" autoComplete="off" type="search" InputProps={{...params.InputProps}} sx={{"& .MuiOutlinedInput-root": {borderRadius: "0.75rem"}}} />)}
-                           fullWidth
-                           options={columnOptions}
-                           multiple={false}
-                           defaultValue={selectedColumn}
-                           value={selectedColumn}
-                           inputValue={selectedColumnInputValue}
-                           onChange={columnChanged}
-                           getOptionLabel={(option) => typeof (option) == "string" ? option : (option?.label ?? "")}
-                           isOptionEqualToValue={(option, value) => option == null && value == null || option.value == value.value}
-                           renderOption={(props, option, state) => (<li {...props}>{option?.label ?? ""}</li>)}
-                           sx={{"& .MuiOutlinedInput-root": {padding: "0"}}}
-                        />
-                     </Box>
-                  }
-               </Box>
-               <Box display="flex" alignItems="center" sx={{height: "45px"}}>
-                  <FormControlLabel value="defaultValue" control={<Radio size="small" onChange={(event, checked) => valueTypeChanged(!checked)} />} label={"Default value"} sx={{minWidth: "140px", whiteSpace: "nowrap"}} />
-                  {
-                     valueType == "defaultValue" && actuallyDoingInitialLoadOfPossibleValue && <Box width="100%">Loading...</Box>
-                  }
-                  {
-                     valueType == "defaultValue" && !actuallyDoingInitialLoadOfPossibleValue && <Box width="100%">
-                        <QDynamicFormField
-                           name={`${bulkLoadField.field.name}.defaultValue`}
-                           displayFormat={""}
-                           label={""}
-                           formFieldObject={dynamicField}
-                           type={dynamicField.type}
-                           value={bulkLoadField.defaultValue}
-                           onChangeCallback={defaultValueChanged}
-                        />
-                     </Box>
-                  }
-               </Box>
-            </Box>
-            {
-               bulkLoadField.warning &&
-               <Box fontSize={smallerFontSize} color={colors.warning.main} ml="145px" className="bulkLoadFieldError">
-                  {bulkLoadField.warning}
-               </Box>
-            }
-            {
-               bulkLoadField.error &&
-               <Box fontSize={smallerFontSize} color={colors.error.main} ml="145px" className="bulkLoadFieldError">
-                  {bulkLoadField.error}
-               </Box>
-            }
-         </RadioGroup>
-
-         <Box ml="1rem">
-            {
-               valueType == "column" && <>
-                  <Box>
-                     <FormControlLabel value="mapValues" control={<Checkbox size="small" defaultChecked={bulkLoadField.doValueMapping} onChange={(event, checked) => mapValuesChanged(checked)} />} label={"Map values"} sx={{minWidth: "140px", whiteSpace: "nowrap"}} />
-                  </Box>
-                  <Box fontSize={mainFontSize} mt="0.5rem">
-                     Preview Values: <span style={{color: "gray"}}>{(fileDescription.getPreviewValues(selectedColumn?.value) ?? [""]).join(", ")}</span>
-                  </Box>
-               </>
-            }
-         </Box>
-
-      </Box>
-   </Box>);
-}

src/qqq/components/processes/BulkLoadFileMappingFields.tsx

@@ -1,308 +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 Box from "@mui/material/Box";
-import Icon from "@mui/material/Icon";
-import colors from "qqq/assets/theme/base/colors";
-import QHierarchyAutoComplete, {Group, Option} from "qqq/components/misc/QHierarchyAutoComplete";
-import BulkLoadFileMappingField from "qqq/components/processes/BulkLoadFileMappingField";
-import {BulkLoadField, BulkLoadMapping, FileDescription} from "qqq/models/processes/BulkLoadModels";
-import React, {useEffect, useReducer, useState} from "react";
-
-interface BulkLoadMappingFieldsProps
-{
-   bulkLoadMapping: BulkLoadMapping,
-   fileDescription: FileDescription,
-   forceParentUpdate?: () => void,
-}
-
-
-const ADD_SINGLE_FIELD_TOOLTIP = "Click to add this field to your mapping.";
-const ADD_MANY_FIELD_TOOLTIP = "Click to add this field to your mapping as many times as you need.";
-const ALREADY_ADDED_FIELD_TOOLTIP = "This field has already been added to your mapping.";
-
-/***************************************************************************
- ** The section of the bulk load mapping screen with all the fields.
- ***************************************************************************/
-export default function BulkLoadFileMappingFields({bulkLoadMapping, fileDescription, forceParentUpdate}: BulkLoadMappingFieldsProps): JSX.Element
-{
-   const [, forceUpdate] = useReducer((x) => x + 1, 0);
-
-   const [forceHierarchyAutoCompleteRerender, setForceHierarchyAutoCompleteRerender] = useState(0);
-
-   ////////////////////////////////////////////
-   // build list of fields that can be added //
-   ////////////////////////////////////////////
-   const [addFieldsGroup, setAddFieldsGroup] = useState({
-      label: bulkLoadMapping.tablesByPath[""]?.label,
-      value: "mainTable",
-      options: [],
-      subGroups: []
-   } as Group);
-   // const [addFieldsToggleStates, setAddFieldsToggleStates] = useState({} as { [name: string]: boolean });
-   const [addFieldsDisableStates, setAddFieldsDisableStates] = useState({} as { [name: string]: boolean });
-   const [tooltips, setTooltips] = useState({} as { [name: string]: string });
-
-   useEffect(() =>
-   {
-      const newDisableStates: { [name: string]: boolean } = {};
-      const newTooltips: { [name: string]: string } = {};
-
-      /////////////////////////////////////////////////////////////////////////////////////////////
-      // do the unused fields array first, as we've got some use-case where i think a field from //
-      // suggested mappings (or profiles?) are in this list, even though they shouldn't be?      //
-      /////////////////////////////////////////////////////////////////////////////////////////////
-      for (let field of bulkLoadMapping.unusedFields)
-      {
-         const qualifiedName = field.getQualifiedName();
-         newTooltips[qualifiedName] = field.isMany() ? ADD_MANY_FIELD_TOOLTIP : ADD_SINGLE_FIELD_TOOLTIP;
-      }
-
-      //////////////////////////////////////////////////
-      // then do all the required & additional fields //
-      //////////////////////////////////////////////////
-      for (let field of [...(bulkLoadMapping.requiredFields ?? []), ...(bulkLoadMapping.additionalFields ?? [])])
-      {
-         const qualifiedName = field.getQualifiedName();
-
-         if (bulkLoadMapping.layout == "WIDE" && field.isMany())
-         {
-            newDisableStates[qualifiedName] = false;
-            newTooltips[qualifiedName] = ADD_MANY_FIELD_TOOLTIP;
-         }
-         else
-         {
-            newDisableStates[qualifiedName] = true;
-            newTooltips[qualifiedName] = ALREADY_ADDED_FIELD_TOOLTIP;
-         }
-      }
-
-      setAddFieldsDisableStates(newDisableStates);
-      setTooltips(newTooltips);
-      setForceHierarchyAutoCompleteRerender(forceHierarchyAutoCompleteRerender + 1);
-
-   }, [bulkLoadMapping, bulkLoadMapping.layout]);
-
-
-   ///////////////////////////////////////////////
-   // initialize this structure on first render //
-   ///////////////////////////////////////////////
-   if (addFieldsGroup.options.length == 0)
-   {
-      for (let qualifiedFieldName in bulkLoadMapping.fieldsByTablePrefix[""])
-      {
-         const bulkLoadField = bulkLoadMapping.fieldsByTablePrefix[""][qualifiedFieldName];
-         const field = bulkLoadField.field;
-         addFieldsGroup.options.push({label: field.label, value: field.name, bulkLoadField: bulkLoadField});
-      }
-
-      for (let prefix in bulkLoadMapping.fieldsByTablePrefix)
-      {
-         if (prefix == "")
-         {
-            continue;
-         }
-
-         const associationOptions: Option[] = [];
-         const tableStructure = bulkLoadMapping.tablesByPath[prefix];
-         addFieldsGroup.subGroups.push({label: tableStructure.label, value: tableStructure.associationPath, options: associationOptions});
-
-         for (let qualifiedFieldName in bulkLoadMapping.fieldsByTablePrefix[prefix])
-         {
-            const bulkLoadField = bulkLoadMapping.fieldsByTablePrefix[prefix][qualifiedFieldName];
-            const field = bulkLoadField.field;
-            associationOptions.push({label: field.label, value: field.name, bulkLoadField: bulkLoadField});
-         }
-      }
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function removeField(bulkLoadField: BulkLoadField)
-   {
-      addFieldsDisableStates[bulkLoadField.getQualifiedName()] = false;
-      setAddFieldsDisableStates(Object.assign({}, addFieldsDisableStates));
-
-      if (bulkLoadMapping.layout == "WIDE" && bulkLoadField.isMany())
-      {
-         //////////////////////////////////////////////////////////////////////////
-         // ok, you can add more - so don't disable and don't change the tooltip //
-         //////////////////////////////////////////////////////////////////////////
-      }
-      else
-      {
-         tooltips[bulkLoadField.getQualifiedName()] = ADD_SINGLE_FIELD_TOOLTIP;
-      }
-
-      bulkLoadMapping.removeField(bulkLoadField);
-      forceUpdate();
-      forceParentUpdate();
-      setForceHierarchyAutoCompleteRerender(forceHierarchyAutoCompleteRerender + 1);
-   }
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function handleToggleField(option: Option, group: Group, newValue: boolean)
-   {
-      const fieldKey = group.value == "mainTable" ? option.value : group.value + "." + option.value;
-
-      // addFieldsToggleStates[fieldKey] = newValue;
-      // setAddFieldsToggleStates(Object.assign({}, addFieldsToggleStates));
-
-      addFieldsDisableStates[fieldKey] = newValue;
-      setAddFieldsDisableStates(Object.assign({}, addFieldsDisableStates));
-
-      const bulkLoadField = bulkLoadMapping.fields[fieldKey];
-      if (bulkLoadField)
-      {
-         if (newValue)
-         {
-            bulkLoadMapping.addField(bulkLoadField);
-         }
-         else
-         {
-            bulkLoadMapping.removeField(bulkLoadField);
-         }
-
-         forceUpdate();
-         forceParentUpdate();
-      }
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function handleAddField(option: Option, group: Group)
-   {
-      const fieldKey = group.value == "mainTable" ? option.value : group.value + "." + option.value;
-
-      const bulkLoadField = bulkLoadMapping.fields[fieldKey];
-      if (bulkLoadField)
-      {
-         bulkLoadMapping.addField(bulkLoadField);
-
-         // addFieldsDisableStates[fieldKey] = true;
-         // setAddFieldsDisableStates(Object.assign({}, addFieldsDisableStates));
-
-         if (bulkLoadMapping.layout == "WIDE" && bulkLoadField.isMany())
-         {
-            //////////////////////////////////////////////////////////////////////////
-            // ok, you can add more - so don't disable and don't change the tooltip //
-            //////////////////////////////////////////////////////////////////////////
-         }
-         else
-         {
-            addFieldsDisableStates[fieldKey] = true;
-            setAddFieldsDisableStates(Object.assign({}, addFieldsDisableStates));
-
-            tooltips[fieldKey] = ALREADY_ADDED_FIELD_TOOLTIP;
-         }
-
-         forceUpdate();
-         forceParentUpdate();
-
-         document.getElementById("addFieldsButton")?.scrollIntoView();
-      }
-   }
-
-
-   let buttonBackground = "none";
-   let buttonBorder = colors.grayLines.main;
-   let buttonColor = colors.gray.main;
-
-   const addFieldMenuButtonStyles = {
-      borderRadius: "0.75rem",
-      border: `1px solid ${buttonBorder}`,
-      color: buttonColor,
-      textTransform: "none",
-      fontWeight: 500,
-      fontSize: "0.875rem",
-      p: "0.5rem",
-      backgroundColor: buttonBackground,
-      "&:focus:not(:hover)": {
-         color: buttonColor,
-         backgroundColor: buttonBackground,
-      },
-      "&:hover": {
-         color: buttonColor,
-         backgroundColor: buttonBackground,
-      }
-   };
-
-   return (
-      <>
-         <h5>Required Fields</h5>
-         <Box pl={"1rem"}>
-            {
-               bulkLoadMapping.requiredFields.length == 0 &&
-               <i style={{fontSize: "0.875rem"}}>There are no required fields in this table.</i>
-            }
-            {bulkLoadMapping.requiredFields.map((bulkLoadField) => (
-               <BulkLoadFileMappingField
-                  fileDescription={fileDescription}
-                  key={bulkLoadField.getKey()}
-                  bulkLoadField={bulkLoadField}
-                  isRequired={true}
-                  forceParentUpdate={forceParentUpdate}
-               />
-            ))}
-         </Box>
-
-         <Box mt="1rem">
-            <h5>Additional Fields</h5>
-            <Box pl={"1rem"}>
-               {bulkLoadMapping.additionalFields.map((bulkLoadField) => (
-                  <BulkLoadFileMappingField
-                     fileDescription={fileDescription}
-                     key={bulkLoadField.getKey()}
-                     bulkLoadField={bulkLoadField}
-                     isRequired={false}
-                     removeFieldCallback={() => removeField(bulkLoadField)}
-                     forceParentUpdate={forceParentUpdate}
-                  />
-               ))}
-
-               <Box display="flex" pt="1rem" pl="12.5rem">
-                  <QHierarchyAutoComplete
-                     idPrefix="addFieldAutocomplete"
-                     defaultGroup={addFieldsGroup}
-                     menuDirection="up"
-                     buttonProps={{id: "addFieldsButton", sx: addFieldMenuButtonStyles}}
-                     buttonChildren={<><Icon sx={{mr: "0.5rem"}}>add</Icon> Add Fields <Icon sx={{ml: "0.5rem"}}>keyboard_arrow_down</Icon></>}
-                     isModeSelectOne
-                     keepOpenAfterSelectOne
-                     handleSelectedOption={handleAddField}
-                     forceRerender={forceHierarchyAutoCompleteRerender}
-                     disabledStates={addFieldsDisableStates}
-                     tooltips={tooltips}
-                  />
-               </Box>
-            </Box>
-         </Box>
-      </>
-   );
-}
-

src/qqq/components/processes/BulkLoadFileMappingForm.tsx

@@ -1,566 +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 {QFrontendStepMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData";
-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";
-import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-import {Badge, Icon} from "@mui/material";
-import Autocomplete from "@mui/material/Autocomplete";
-import Box from "@mui/material/Box";
-import Grid from "@mui/material/Grid";
-import TextField from "@mui/material/TextField";
-import Tooltip from "@mui/material/Tooltip/Tooltip";
-import {useFormikContext} from "formik";
-import colors from "qqq/assets/theme/base/colors";
-import {DynamicFormFieldLabel} from "qqq/components/forms/DynamicForm";
-import QDynamicFormField from "qqq/components/forms/DynamicFormField";
-import MDTypography from "qqq/components/legacy/MDTypography";
-import HelpContent from "qqq/components/misc/HelpContent";
-import SavedBulkLoadProfiles from "qqq/components/misc/SavedBulkLoadProfiles";
-import BulkLoadFileMappingFields from "qqq/components/processes/BulkLoadFileMappingFields";
-import {BulkLoadField, BulkLoadMapping, BulkLoadProfile, BulkLoadTableStructure, FileDescription, Wrapper} from "qqq/models/processes/BulkLoadModels";
-import {SubFormPreSubmitCallbackResultType} from "qqq/pages/processes/ProcessRun";
-import React, {forwardRef, useImperativeHandle, useReducer, useState} from "react";
-import ProcessViewForm from "./ProcessViewForm";
-
-
-interface BulkLoadMappingFormProps
-{
-   processValues: any,
-   tableMetaData: QTableMetaData,
-   metaData: QInstance,
-   setActiveStepLabel: (label: string) => void,
-   frontendStep: QFrontendStepMetaData,
-   processMetaData: QProcessMetaData,
-}
-
-
-/***************************************************************************
- ** process component - screen where user does a bulk-load file mapping.
- ***************************************************************************/
-const BulkLoadFileMappingForm = forwardRef(({processValues, tableMetaData, metaData, setActiveStepLabel, frontendStep, processMetaData}: BulkLoadMappingFormProps, ref) =>
-{
-   const {setFieldValue} = useFormikContext();
-
-   const savedBulkLoadProfileRecordProcessValue = processValues.savedBulkLoadProfileRecord;
-   const [currentSavedBulkLoadProfile, setCurrentSavedBulkLoadProfile] = useState(savedBulkLoadProfileRecordProcessValue == null ? null : new QRecord(savedBulkLoadProfileRecordProcessValue));
-   const [wrappedCurrentSavedBulkLoadProfile] = useState(new Wrapper<QRecord>(currentSavedBulkLoadProfile));
-
-   const [fieldErrors, setFieldErrors] = useState({} as { [fieldName: string]: string });
-   const [noMappedFieldsError, setNoMappedFieldsError] = useState(null as string);
-
-   const [suggestedBulkLoadProfile] = useState(processValues.suggestedBulkLoadProfile as BulkLoadProfile);
-   const [tableStructure] = useState(processValues.tableStructure as BulkLoadTableStructure);
-   const [bulkLoadMapping, setBulkLoadMapping] = useState(BulkLoadMapping.fromBulkLoadProfile(tableStructure, processValues.bulkLoadProfile));
-   const [wrappedBulkLoadMapping] = useState(new Wrapper<BulkLoadMapping>(bulkLoadMapping));
-
-   const [fileDescription] = useState(new FileDescription(processValues.headerValues, processValues.headerLetters, processValues.bodyValuesPreview));
-   fileDescription.setHasHeaderRow(bulkLoadMapping.hasHeaderRow);
-
-
-   const [, forceUpdate] = useReducer((x) => x + 1, 0);
-
-   /////////////////////////////////////////////////////////////////////////////////////////////////
-   // ok - so - ... Autocomplete, at least as we're using it for the layout field - doesn't like  //
-   // to change its initial value.  So, we want to work hard to force the Header sub-component to //
-   // re-render upon external changes to the layout (e.g., new profile being selected).           //
-   // use this state-counter to make that happen (and let's please never speak of it again).      //
-   /////////////////////////////////////////////////////////////////////////////////////////////////
-   const [rerenderHeader, setRerenderHeader] = useState(1);
-
-   ////////////////////////////////////////////////////////
-   // ref-based callback for integration with ProcessRun //
-   ////////////////////////////////////////////////////////
-   useImperativeHandle(ref, () =>
-   {
-      return {
-         preSubmit(): SubFormPreSubmitCallbackResultType
-         {
-            ///////////////////////////////////////////////////////////////////////////////////////////////
-            // convert the BulkLoadMapping to a BulkLoadProfile - the thing that the backend understands //
-            ///////////////////////////////////////////////////////////////////////////////////////////////
-            const {haveErrors: haveProfileErrors, profile} = wrappedBulkLoadMapping.get().toProfile();
-
-            const values: { [name: string]: any } = {};
-
-            ////////////////////////////////////////////////////
-            // always re-submit the full profile              //
-            // note mostly a copy in BulkLoadValueMappingForm //
-            ////////////////////////////////////////////////////
-            values["version"] = profile.version;
-            values["fieldListJSON"] = JSON.stringify(profile.fieldList);
-            values["savedBulkLoadProfileId"] = wrappedCurrentSavedBulkLoadProfile.get()?.values?.get("id");
-            values["layout"] = wrappedBulkLoadMapping.get().layout;
-            values["hasHeaderRow"] = wrappedBulkLoadMapping.get().hasHeaderRow;
-
-            let haveLocalErrors = false;
-            const fieldErrors: { [fieldName: string]: string } = {};
-            if (!values["layout"])
-            {
-               haveLocalErrors = true;
-               fieldErrors["layout"] = "This field is required.";
-            }
-
-            if (values["hasHeaderRow"] == null || values["hasHeaderRow"] == undefined)
-            {
-               haveLocalErrors = true;
-               fieldErrors["hasHeaderRow"] = "This field is required.";
-            }
-            setFieldErrors(fieldErrors);
-
-            if(wrappedBulkLoadMapping.get().requiredFields.length == 0 && wrappedBulkLoadMapping.get().additionalFields.length == 0)
-            {
-               setNoMappedFieldsError("You must have at least 1 field.");
-               haveLocalErrors = true;
-               setTimeout(() => setNoMappedFieldsError(null), 2500);
-            }
-            else
-            {
-               setNoMappedFieldsError(null);
-            }
-
-            if(haveProfileErrors)
-            {
-               setTimeout(() => 
-               {
-                  document.querySelector(".bulkLoadFieldError")?.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
-               }, 250);
-            }
-
-            return {maySubmit: !haveProfileErrors && !haveLocalErrors, values};
-         }
-      };
-   });
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function bulkLoadProfileOnChangeCallback(profileRecord: QRecord | null)
-   {
-      setCurrentSavedBulkLoadProfile(profileRecord);
-      wrappedCurrentSavedBulkLoadProfile.set(profileRecord);
-
-      let newBulkLoadMapping: BulkLoadMapping;
-      if (profileRecord)
-      {
-         newBulkLoadMapping = BulkLoadMapping.fromSavedProfileRecord(processValues.tableStructure, profileRecord);
-      }
-      else
-      {
-         newBulkLoadMapping = new BulkLoadMapping(processValues.tableStructure);
-      }
-
-      handleNewBulkLoadMapping(newBulkLoadMapping);
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function bulkLoadProfileResetToSuggestedMappingCallback()
-   {
-      handleNewBulkLoadMapping(BulkLoadMapping.fromBulkLoadProfile(processValues.tableStructure, suggestedBulkLoadProfile));
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function handleNewBulkLoadMapping(newBulkLoadMapping: BulkLoadMapping)
-   {
-      const newRequiredFields: BulkLoadField[] = [];
-      for (let field of newBulkLoadMapping.requiredFields)
-      {
-         newRequiredFields.push(BulkLoadField.clone(field));
-      }
-      newBulkLoadMapping.requiredFields = newRequiredFields;
-
-      setBulkLoadMapping(newBulkLoadMapping);
-      wrappedBulkLoadMapping.set(newBulkLoadMapping);
-
-      setFieldValue("hasHeaderRow", newBulkLoadMapping.hasHeaderRow);
-      setFieldValue("layout", newBulkLoadMapping.layout);
-
-      setRerenderHeader(rerenderHeader + 1);
-   }
-
-   if (currentSavedBulkLoadProfile)
-   {
-      setActiveStepLabel(`File Mapping / ${currentSavedBulkLoadProfile.values.get("label")}`);
-   }
-   else
-   {
-      setActiveStepLabel("File Mapping");
-   }
-
-   return (<Box>
-
-      <Box py="1rem" display="flex">
-         <SavedBulkLoadProfiles
-            metaData={metaData}
-            tableMetaData={tableMetaData}
-            tableStructure={tableStructure}
-            currentSavedBulkLoadProfileRecord={currentSavedBulkLoadProfile}
-            currentMapping={bulkLoadMapping}
-            bulkLoadProfileOnChangeCallback={bulkLoadProfileOnChangeCallback}
-            bulkLoadProfileResetToSuggestedMappingCallback={bulkLoadProfileResetToSuggestedMappingCallback}
-            fileDescription={fileDescription}
-         />
-      </Box>
-
-      <BulkLoadMappingHeader
-         key={rerenderHeader}
-         bulkLoadMapping={bulkLoadMapping}
-         fileDescription={fileDescription}
-         tableStructure={tableStructure}
-         fileName={processValues.fileBaseName}
-         fieldErrors={fieldErrors}
-         frontendStep={frontendStep}
-         processMetaData={processMetaData}
-         forceParentUpdate={() => forceUpdate()}
-      />
-
-      <Box mt="2rem">
-         <BulkLoadFileMappingFields
-            bulkLoadMapping={bulkLoadMapping}
-            fileDescription={fileDescription}
-            forceParentUpdate={() =>
-            {
-               setRerenderHeader(rerenderHeader + 1);
-               forceUpdate();
-            }}
-         />
-         {
-            noMappedFieldsError && <Box color={colors.error.main} textAlign="right">{noMappedFieldsError}</Box>
-         }
-      </Box>
-
-   </Box>);
-
-});
-
-export default BulkLoadFileMappingForm;
-
-
-interface BulkLoadMappingHeaderProps
-{
-   fileDescription: FileDescription,
-   fileName: string,
-   bulkLoadMapping?: BulkLoadMapping,
-   fieldErrors: { [fieldName: string]: string },
-   tableStructure: BulkLoadTableStructure,
-   forceParentUpdate?: () => void,
-   frontendStep: QFrontendStepMetaData,
-   processMetaData: QProcessMetaData,
-}
-
-/***************************************************************************
- ** private subcomponent - the header section of the bulk load file mapping screen.
- ***************************************************************************/
-function BulkLoadMappingHeader({fileDescription, fileName, bulkLoadMapping, fieldErrors, tableStructure, forceParentUpdate, frontendStep, processMetaData}: BulkLoadMappingHeaderProps): JSX.Element
-{
-   const viewFields = [
-      new QFieldMetaData({name: "fileName", label: "File Name", type: "STRING"}),
-      new QFieldMetaData({name: "fileDetails", label: "File Details", type: "STRING"}),
-   ];
-
-   const viewValues = {
-      "fileName": fileName,
-      "fileDetails": `${fileDescription.getColumnNames().length} column${fileDescription.getColumnNames().length == 1 ? "" : "s"}`
-   };
-
-   const hasHeaderRowFormField = {name: "hasHeaderRow", label: "Does the file have a header row?", type: "checkbox", isRequired: true, isEditable: true};
-
-   const layoutOptions = [
-      {label: "Flat", id: "FLAT"},
-      {label: "Tall", id: "TALL"},
-      {label: "Wide", id: "WIDE"},
-   ];
-
-   if (!tableStructure.associations)
-   {
-      layoutOptions.splice(1);
-   }
-
-   const selectedLayout = layoutOptions.filter(o => o.id == bulkLoadMapping.layout)[0] ?? null;
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function hasHeaderRowChanged(newValue: any)
-   {
-      bulkLoadMapping.hasHeaderRow = newValue;
-      fileDescription.hasHeaderRow = newValue;
-
-      bulkLoadMapping.handleChangeToHasHeaderRow(newValue, fileDescription);
-
-      fieldErrors.hasHeaderRow = null;
-      forceParentUpdate();
-   }
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function layoutChanged(event: any, newValue: any)
-   {
-      bulkLoadMapping.switchLayout(newValue ? newValue.id : null);
-      fieldErrors.layout = null;
-      forceParentUpdate();
-   }
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function getFormattedHelpContent(fieldName: string): JSX.Element
-   {
-      const field = frontendStep?.formFields?.find(f => f.name == fieldName);
-      let helpRoles = ["PROCESS_SCREEN", "ALL_SCREENS"];
-
-      let formattedHelpContent = <HelpContent helpContents={field?.helpContents} roles={helpRoles} helpContentKey={`process:${processMetaData?.name};field:${fieldName}`} />;
-      if (formattedHelpContent)
-      {
-         const mt = field && field.type == QFieldType.BOOLEAN ? "-0.5rem" : "0.5rem";
-
-         return <Box color="#757575" fontSize="0.875rem" mt={mt}>{formattedHelpContent}</Box>;
-      }
-
-      return null;
-   }
-
-   return (
-      <Box>
-         <h5>File Details</h5>
-         <Box ml="1rem">
-            <ProcessViewForm fields={viewFields} values={viewValues} columns={2} />
-            <BulkLoadMappingFilePreview fileDescription={fileDescription} bulkLoadMapping={bulkLoadMapping} />
-            <Grid container pt="1rem">
-               <Grid item xs={12} md={6}>
-                  <DynamicFormFieldLabel name={hasHeaderRowFormField.name} label={`${hasHeaderRowFormField.label} *`} />
-                  <QDynamicFormField name={hasHeaderRowFormField.name} displayFormat={""} label={""} formFieldObject={hasHeaderRowFormField} type={"checkbox"} value={bulkLoadMapping.hasHeaderRow} onChangeCallback={hasHeaderRowChanged} />
-                  {
-                     fieldErrors.hasHeaderRow &&
-                     <MDTypography component="div" variant="caption" color="error" fontWeight="regular" mt="0.25rem">
-                        {<div className="fieldErrorMessage">{fieldErrors.hasHeaderRow}</div>}
-                     </MDTypography>
-                  }
-                  {getFormattedHelpContent("hasHeaderRow")}
-               </Grid>
-               <Grid item xs={12} md={6}>
-                  <DynamicFormFieldLabel name={"layout"} label={"File Layout *"} />
-                  <Autocomplete
-                     id={"layout"}
-                     renderInput={(params) => (<TextField {...params} label={""} fullWidth variant="outlined" autoComplete="off" type="search" InputProps={{...params.InputProps}} sx={{"& .MuiOutlinedInput-root": {borderRadius: "0.75rem"}}} />)}
-                     options={layoutOptions}
-                     multiple={false}
-                     defaultValue={selectedLayout}
-                     onChange={layoutChanged}
-                     getOptionLabel={(option) => typeof (option) == "string" ? option : (option?.label ?? "")}
-                     isOptionEqualToValue={(option, value) => option == null && value == null || option.id == value.id}
-                     renderOption={(props, option, state) => (<li {...props}>{option?.label ?? ""}</li>)}
-                     disableClearable
-                     sx={{"& .MuiOutlinedInput-root": {padding: "0"}}}
-                  />
-                  {
-                     fieldErrors.layout &&
-                     <MDTypography component="div" variant="caption" color="error" fontWeight="regular" mt="0.25rem">
-                        {<div className="fieldErrorMessage">{fieldErrors.layout}</div>}
-                     </MDTypography>
-                  }
-                  {getFormattedHelpContent("layout")}
-               </Grid>
-            </Grid>
-         </Box>
-      </Box>
-   );
-}
-
-
-interface BulkLoadMappingFilePreviewProps
-{
-   fileDescription: FileDescription,
-   bulkLoadMapping?: BulkLoadMapping
-}
-
-/***************************************************************************
- ** private subcomponent - the file-preview section of the bulk load file mapping screen.
- ***************************************************************************/
-function BulkLoadMappingFilePreview({fileDescription, bulkLoadMapping}: BulkLoadMappingFilePreviewProps): JSX.Element
-{
-   const rows: number[] = [];
-   for (let i = 0; i < fileDescription.bodyValuesPreview[0].length; i++)
-   {
-      rows.push(i);
-   }
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function getValue(i: number, j: number)
-   {
-      const value = fileDescription.bodyValuesPreview[j][i];
-      if (value == null)
-      {
-         return "";
-      }
-
-      //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-      // this was useful at one point in time when we had an object coming back for xlsx files with many different data types //
-      // we'd see a .string attribute, which would have the value we'd want to show.  not using it now, but keep in case      //
-      //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-      // @ts-ignore
-      if (value && value.string)
-      {
-         // @ts-ignore
-         return (value.string);
-      }
-      return `${value}`;
-   }
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function getHeaderColor(count: number): string
-   {
-      if (count > 0)
-      {
-         return "blue";
-      }
-
-      return "black";
-   }
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function getCursor(count: number): string
-   {
-      if (count > 0)
-      {
-         return "pointer";
-      }
-
-      return "default";
-   }
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function getColumnTooltip(fields: BulkLoadField[])
-   {
-      return (<Box>
-         This column is mapped to the field{fields.length == 1 ? "" : "s"}:
-         <ul style={{marginLeft: "1rem"}}>
-            {fields.map((field, i) => <li key={i}>{field.getQualifiedLabel()}</li>)}
-         </ul>
-      </Box>);
-   }
-
-   return (
-      <Box sx={{"& table, & td": {border: "1px solid black", borderCollapse: "collapse", padding: "0 0.25rem", fontSize: "0.875rem", whiteSpace: "nowrap"}}}>
-         <Box sx={{width: "100%", overflow: "auto"}}>
-            <table cellSpacing="0" width="100%">
-               <thead>
-                  <tr style={{backgroundColor: "#d3d3d3", height: "1.75rem"}}>
-                     <td></td>
-                     {fileDescription.headerLetters.map((letter, index) =>
-                     {
-                        const fields = bulkLoadMapping.getFieldsForColumnIndex(index);
-                        const count = fields.length;
-
-                        let dupeWarning = <></>
-                        if(fileDescription.hasHeaderRow && fileDescription.duplicateHeaderIndexes[index])
-                        {
-                           dupeWarning = <Tooltip title="This column header is a duplicate.  Only the first occurrance of it will be used." placement="top" enterDelay={500}>
-                              <Icon color="warning" sx={{p: "0.125rem", mr: "0.25rem"}}>warning</Icon>
-                           </Tooltip>
-                        }
-
-                        return (<td key={letter} style={{textAlign: "center", color: getHeaderColor(count), cursor: getCursor(count)}}>
-                           <>
-                              {
-                                 count > 0 &&
-                                 <Tooltip title={getColumnTooltip(fields)} placement="top" enterDelay={500}>
-                                    <Box>
-                                       {dupeWarning}
-                                       {letter}
-                                       <Badge badgeContent={count} variant={"standard"} color="secondary" sx={{marginTop: ".75rem"}}><Icon></Icon></Badge>
-                                    </Box>
-                                 </Tooltip>
-                              }
-                              {
-                                 count == 0 && <Box>{dupeWarning}{letter}</Box>
-                              }
-                           </>
-                        </td>);
-                     })}
-                  </tr>
-               </thead>
-               <tbody>
-                  <tr>
-                     <td style={{backgroundColor: "#d3d3d3", textAlign: "center"}}>1</td>
-
-                     {fileDescription.headerValues.map((value, index) =>
-                     {
-                        const fields = bulkLoadMapping.getFieldsForColumnIndex(index);
-                        const count = fields.length;
-                        const tdStyle = {color: getHeaderColor(count), cursor: getCursor(count), backgroundColor: ""};
-
-                        if(fileDescription.hasHeaderRow)
-                        {
-                           tdStyle.backgroundColor = "#ebebeb";
-
-                           if(count > 0)
-                           {
-                              return <td key={value} style={tdStyle}>
-                                 <Tooltip title={getColumnTooltip(fields)} placement="top" enterDelay={500}><Box>{value}</Box></Tooltip>
-                              </td>
-                           }
-                           else
-                           {
-                              return <td key={value} style={tdStyle}>{value}</td>
-                           }
-                        }
-                        else
-                        {
-                           return <td key={value} style={tdStyle}>{value}</td>
-                        }
-                     }
-                     )}
-                  </tr>
-                  {rows.map((i) => (
-                     <tr key={i}>
-                        <td style={{backgroundColor: "#d3d3d3", textAlign: "center"}}>{i + 2}</td>
-                        {fileDescription.headerLetters.map((letter, j) => <td key={j}>{getValue(i, j)}</td>)}
-                     </tr>
-                  ))}
-               </tbody>
-            </table>
-         </Box>
-      </Box>
-   );
-}
-
-

src/qqq/components/processes/BulkLoadProfileForm.tsx

@@ -1,102 +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 {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-import Box from "@mui/material/Box";
-import SavedBulkLoadProfiles from "qqq/components/misc/SavedBulkLoadProfiles";
-import {BulkLoadMapping, BulkLoadProfile, BulkLoadTableStructure, FileDescription, Wrapper} from "qqq/models/processes/BulkLoadModels";
-import {SubFormPreSubmitCallbackResultType} from "qqq/pages/processes/ProcessRun";
-import React, {forwardRef, useImperativeHandle, useState} from "react";
-
-interface BulkLoadValueMappingFormProps
-{
-   processValues: any,
-   tableMetaData: QTableMetaData,
-   metaData: QInstance
-}
-
-
-/***************************************************************************
- ** For review & result screens of bulk load - this process component shows
- ** the SavedBulkLoadProfiles button.
- ***************************************************************************/
-const BulkLoadProfileForm = forwardRef(({processValues, tableMetaData, metaData}: BulkLoadValueMappingFormProps, ref) =>
-{
-   const savedBulkLoadProfileRecordProcessValue = processValues.savedBulkLoadProfileRecord;
-   const [savedBulkLoadProfileRecord, setSavedBulkLoadProfileRecord] = useState(savedBulkLoadProfileRecordProcessValue == null ? null : new QRecord(savedBulkLoadProfileRecordProcessValue))
-
-   const [tableStructure] = useState(processValues.tableStructure as BulkLoadTableStructure);
-
-   const [bulkLoadProfile, setBulkLoadProfile] = useState(processValues.bulkLoadProfile as BulkLoadProfile);
-   const [currentMapping, setCurrentMapping] = useState(BulkLoadMapping.fromBulkLoadProfile(tableStructure, bulkLoadProfile))
-   const [wrappedCurrentSavedBulkLoadProfile] = useState(new Wrapper<QRecord>(savedBulkLoadProfileRecord));
-
-   const [fileDescription] = useState(new FileDescription(processValues.headerValues, processValues.headerLetters, processValues.bodyValuesPreview));
-   fileDescription.setHasHeaderRow(currentMapping.hasHeaderRow);
-
-   useImperativeHandle(ref, () =>
-   {
-      return {
-         preSubmit(): SubFormPreSubmitCallbackResultType
-         {
-            const values: { [name: string]: any } = {};
-            values["savedBulkLoadProfileId"] = wrappedCurrentSavedBulkLoadProfile.get()?.values?.get("id");
-
-            return ({maySubmit: true, values});
-         }
-      };
-   });
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function bulkLoadProfileOnChangeCallback(profileRecord: QRecord | null)
-   {
-      setSavedBulkLoadProfileRecord(profileRecord);
-      wrappedCurrentSavedBulkLoadProfile.set(profileRecord);
-
-      const newBulkLoadMapping = BulkLoadMapping.fromSavedProfileRecord(tableStructure, profileRecord);
-      setCurrentMapping(newBulkLoadMapping);
-   }
-
-
-   return (<Box>
-
-      <Box py="1rem" display="flex">
-         <SavedBulkLoadProfiles
-            metaData={metaData}
-            tableMetaData={tableMetaData}
-            tableStructure={tableStructure}
-            currentSavedBulkLoadProfileRecord={savedBulkLoadProfileRecord}
-            currentMapping={currentMapping}
-            allowSelectingProfile={false}
-            fileDescription={fileDescription}
-            bulkLoadProfileOnChangeCallback={bulkLoadProfileOnChangeCallback}
-         />
-      </Box>
-
-   </Box>);
-});
-
-export default BulkLoadProfileForm;

src/qqq/components/processes/BulkLoadValueMappingForm.tsx

@@ -1,233 +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 {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
-import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-import Box from "@mui/material/Box";
-import Icon from "@mui/material/Icon";
-import colors from "qqq/assets/theme/base/colors";
-import QDynamicFormField from "qqq/components/forms/DynamicFormField";
-import SavedBulkLoadProfiles from "qqq/components/misc/SavedBulkLoadProfiles";
-import {BulkLoadMapping, BulkLoadProfile, BulkLoadTableStructure, FileDescription, Wrapper} from "qqq/models/processes/BulkLoadModels";
-import {SubFormPreSubmitCallbackResultType} from "qqq/pages/processes/ProcessRun";
-import React, {forwardRef, useEffect, useImperativeHandle, useReducer, useState} from "react";
-
-interface BulkLoadValueMappingFormProps
-{
-   processValues: any,
-   setActiveStepLabel: (label: string) => void,
-   tableMetaData: QTableMetaData,
-   metaData: QInstance,
-   formFields: any[]
-}
-
-
-/***************************************************************************
- ** process component used in bulk-load - on a screen that gets looped for
- ** each field whose values are being mapped.
- ***************************************************************************/
-const BulkLoadValueMappingForm = forwardRef(({processValues, setActiveStepLabel, tableMetaData, metaData, formFields}: BulkLoadValueMappingFormProps, ref) =>
-{
-   const [field, setField] = useState(processValues.valueMappingField ? new QFieldMetaData(processValues.valueMappingField) : null);
-   const [fieldFullName, setFieldFullName] = useState(processValues.valueMappingFullFieldName);
-   const [fileValues, setFileValues] = useState((processValues.fileValues ?? []) as string[]);
-   const [valueErrors, setValueErrors] = useState({} as { [fileValue: string]: any });
-
-   const [bulkLoadProfile, setBulkLoadProfile] = useState(processValues.bulkLoadProfile as BulkLoadProfile);
-
-   const savedBulkLoadProfileRecordProcessValue = processValues.savedBulkLoadProfileRecord;
-   const [savedBulkLoadProfileRecord, setSavedBulkLoadProfileRecord] = useState(savedBulkLoadProfileRecordProcessValue == null ? null : new QRecord(savedBulkLoadProfileRecordProcessValue));
-   const [wrappedCurrentSavedBulkLoadProfile] = useState(new Wrapper<QRecord>(savedBulkLoadProfileRecord));
-
-   const [tableStructure] = useState(processValues.tableStructure as BulkLoadTableStructure);
-
-   const [currentMapping, setCurrentMapping] = useState(initializeCurrentBulkLoadMapping());
-   const [wrappedBulkLoadMapping] = useState(new Wrapper<BulkLoadMapping>(currentMapping));
-
-   const [fileDescription] = useState(new FileDescription(processValues.headerValues, processValues.headerLetters, processValues.bodyValuesPreview));
-   fileDescription.setHasHeaderRow(currentMapping.hasHeaderRow);
-
-   const [, forceUpdate] = useReducer((x) => x + 1, 0);
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function initializeCurrentBulkLoadMapping(): BulkLoadMapping
-   {
-      const bulkLoadMapping = BulkLoadMapping.fromBulkLoadProfile(tableStructure, bulkLoadProfile);
-
-      if (!bulkLoadMapping.valueMappings[fieldFullName])
-      {
-         bulkLoadMapping.valueMappings[fieldFullName] = {};
-      }
-
-      return (bulkLoadMapping);
-   }
-
-   useEffect(() =>
-   {
-      if (processValues.valueMappingField)
-      {
-         setField(new QFieldMetaData(processValues.valueMappingField));
-      }
-      else
-      {
-         setField(null);
-      }
-   }, [processValues.valueMappingField]);
-
-
-   ////////////////////////////////////////////////////////
-   // ref-based callback for integration with ProcessRun //
-   ////////////////////////////////////////////////////////
-   useImperativeHandle(ref, () =>
-   {
-      return {
-         preSubmit(): SubFormPreSubmitCallbackResultType
-         {
-            const values: { [name: string]: any } = {};
-
-            let anyErrors = false;
-            const mappedValues = currentMapping.valueMappings[fieldFullName];
-            if (field.isRequired)
-            {
-               for (let fileValue of fileValues)
-               {
-                  valueErrors[fileValue] = null;
-                  if (mappedValues[fileValue] == null || mappedValues[fileValue] == undefined || mappedValues[fileValue] == "")
-                  {
-                     valueErrors[fileValue] = "A value is required for this mapping";
-                     anyErrors = true;
-                  }
-               }
-            }
-
-            ///////////////////////////////////////////////////
-            // always re-submit the full profile             //
-            // note mostly a copy in BulkLoadFileMappingForm //
-            ///////////////////////////////////////////////////
-            const {haveErrors, profile} = wrappedBulkLoadMapping.get().toProfile();
-            values["version"] = profile.version;
-            values["fieldListJSON"] = JSON.stringify(profile.fieldList);
-            values["savedBulkLoadProfileId"] = wrappedCurrentSavedBulkLoadProfile.get()?.values?.get("id");
-            values["layout"] = wrappedBulkLoadMapping.get().layout;
-            values["hasHeaderRow"] = wrappedBulkLoadMapping.get().hasHeaderRow;
-
-            values["mappedValuesJSON"] = JSON.stringify(mappedValues);
-
-            return ({maySubmit: !anyErrors, values});
-         }
-      };
-   });
-
-   if (!field)
-   {
-      //////////////////////////////////////////////////////////////////////////////////////
-      // this happens like between steps - render empty rather than a flash of half-stuff //
-      //////////////////////////////////////////////////////////////////////////////////////
-      return (<Box></Box>);
-   }
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function mappedValueChanged(fileValue: string, newValue: any)
-   {
-      valueErrors[fileValue] = null;
-      if(newValue == null)
-      {
-         delete currentMapping.valueMappings[fieldFullName][fileValue];
-      }
-      else
-      {
-         currentMapping.valueMappings[fieldFullName][fileValue] = newValue;
-      }
-      forceUpdate();
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function bulkLoadProfileOnChangeCallback(profileRecord: QRecord | null)
-   {
-      setSavedBulkLoadProfileRecord(profileRecord);
-      wrappedCurrentSavedBulkLoadProfile.set(profileRecord);
-
-      const newBulkLoadMapping = BulkLoadMapping.fromSavedProfileRecord(tableStructure, profileRecord);
-      setCurrentMapping(newBulkLoadMapping);
-      wrappedBulkLoadMapping.set(newBulkLoadMapping);
-   }
-
-
-   setActiveStepLabel(`Value Mapping: ${field.label} (${processValues.valueMappingFieldIndex + 1} of ${processValues.fieldNamesToDoValueMapping?.length})`);
-
-   return (<Box>
-
-      <Box py="1rem" display="flex">
-         <SavedBulkLoadProfiles
-            metaData={metaData}
-            tableMetaData={tableMetaData}
-            tableStructure={tableStructure}
-            currentSavedBulkLoadProfileRecord={savedBulkLoadProfileRecord}
-            currentMapping={currentMapping}
-            allowSelectingProfile={false}
-            bulkLoadProfileOnChangeCallback={bulkLoadProfileOnChangeCallback}
-            fileDescription={fileDescription}
-         />
-      </Box>
-
-      {
-         fileValues.map((fileValue, i) => (
-            <Box key={i} py="0.5rem" sx={{borderBottom: "0px solid lightgray", width: "100%", overflow: "auto"}}>
-               <Box display="grid" gridTemplateColumns="40% auto 60%" fontSize="1rem" gap="0.5rem">
-                  <Box mt="0.5rem" textAlign="right">{fileValue}</Box>
-                  <Box mt="0.625rem"><Icon>arrow_forward</Icon></Box>
-                  <Box maxWidth="300px">
-                     <QDynamicFormField
-                        name={`${fieldFullName}.value.${i}`}
-                        displayFormat={""}
-                        label={""}
-                        formFieldObject={formFields[i]}
-                        type={formFields[i].type}
-                        value={currentMapping.valueMappings[fieldFullName][fileValue]}
-                        onChangeCallback={(newValue) => mappedValueChanged(fileValue, newValue)}
-                     />
-                     {
-                        valueErrors[fileValue] &&
-                        <Box fontSize={"0.875rem"} mt={"-0.75rem"} color={colors.error.main}>
-                           {valueErrors[fileValue]}
-                        </Box>
-                     }
-                  </Box>
-               </Box>
-            </Box>
-         ))
-      }
-   </Box>);
-
-});
-
-
-export default BulkLoadValueMappingForm;

src/qqq/components/processes/ProcessSummaryResults.tsx

@@ -84,7 +84,7 @@ function ProcessSummaryResults({
    );
 
    return (
-      <Box m={{xs: 0, md: 3}} mt={"3rem!important"}>
+      <Box m={3} mt={6}>
          <Grid container>
             <Grid item xs={0} lg={2} />
             <Grid item xs={12} lg={8}>

src/qqq/components/processes/ProcessViewForm.tsx

@@ -1,71 +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 {AdornmentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/AdornmentType";
-import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
-import Grid from "@mui/material/Grid";
-import MDTypography from "qqq/components/legacy/MDTypography";
-import ValueUtils from "qqq/utils/qqq/ValueUtils";
-
-interface ProcessViewFormProps
-{
-   fields: QFieldMetaData[];
-   values: { [fieldName: string]: any };
-   columns?: number;
-}
-
-ProcessViewForm.defaultProps = {
-   columns: 2
-};
-
-/***************************************************************************
- ** a "view form" within a process step
- **
- ***************************************************************************/
-export default function ProcessViewForm({fields, values, columns}: ProcessViewFormProps): JSX.Element
-{
-   const sm = Math.floor(12 / columns);
-
-   return <Grid container>
-      {fields.map((field: QFieldMetaData) => (
-         field.hasAdornment(AdornmentType.ERROR) ? (
-            values[field.name] && (
-               <Grid item xs={12} sm={sm} key={field.name} display="flex" py={1} pr={2}>
-                  <MDTypography variant="button" fontWeight="regular">
-                     {ValueUtils.getValueForDisplay(field, values[field.name], undefined, "view")}
-                  </MDTypography>
-               </Grid>
-            )
-         ) : (
-            <Grid item xs={12} sm={sm} key={field.name} display="flex" py={1} pr={2}>
-               <MDTypography variant="button" fontWeight="bold">
-                  {field.label}
-                  : &nbsp;
-               </MDTypography>
-               <MDTypography variant="button" fontWeight="regular" color="text">
-                  {ValueUtils.getValueForDisplay(field, values[field.name], undefined, "view")}
-               </MDTypography>
-            </Grid>
-         )))
-      }
-   </Grid>;
-}

src/qqq/components/processes/ValidationReview.tsx

@@ -24,45 +24,29 @@ import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstan
 import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-import {Button, FormControlLabel, ListItem, Radio, RadioGroup, Typography} from "@mui/material";
-import Box from "@mui/material/Box";
+import {Box, Button, FormControlLabel, ListItem, Radio, RadioGroup, Typography} from "@mui/material";
 import Grid from "@mui/material/Grid";
 import Icon from "@mui/material/Icon";
 import IconButton from "@mui/material/IconButton";
 import List from "@mui/material/List";
 import ListItemText from "@mui/material/ListItemText";
+import React, {useState} from "react";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import CustomWidthTooltip from "qqq/components/tooltips/CustomWidthTooltip";
-import RecordGridWidget, {ChildRecordListData} from "qqq/components/widgets/misc/RecordGridWidget";
 import {ProcessSummaryLine} from "qqq/models/processes/ProcessSummaryLine";
-import {renderSectionOfFields} from "qqq/pages/records/view/RecordView";
 import Client from "qqq/utils/qqq/Client";
-import TableUtils from "qqq/utils/qqq/TableUtils";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
-import React, {useEffect, useState} from "react";
 
 interface Props
 {
-   qInstance: QInstance,
-   process: QProcessMetaData,
-   table: QTableMetaData,
-   processValues: any,
-   step: QFrontendStepMetaData,
-   previewRecords: QRecord[],
-   formValues: any,
-   doFullValidationRadioChangedHandler: any,
-   loadingRecords?: boolean
-}
-
-////////////////////////////////////////////////////////////////////////////
-// e.g., for bulk-load, where we want to show associations under a record //
-// the processValue will have these data, to drive this screen.           //
-////////////////////////////////////////////////////////////////////////////
-interface AssociationPreview
-{
-   tableName: string;
-   widgetName: string;
-   associationName: string;
+   qInstance: QInstance;
+   process: QProcessMetaData;
+   table: QTableMetaData;
+   processValues: any;
+   step: QFrontendStepMetaData;
+   previewRecords: QRecord[];
+   formValues: any;
+   doFullValidationRadioChangedHandler: any
 }
 
 /*******************************************************************************
@@ -71,76 +55,21 @@ interface AssociationPreview
  ** results when they are available.
  *******************************************************************************/
 function ValidationReview({
-   qInstance, process, table = null, processValues, step, previewRecords = [], formValues, doFullValidationRadioChangedHandler, loadingRecords
+   qInstance, process, table = null, processValues, step, previewRecords = [], formValues, doFullValidationRadioChangedHandler,
 }: Props): JSX.Element
 {
    const [previewRecordIndex, setPreviewRecordIndex] = useState(0);
    const [sourceTableMetaData, setSourceTableMetaData] = useState(null as QTableMetaData);
-   const [previewTableMetaData, setPreviewTableMetaData] = useState(null as QTableMetaData);
-   const [childTableMetaData, setChildTableMetaData] = useState({} as { [name: string]: QTableMetaData });
 
-   const [associationPreviewsByWidgetName, setAssociationPreviewsByWidgetName] = useState({} as { [widgetName: string]: AssociationPreview });
-
-   if (processValues.sourceTable && !sourceTableMetaData)
+   if(processValues.sourceTable && !sourceTableMetaData)
    {
       (async () =>
       {
-         const sourceTableMetaData = await Client.getInstance().loadTableMetaData(processValues.sourceTable);
+         const sourceTableMetaData = await Client.getInstance().loadTableMetaData(processValues.sourceTable)
          setSourceTableMetaData(sourceTableMetaData);
       })();
    }
 
-   ////////////////////////////////////////////////////////////////////////////////////////
-   // load meta-data and set up associations-data structure, if so directed from backend //
-   ////////////////////////////////////////////////////////////////////////////////////////
-   useEffect(() =>
-   {
-      if (processValues.formatPreviewRecordUsingTableLayout && !previewTableMetaData)
-      {
-         (async () =>
-         {
-            const previewTableMetaData = await Client.getInstance().loadTableMetaData(processValues.formatPreviewRecordUsingTableLayout);
-            setPreviewTableMetaData(previewTableMetaData);
-         })();
-      }
-
-      try
-      {
-         const previewRecordAssociatedTableNames: string[] = processValues.previewRecordAssociatedTableNames ?? [];
-         const previewRecordAssociatedWidgetNames: string[] = processValues.previewRecordAssociatedWidgetNames ?? [];
-         const previewRecordAssociationNames: string[] = processValues.previewRecordAssociationNames ?? [];
-
-         const associationPreviewsByWidgetName: { [widgetName: string]: AssociationPreview } = {};
-         for (let i = 0; i < Math.min(previewRecordAssociatedTableNames.length, previewRecordAssociatedWidgetNames.length, previewRecordAssociationNames.length); i++)
-         {
-            const associationPreview = {tableName: previewRecordAssociatedTableNames[i], widgetName: previewRecordAssociatedWidgetNames[i], associationName: previewRecordAssociationNames[i]};
-            associationPreviewsByWidgetName[associationPreview.widgetName] = associationPreview;
-         }
-         setAssociationPreviewsByWidgetName(associationPreviewsByWidgetName);
-
-         if (Object.keys(associationPreviewsByWidgetName))
-         {
-            (async () =>
-            {
-               for (let key in associationPreviewsByWidgetName)
-               {
-                  const associationPreview = associationPreviewsByWidgetName[key];
-                  childTableMetaData[associationPreview.tableName] = await Client.getInstance().loadTableMetaData(associationPreview.tableName);
-                  setChildTableMetaData(Object.assign({}, childTableMetaData));
-               }
-            })();
-         }
-      }
-      catch (e)
-      {
-         console.log(`Error setting up association previews: ${e}`);
-      }
-   }, []);
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
    const updatePreviewRecordIndex = (offset: number) =>
    {
       let newIndex = previewRecordIndex + offset;
@@ -156,10 +85,6 @@ function ValidationReview({
       setPreviewRecordIndex(newIndex);
    };
 
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
    const buildDoFullValidationRadioListItem = (value: "true" | "false", labelText: string, tooltipHTML: JSX.Element): JSX.Element =>
    {
       ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -266,7 +191,6 @@ function ValidationReview({
       </List>
    );
 
-
    const recordPreviewWidget = step.recordListFields && (
       <Box border="1px solid rgb(70%, 70%, 70%)" borderRadius="10px" p={2} mt={2}>
          <Box mx={2} mt={-5} p={1} sx={{width: "fit-content", borderColor: "rgb(70%, 70%, 70%)", borderWidth: "2px", borderStyle: "solid", borderRadius: ".25em", backgroundColor: "#FFFFFF"}} width="initial" color="white">
@@ -276,47 +200,43 @@ function ValidationReview({
             <MDTypography color="body" variant="body2" component="div" mb={2}>
                <Box display="flex">
                   {
-                     loadingRecords ? <i>Loading...</i> : <>
-                        {
-                           processValues?.previewMessage && previewRecords && previewRecords.length > 0 ? (
-                              <>
-                                 <i>{processValues?.previewMessage}</i>
-                                 <CustomWidthTooltip
-                                    title={(
-                                       <div>
-                                          Note that the number of preview records available may be fewer than the total number of records being processed.
-                                       </div>
-                                    )}
-                                 >
-                                    <IconButton sx={{py: 0}}><Icon fontSize="small">info_outlined</Icon></IconButton>
-                                 </CustomWidthTooltip>
-                              </>
-                           ) : (
-                              <>
-                                 <i>No record previews are available at this time.</i>
-                                 <CustomWidthTooltip
-                                    title={(
-                                       <div>
-                                          {
-                                             processValues.validationSummary ? (
-                                                <>
-                                                   It appears as though this process does not contain any valid records.
-                                                </>
-                                             ) : (
-                                                <>
-                                                   If you choose to Perform Validation, and there are any valid records, then you will see a preview here.
-                                                </>
-                                             )
-                                          }
-                                       </div>
-                                    )}
-                                 >
-                                    <IconButton sx={{py: 0}}><Icon fontSize="small">info_outlined</Icon></IconButton>
-                                 </CustomWidthTooltip>
-                              </>
-                           )
-                        }
-                     </>
+                     processValues?.previewMessage && previewRecords && previewRecords.length > 0 ? (
+                        <>
+                           <i>{processValues?.previewMessage}</i>
+                           <CustomWidthTooltip
+                              title={(
+                                 <div>
+                                    Note that the number of preview records available may be fewer than the total number of records being processed.
+                                 </div>
+                              )}
+                           >
+                              <IconButton sx={{py: 0}}><Icon fontSize="small">info_outlined</Icon></IconButton>
+                           </CustomWidthTooltip>
+                        </>
+                     ) : (
+                        <>
+                           <i>No record previews are available at this time.</i>
+                           <CustomWidthTooltip
+                              title={(
+                                 <div>
+                                    {
+                                       processValues.validationSummary ? (
+                                          <>
+                                             It appears as though this process does not contain any valid records.
+                                          </>
+                                       ) : (
+                                          <>
+                                             If you choose to Perform Validation, and there are any valid records, then you will see a preview here.
+                                          </>
+                                       )
+                                    }
+                                 </div>
+                              )}
+                           >
+                              <IconButton sx={{py: 0}}><Icon fontSize="small">info_outlined</Icon></IconButton>
+                           </CustomWidthTooltip>
+                        </>
+                     )
                   }
                </Box>
             </MDTypography>
@@ -324,27 +244,16 @@ function ValidationReview({
                <Box sx={{maxHeight: "calc(100vh - 640px)", overflow: "auto", minHeight: "300px", marginRight: "-40px"}}>
                   <Box sx={{paddingRight: "40px"}}>
                      {
-                        previewRecords && !processValues.formatPreviewRecordUsingTableLayout && previewRecords[previewRecordIndex] && step.recordListFields.map((field) => (
+                        previewRecords && previewRecords[previewRecordIndex] && step.recordListFields.map((field) => (
                            <Box key={field.name} style={{marginBottom: "12px"}}>
                               <b>{`${field.label}:`}</b>
                               {" "}
-                              &nbsp;
+                           &nbsp;
                               {" "}
                               {ValueUtils.getDisplayValue(field, previewRecords[previewRecordIndex], "view")}
                            </Box>
                         ))
                      }
-                     {
-                        previewRecords && processValues.formatPreviewRecordUsingTableLayout && previewRecords[previewRecordIndex] &&
-                        <PreviewRecordUsingTableLayout
-                           index={previewRecordIndex}
-                           record={previewRecords[previewRecordIndex]}
-                           tableMetaData={previewTableMetaData}
-                           qInstance={qInstance}
-                           associationPreviewsByWidgetName={associationPreviewsByWidgetName}
-                           childTableMetaData={childTableMetaData}
-                        />
-                     }
                   </Box>
                </Box>
                {
@@ -364,7 +273,7 @@ function ValidationReview({
    );
 
    return (
-      <Box m={{xs: 0, md: 3}} mt={"3rem!important"}>
+      <Box m={3}>
          <Grid container spacing={2}>
             <Grid item xs={12} lg={6}>
                <MDTypography color="body" variant="button">
@@ -379,84 +288,4 @@ function ValidationReview({
    );
 }
 
-
-
-interface PreviewRecordUsingTableLayoutProps
-{
-   index: number
-   record: QRecord,
-   tableMetaData: QTableMetaData,
-   qInstance: QInstance,
-   associationPreviewsByWidgetName: { [widgetName: string]: AssociationPreview },
-   childTableMetaData: { [name: string]: QTableMetaData },
-}
-
-function PreviewRecordUsingTableLayout({record, tableMetaData, qInstance, associationPreviewsByWidgetName, childTableMetaData, index}: PreviewRecordUsingTableLayoutProps): JSX.Element
-{
-   if (!tableMetaData)
-   {
-      return (<i>Loading...</i>);
-   }
-
-   const renderedSections: JSX.Element[] = [];
-   const tableSections = TableUtils.getSectionsForRecordSidebar(tableMetaData);
-
-   for (let i = 0; i < tableSections.length; i++)
-   {
-      const section = tableSections[i];
-      if (section.isHidden)
-      {
-         continue;
-      }
-
-      if (section.fieldNames)
-      {
-         renderedSections.push(<Box mb="1rem">
-            <Box><h4>{section.label}</h4></Box>
-            <Box ml="1rem">
-               {renderSectionOfFields(section.name, section.fieldNames, tableMetaData, false, record, undefined, {label: {fontWeight: "500"}})}
-            </Box>
-         </Box>);
-      }
-      else if (section.widgetName)
-      {
-         const widget = qInstance.widgets.get(section.widgetName);
-         if (widget)
-         {
-            let data: ChildRecordListData = null;
-            if (associationPreviewsByWidgetName[section.widgetName])
-            {
-               const associationPreview = associationPreviewsByWidgetName[section.widgetName];
-               const associationRecords = record.associatedRecords?.get(associationPreview.associationName) ?? [];
-               data = {
-                  canAddChildRecord: false,
-                  childTableMetaData: childTableMetaData[associationPreview.tableName],
-                  defaultValuesForNewChildRecords: {},
-                  disabledFieldsForNewChildRecords: {},
-                  queryOutput: {records: associationRecords},
-                  totalRows: associationRecords.length,
-                  tablePath: "",
-                  title: "",
-                  viewAllLink: "",
-               };
-
-               renderedSections.push(<Box mb="1rem">
-                  {
-                     data && <Box>
-                        <Box mb="0.5rem"><h4>{section.label}</h4></Box>
-                        <Box pl="1rem">
-                           <RecordGridWidget key={index} data={data} widgetMetaData={widget} disableRowClick gridOnly={true} gridDensity={"compact"} />
-                        </Box>
-                     </Box>
-                  }
-               </Box>);
-            }
-         }
-      }
-   }
-
-   return <>{renderedSections}</>;
-}
-
-
 export default ValidationReview;

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

@@ -79,8 +79,6 @@ interface BasicAndAdvancedQueryControlsProps
 
    queryScreenUsage: QueryScreenUsage;
 
-   allowVariables?: boolean;
-
    mode: string;
    setMode: (mode: string) => void;
 }
@@ -116,7 +114,7 @@ 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 //
@@ -183,7 +181,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    {
       // todo - sometimes i want contains instead of equals on strings (client.name, for example...)
       let defaultOperator = field?.possibleValueSourceName ? QCriteriaOperator.IN : QCriteriaOperator.EQUALS;
-      if (field?.type == QFieldType.DATE_TIME)
+      if (field?.type == QFieldType.DATE_TIME || field?.type == QFieldType.DATE)
       {
          defaultOperator = QCriteriaOperator.GREATER_THAN;
       }
@@ -678,14 +676,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 +700,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
                                  updateCriteria={updateQuickCriteria}
                                  criteriaParam={getQuickCriteriaParam(fieldName)}
                                  fieldMetaData={field}
-                                 allowVariables={props.allowVariables}
                                  defaultOperator={defaultOperator}
-                                 queryScreenUsage={queryScreenUsage}
                                  handleRemoveQuickFilterField={handleRemoveQuickFilterField} />);
                            })
                         }

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.
@@ -50,18 +50,13 @@ export function EvaluatedExpression({field, expression}: EvaluatedExpressionProp
       return () => clearInterval(interval);
    }, []);
 
-   return <span style={{fontVariantNumeric: "tabular-nums"}}>{`${evaluateExpression(timeForEvaluations, field, expression)}`}</span>;
+   return <>{`${evaluateExpression(timeForEvaluations, field, expression)}`}</>;
 }
 
 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

@@ -46,13 +46,13 @@ export default function ExportMenuItem(props: QExportMenuItemProps)
 
    const {recordAnalytics} = useContext(QContext);
 
+   recordAnalytics({category: "tableEvents", action: "export", label: tableMetaData.label});
+
    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

@@ -35,7 +35,6 @@ import TextField from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
 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";
 
@@ -73,7 +72,7 @@ export const getValueModeRequiredCount = (valueMode: ValueMode): number =>
       case ValueMode.PVS_MULTI:
          return (null);
    }
-};
+}
 
 export interface OperatorOption
 {
@@ -109,7 +108,6 @@ export const getOperatorOptions = (tableMetaData: QTableMetaData, fieldName: str
          {
             case QFieldType.DECIMAL:
             case QFieldType.INTEGER:
-            case QFieldType.LONG:
                operatorOptions.push({label: "equals", value: QCriteriaOperator.EQUALS, valueMode: ValueMode.SINGLE});
                operatorOptions.push({label: "does not equal", value: QCriteriaOperator.NOT_EQUALS_OR_IS_NULL, valueMode: ValueMode.SINGLE});
                operatorOptions.push({label: "greater than", value: QCriteriaOperator.GREATER_THAN, valueMode: ValueMode.SINGLE});
@@ -185,7 +183,7 @@ export const getOperatorOptions = (tableMetaData: QTableMetaData, fieldName: str
    }
 
    return (operatorOptions);
-};
+}
 
 
 interface FilterCriteriaRowProps
@@ -199,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.";
@@ -216,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.";
@@ -269,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);
@@ -287,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)
@@ -306,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));
                }
@@ -319,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);
@@ -382,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;
          }
@@ -396,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 && !newValue.implicitValues)
          {
             const requiredValueCount = getValueModeRequiredCount(newValue.valueMode);
-            if (requiredValueCount != null && criteria.values.length > requiredValueCount)
+            if(requiredValueCount != null && criteria.values.length > requiredValueCount)
             {
                criteria.values.splice(requiredValueCount);
             }
@@ -427,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;
       }
@@ -517,8 +514,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,16 +88,14 @@ 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...
@@ -125,7 +104,7 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
    {
       if (field.type == QFieldType.DATE || field.type == QFieldType.DATE_TIME)
       {
-         if (e.code == "Tab")
+         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();
@@ -133,44 +112,6 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
       }
    };
 
-
-   /***************************************************************************
-    * 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 +121,23 @@ 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)}
+      onKeyDown={handleKeyDown}
+      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 +146,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 +169,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,29 +228,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
-                        fieldPossibleValueProps={{tableName: table.name, fieldName: field.name, initialDisplayValue: selectedPossibleValue?.label}}
-                        overrideId={field.name + "-single-" + criteria.id}
-                        key={field.name + "-single-" + criteria.id}
-                        fieldLabel="Value"
-                        initialValue={selectedPossibleValue?.id}
-                        inForm={false}
-                        onChange={(value: any) => valueChangeHandler(null, 0, value)}
-                        variant="standard"
-                        useCase="filter"
-                     />
-                  </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);
@@ -398,9 +256,10 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
                initialValues = criteria.values;
             }
          }
-         return <Box>
+         return <Box mb={-1.5}>
             <DynamicSelect
-               fieldPossibleValueProps={{tableName: table.name, fieldName: field.name, initialDisplayValue: null}}
+               tableName={table.name}
+               fieldName={field.name}
                overrideId={field.name + "-multi-" + criteria.id}
                key={field.name + "-multi-" + criteria.id}
                isMultiple
@@ -410,7 +269,6 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
                inForm={false}
                onChange={(value: any) => valueChangeHandler(null, "all", value)}
                variant="standard"
-               useCase="filter"
             />
          </Box>;
    }
@@ -418,4 +276,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, useReducer, 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);
-};
+}
 
 
 /*******************************************************************************
@@ -118,48 +115,31 @@ const doesOperatorOptionEqualCriteria = (operatorOption: OperatorOption, criteri
  ** autocomplete), given an array of options, the query's active criteria in this
  ** field, and the default operator to use for this field
  *******************************************************************************/
-const getOperatorSelectedValue = (operatorOptions: OperatorOption[], criteria: QFilterCriteriaWithId, defaultOperator: QCriteriaOperator, return0thOptionInsteadOfNull: boolean = false): OperatorOption =>
+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]);
    }
 
-   if(return0thOptionInsteadOfNull)
-   {
-      console.log("Returning 0th operator instead of null - this isn't expected, but has been seen to happen - so here's some additional debugging:");
-      try
-      {
-         console.log("Operator options:   " + JSON.stringify(operatorOptions));
-         console.log("Criteria: " + JSON.stringify(criteria));
-         console.log("Default Operator:   " + JSON.stringify(defaultOperator));
-      }
-      catch(e)
-      {
-         console.log(`Error in debug output: ${e}`);
-      }
-
-      return operatorOptions[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);
@@ -174,7 +154,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
    const [criteria, setCriteria] = useState(criteriaParamIsCriteria(criteriaParam) ? Object.assign({}, criteriaParam) as QFilterCriteriaWithId : null);
    const [id, setId] = useState(criteriaParamIsCriteria(criteriaParam) ? (criteriaParam as QFilterCriteriaWithId).id : ++seedId);
 
-   const [operatorSelectedValue, setOperatorSelectedValue] = useState(getOperatorSelectedValue(operatorOptions, criteria, defaultOperator, true));
+   const [operatorSelectedValue, setOperatorSelectedValue] = useState(getOperatorSelectedValue(operatorOptions, criteria, defaultOperator));
    const [operatorInputValue, setOperatorInputValue] = useState(operatorSelectedValue?.label);
 
    const {criteriaIsValid, criteriaStatusTooltip} = validateCriteria(criteria, operatorSelectedValue);
@@ -210,7 +190,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
    if (criteriaParamIsCriteria(criteriaParam) && JSON.stringify(criteriaParam) !== JSON.stringify(criteria))
    {
-      if (isOpen)
+      if(isOpen)
       {
          ////////////////////////////////////////////////////////////////////////////////
          // this was firing too-often for case where:  there was a criteria originally //
@@ -237,12 +217,12 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
     *******************************************************************************/
    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)
+            if(isOpen)
             {
                //////////////////////////////////////////////////////////////////////////////////
                // this was firing too-often for case where:  there was no criteria originally, //
@@ -257,7 +237,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
       }
 
       return (false);
-   };
+   }
 
    /*******************************************************************************
     ** Construct a new criteria object - resetting the values tied to the operator
@@ -271,8 +251,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.
@@ -286,7 +266,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
       {
          const element = document.getElementById("value-" + criteria.id);
          element?.focus();
-      });
+      })
    };
 
    /*******************************************************************************
@@ -324,15 +304,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 && !newValue.implicitValues)
          {
             const requiredValueCount = getValueModeRequiredCount(newValue.valueMode);
-            if (requiredValueCount != null && criteria.values.length > requiredValueCount)
+            if(requiredValueCount != null && criteria.values.length > requiredValueCount)
             {
                criteria.values.splice(requiredValueCount);
             }
@@ -365,7 +345,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 = [];
@@ -397,13 +376,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.
@@ -411,17 +390,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);
    }
@@ -431,10 +410,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)
    }
 
    /////////////////////////////////////////////////////////////////////////////////////
@@ -452,7 +431,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)
    {
@@ -467,9 +446,9 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
       // don't show the Equals or In operators //
       ///////////////////////////////////////////
       let operatorString = (<>{operatorSelectedValue.label}&nbsp;</>);
-      if (operatorSelectedValue.value == QCriteriaOperator.EQUALS || operatorSelectedValue.value == QCriteriaOperator.IN)
+      if(operatorSelectedValue.value == QCriteriaOperator.EQUALS || operatorSelectedValue.value == QCriteriaOperator.IN)
       {
-         operatorString = (<></>);
+         operatorString = (<></>)
       }
 
       buttonContent = (<><span style={{fontWeight: 700}}>{buttonContent}:</span>&nbsp;<span style={{fontWeight: 400}}>{operatorString}{valuesString}</span></>);
@@ -512,7 +491,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
    const xClicked = (e: React.MouseEvent<HTMLSpanElement>) =>
    {
       e.stopPropagation();
-      if (criteriaIsValid)
+      if(criteriaIsValid)
       {
          resetCriteria(e);
       }
@@ -520,12 +499,12 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
       {
          handleTurningOffQuickFilterField();
       }
-   };
+   }
 
    //////////////////////////////
    // return the button & menu //
    //////////////////////////////
-   const widthAndMaxWidth = (fieldMetaData?.type == QFieldType.DATE_TIME) ? 315 : 250;
+   const widthAndMaxWidth = fieldMetaData?.type == QFieldType.DATE_TIME ? 275 : 250
    return (
       <>
          {button}
@@ -562,12 +541,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/scripts/ScriptDocsForm.tsx

@@ -49,7 +49,7 @@ function ScriptDocsForm({helpText, exampleCode, aceEditorHeight}: Props): JSX.El
                <Card sx={{width: "100%", height: "100%"}}>
                   <Typography variant="h6" p={2} pb={1}>{heading}</Typography>
                   <Box className="devDocumentation" height="100%">
-                     <Typography variant="body2" sx={{maxWidth: "1200px", margin: "auto", height: "calc(100% - 0.5rem)"}}>
+                     <Typography variant="body2" sx={{maxWidth: "1200px", margin: "auto", height: "100%"}}>
                         <AceEditor
                            mode={mode}
                            theme="github"
@@ -62,7 +62,7 @@ function ScriptDocsForm({helpText, exampleCode, aceEditorHeight}: Props): JSX.El
                            width="100%"
                            showPrintMargin={false}
                            height="100%"
-                           style={{borderBottomRightRadius: "0.75rem", borderBottomLeftRadius: "0.75rem"}}
+                           style={{borderBottomRightRadius: "1rem", borderBottomLeftRadius: "1rem"}}
                         />
                      </Typography>
                   </Box>

src/qqq/components/scripts/ScriptEditor.tsx

@@ -40,17 +40,16 @@ import Snackbar from "@mui/material/Snackbar";
 import TextField from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
 import FormData from "form-data";
+import React, {useEffect, useReducer, useRef, useState} from "react";
+import AceEditor from "react-ace";
 import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
 import DynamicSelect from "qqq/components/forms/DynamicSelect";
 import ScriptDocsForm from "qqq/components/scripts/ScriptDocsForm";
 import ScriptTestForm from "qqq/components/scripts/ScriptTestForm";
 import Client from "qqq/utils/qqq/Client";
 
-import "ace-builds/src-noconflict/ace";
 import "ace-builds/src-noconflict/mode-javascript";
 import "ace-builds/src-noconflict/theme-github";
-import React, {useEffect, useReducer, useRef, useState} from "react";
-import AceEditor from "react-ace";
 import "ace-builds/src-noconflict/ext-language_tools";
 
 export interface ScriptEditorProps
@@ -70,15 +69,15 @@ const qController = Client.getInstance();
 
 function buildInitialFileContentsMap(scriptRevisionRecord: QRecord, scriptTypeFileSchemaList: QRecord[]): { [name: string]: string }
 {
-   const rs: { [name: string]: string } = {};
+   const rs: {[name: string]: string} = {};
 
-   if (!scriptTypeFileSchemaList)
+   if(!scriptTypeFileSchemaList)
    {
       console.log("Missing scriptTypeFileSchemaList");
    }
    else
    {
-      let files = scriptRevisionRecord?.associatedRecords?.get("files");
+      let files = scriptRevisionRecord?.associatedRecords?.get("files")
 
       for (let i = 0; i < scriptTypeFileSchemaList.length; i++)
       {
@@ -89,7 +88,7 @@ function buildInitialFileContentsMap(scriptRevisionRecord: QRecord, scriptTypeFi
          for (let j = 0; j < files?.length; j++)
          {
             let file = files[j];
-            if (file.values.get("fileName") == name)
+            if(file.values.get("fileName") == name)
             {
                contents = file.values.get("contents");
             }
@@ -104,9 +103,9 @@ function buildInitialFileContentsMap(scriptRevisionRecord: QRecord, scriptTypeFi
 
 function buildFileTypeMap(scriptTypeFileSchemaList: QRecord[]): { [name: string]: string }
 {
-   const rs: { [name: string]: string } = {};
+   const rs: {[name: string]: string} = {};
 
-   if (!scriptTypeFileSchemaList)
+   if(!scriptTypeFileSchemaList)
    {
       console.log("Missing scriptTypeFileSchemaList");
    }
@@ -126,21 +125,21 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
 {
    const [closing, setClosing] = useState(false);
 
-   const [apiName, setApiName] = useState(scriptRevisionRecord ? scriptRevisionRecord.values.get("apiName") : null);
-   const [apiNameLabel, setApiNameLabel] = useState(scriptRevisionRecord ? scriptRevisionRecord.displayValues.get("apiName") : null);
-   const [apiVersion, setApiVersion] = useState(scriptRevisionRecord ? scriptRevisionRecord.values.get("apiVersion") : null);
-   const [apiVersionLabel, setApiVersionLabel] = useState(scriptRevisionRecord ? scriptRevisionRecord.displayValues.get("apiVersion") : null);
+   const [apiName, setApiName] = useState(scriptRevisionRecord ? scriptRevisionRecord.values.get("apiName") : null)
+   const [apiNameLabel, setApiNameLabel] = useState(scriptRevisionRecord ? scriptRevisionRecord.displayValues.get("apiName") : null)
+   const [apiVersion, setApiVersion] = useState(scriptRevisionRecord ? scriptRevisionRecord.values.get("apiVersion") : null)
+   const [apiVersionLabel, setApiVersionLabel] = useState(scriptRevisionRecord ? scriptRevisionRecord.displayValues.get("apiVersion") : null)
 
-   const fileNamesFromSchema = scriptTypeFileSchemaList.map((schemaRecord) => schemaRecord.values.get("name"));
+   const fileNamesFromSchema = scriptTypeFileSchemaList.map((schemaRecord) => schemaRecord.values.get("name"))
    const [availableFileNames, setAvailableFileNames] = useState(fileNamesFromSchema);
-   const [openEditorFileNames, setOpenEditorFileNames] = useState([fileNamesFromSchema[0]]);
-   const [fileContents, setFileContents] = useState(buildInitialFileContentsMap(scriptRevisionRecord, scriptTypeFileSchemaList));
-   const [fileTypes, setFileTypes] = useState(buildFileTypeMap(scriptTypeFileSchemaList));
+   const [openEditorFileNames, setOpenEditorFileNames] = useState([fileNamesFromSchema[0]])
+   const [fileContents, setFileContents] = useState(buildInitialFileContentsMap(scriptRevisionRecord, scriptTypeFileSchemaList))
+   const [fileTypes, setFileTypes] = useState(buildFileTypeMap(scriptTypeFileSchemaList))
    console.log(`file types: ${JSON.stringify(fileTypes)}`);
 
-   const [commitMessage, setCommitMessage] = useState("");
+   const [commitMessage, setCommitMessage] = useState("")
    const [openTool, setOpenTool] = useState(null);
-   const [errorAlert, setErrorAlert] = useState("");
+   const [errorAlert, setErrorAlert] = useState("")
    const [promptForCommitMessageOpen, setPromptForCommitMessageOpen] = useState(false);
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
    const ref = useRef();
@@ -242,19 +241,19 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
       // need this to make Ace recognize new height.
       setTimeout(() =>
       {
-         window.dispatchEvent(new Event("resize"));
+         window.dispatchEvent(new Event("resize"))
       }, 100);
    };
 
    const saveClicked = (overrideCommitMessage?: string) =>
    {
-      if (!apiName || !apiVersion)
+      if(!apiName || !apiVersion)
       {
-         setErrorAlert("You must select a value for both API Name and API Version.");
+         setErrorAlert("You must select a value for both API Name and API Version.")
          return;
       }
 
-      if (!commitMessage && !overrideCommitMessage)
+      if(!commitMessage && !overrideCommitMessage)
       {
          setPromptForCommitMessageOpen(true);
          return;
@@ -268,18 +267,18 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
          formData.append("scriptId", scriptId);
          formData.append("commitMessage", overrideCommitMessage ?? commitMessage);
 
-         if (apiName)
+         if(apiName)
          {
             formData.append("apiName", apiName);
          }
 
-         if (apiVersion)
+         if(apiVersion)
          {
             formData.append("apiVersion", apiVersion);
          }
 
 
-         const fileNamesFromSchema = scriptTypeFileSchemaList.map((schemaRecord) => schemaRecord.values.get("name"));
+         const fileNamesFromSchema = scriptTypeFileSchemaList.map((schemaRecord) => schemaRecord.values.get("name"))
          formData.append("fileNames", fileNamesFromSchema.join(","));
 
          for (let fileName in fileContents)
@@ -300,58 +299,58 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
 
             if (processResult instanceof QJobError)
             {
-               const jobError = processResult as QJobError;
-               setErrorAlert(jobError.userFacingError ?? jobError.error);
+               const jobError = processResult as QJobError
+               setErrorAlert(jobError.userFacingError ?? jobError.error)
                setClosing(false);
                return;
             }
 
             closeCallback(null, "saved", "Saved New Script Version");
          }
-         catch (e)
+         catch(e)
          {
             // @ts-ignore
-            setErrorAlert(e.message ?? "Unexpected error saving script");
+            setErrorAlert(e.message ?? "Unexpected error saving script")
             setClosing(false);
          }
       })();
-   };
+   }
 
    const cancelClicked = () =>
    {
       setClosing(true);
       closeCallback(null, "cancelled");
-   };
+   }
 
    const updateCode = (value: string, event: any, index: number) =>
    {
       fileContents[openEditorFileNames[index]] = value;
       forceUpdate();
-   };
+   }
 
    const updateCommitMessage = (event: React.ChangeEvent<HTMLInputElement>) =>
    {
       setCommitMessage(event.target.value);
-   };
+   }
 
    const closePromptForCommitMessage = (wasSaveClicked: boolean, message?: string) =>
    {
       setPromptForCommitMessageOpen(false);
 
-      if (wasSaveClicked)
+      if(wasSaveClicked)
       {
-         setCommitMessage(message);
+         setCommitMessage(message)
          saveClicked(message);
       }
       else
       {
          setClosing(false);
       }
-   };
+   }
 
    const changeApiName = (apiNamePossibleValue?: QPossibleValue) =>
    {
-      if (apiNamePossibleValue)
+      if(apiNamePossibleValue)
       {
          setApiName(apiNamePossibleValue.id);
       }
@@ -359,11 +358,11 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
       {
          setApiName(null);
       }
-   };
+   }
 
    const changeApiVersion = (apiVersionPossibleValue?: QPossibleValue) =>
    {
-      if (apiVersionPossibleValue)
+      if(apiVersionPossibleValue)
       {
          setApiVersion(apiVersionPossibleValue.id);
       }
@@ -371,33 +370,33 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
       {
          setApiVersion(null);
       }
-   };
+   }
 
    const handleSelectingFile = (event: SelectChangeEvent, index: number) =>
    {
-      openEditorFileNames[index] = event.target.value;
+      openEditorFileNames[index] = event.target.value
       setOpenEditorFileNames(openEditorFileNames);
       forceUpdate();
-   };
+   }
 
    const splitEditorClicked = () =>
    {
-      openEditorFileNames.push(availableFileNames[0]);
+      openEditorFileNames.push(availableFileNames[0])
       setOpenEditorFileNames(openEditorFileNames);
       forceUpdate();
-   };
+   }
 
    const closeEditorClicked = (index: number) =>
    {
-      openEditorFileNames.splice(index, 1);
+      openEditorFileNames.splice(index, 1)
       setOpenEditorFileNames(openEditorFileNames);
       forceUpdate();
-   };
+   }
 
    const computeEditorWidth = (): string =>
    {
-      return (100 / openEditorFileNames.length) + "%";
-   };
+      return (100 / openEditorFileNames.length) + "%"
+   }
 
    return (
       <Box className="scriptEditor" sx={{position: "absolute", overflowY: "auto", height: "100%", width: "100%"}} p={6}>
@@ -409,7 +408,7 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
                {
                   return;
                }
-               setErrorAlert("");
+               setErrorAlert("")
             }} anchorOrigin={{vertical: "top", horizontal: "center"}}>
                <Alert color="error" onClose={() => setErrorAlert("")}>
                   {errorAlert}
@@ -441,10 +440,10 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
             <Box sx={{height: openTool ? "45%" : "100%"}}>
                <Grid container alignItems="flex-end">
                   <Box maxWidth={"50%"} minWidth={300}>
-                     <DynamicSelect fieldPossibleValueProps={{tableName: "scriptRevision", fieldName: "apiName", initialDisplayValue: apiNameLabel}} initialValue={apiName} fieldLabel={"API Name *"} inForm={false} onChange={changeApiName} useCase="form" />
+                     <DynamicSelect fieldName={"apiName"} initialValue={apiName} initialDisplayValue={apiNameLabel} fieldLabel={"API Name *"} tableName={"scriptRevision"} inForm={false} onChange={changeApiName} />
                   </Box>
                   <Box maxWidth={"50%"} minWidth={300} pl={2}>
-                     <DynamicSelect fieldPossibleValueProps={{tableName: "scriptRevision", fieldName: "apiVersion", initialDisplayValue: apiVersionLabel}} initialValue={apiVersion} fieldLabel={"API Version *"} inForm={false} onChange={changeApiVersion} useCase="form" />
+                     <DynamicSelect fieldName={"apiVersion"} initialValue={apiVersion} initialDisplayValue={apiVersionLabel} fieldLabel={"API Version *"} tableName={"scriptRevision"} inForm={false} onChange={changeApiVersion} />
                   </Box>
                </Grid>
                <Box display="flex" sx={{height: "100%"}}>
@@ -465,19 +464,19 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
                               <Box>
                                  {
                                     openEditorFileNames.length > 1 &&
-                                    <Tooltip title="Close this editor split" enterDelay={500}>
-                                       <IconButton size="small" onClick={() => closeEditorClicked(index)}>
-                                          <Icon>close</Icon>
-                                       </IconButton>
-                                    </Tooltip>
+                                       <Tooltip title="Close this editor split" enterDelay={500}>
+                                          <IconButton size="small" onClick={() => closeEditorClicked(index)}>
+                                             <Icon>close</Icon>
+                                          </IconButton>
+                                       </Tooltip>
                                  }
                                  {
                                     index == openEditorFileNames.length - 1 &&
-                                    <Tooltip title="Open a new editor split" enterDelay={500}>
-                                       <IconButton size="small" onClick={splitEditorClicked}>
-                                          <Icon>vertical_split</Icon>
-                                       </IconButton>
-                                    </Tooltip>
+                                       <Tooltip title="Open a new editor split" enterDelay={500}>
+                                          <IconButton size="small" onClick={splitEditorClicked}>
+                                             <Icon>vertical_split</Icon>
+                                          </IconButton>
+                                       </Tooltip>
                                  }
                               </Box>
                            </Box>
@@ -527,29 +526,29 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
                </Grid>
             </Box>
 
-            <CommitMessagePrompt isOpen={promptForCommitMessageOpen} closeHandler={closePromptForCommitMessage} />
+            <CommitMessagePrompt isOpen={promptForCommitMessageOpen} closeHandler={closePromptForCommitMessage}/>
          </Card>
       </Box>
 
    );
 }
 
-function CommitMessagePrompt(props: { isOpen: boolean, closeHandler: (wasSaveClicked: boolean, message?: string) => void })
+function CommitMessagePrompt(props: {isOpen: boolean, closeHandler: (wasSaveClicked: boolean, message?: string) => void})
 {
-   const [commitMessage, setCommitMessage] = useState("No commit message given");
+   const [commitMessage, setCommitMessage] = useState("No commit message given")
 
    const updateCommitMessage = (event: React.ChangeEvent<HTMLInputElement>) =>
    {
       setCommitMessage(event.target.value);
-   };
+   }
 
    const keyPressHandler = (e: React.KeyboardEvent<HTMLDivElement>) =>
    {
-      if (e.key === "Enter")
+      if(e.key === "Enter")
       {
          props.closeHandler(true, commitMessage);
       }
-   };
+   }
 
    return (
       <Dialog
@@ -580,10 +579,10 @@ function CommitMessagePrompt(props: { isOpen: boolean, closeHandler: (wasSaveCli
          </DialogContent>
          <DialogActions>
             <QCancelButton onClickHandler={() => props.closeHandler(false)} disabled={false} />
-            <QSaveButton label="Save" onClickHandler={() => props.closeHandler(true, commitMessage)} disabled={false} />
+            <QSaveButton label="Save" onClickHandler={() => props.closeHandler(true, commitMessage)} disabled={false}/>
          </DialogActions>
       </Dialog>
-   );
+   )
 }
 
 export default ScriptEditor;

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
-                           fieldPossibleValueProps={{possibleValueSourceName: shareableTableMetaData.audiencePossibleValueSourceName, initialDisplayValue: selectedAudienceOption?.label}}
-                           fieldLabel="User or Group" // todo should come from shareableTableMetaData
-                           initialValue={selectedAudienceOption?.id}
-                           inForm={false}
-                           onChange={handleAudienceChange}
-                           useCase="form"
-                        />
-                     </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

@@ -22,25 +22,16 @@
 
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
 import {Box, Skeleton} from "@mui/material";
-import Card from "@mui/material/Card";
-import Modal from "@mui/material/Modal";
-import parse from "html-react-parser";
+import React from "react";
 import {BlockData} from "qqq/components/widgets/blocks/BlockModels";
 import WidgetBlock from "qqq/components/widgets/WidgetBlock";
-import ProcessWidgetBlockUtils from "qqq/pages/processes/ProcessWidgetBlockUtils";
-import React, {useEffect, useState} from "react";
 
 
-export interface CompositeData
+interface CompositeData
 {
-   blockId: string;
    blocks: BlockData[];
    styleOverrides?: any;
-   layout?: string;
-   overlayHtml?: string;
-   overlayStyleOverrides?: any;
-   modalMode: string;
-   styles?: any;
+   layout?: string
 }
 
 
@@ -48,15 +39,13 @@ interface CompositeWidgetProps
 {
    widgetMetaData: QWidgetMetaData;
    data: CompositeData;
-   actionCallback?: (blockData: BlockData, eventValues?: { [name: string]: any }) => boolean;
-   values?: { [key: string]: any };
 }
 
 
 /*******************************************************************************
  ** Widget which is a list of Blocks.
  *******************************************************************************/
-export default function CompositeWidget({widgetMetaData, data, actionCallback, values}: CompositeWidgetProps): JSX.Element
+export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetProps): JSX.Element
 {
    if (!data || !data.blocks)
    {
@@ -68,41 +57,20 @@ export default function CompositeWidget({widgetMetaData, data, actionCallback, v
    ////////////////////////////////////////////////////////////////////////////////////
    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")
+   if (layout == "FLEX_ROW_WRAPPED")
    {
       boxStyle.display = "flex";
       boxStyle.flexDirection = "row";
       boxStyle.flexWrap = "wrap";
       boxStyle.gap = "0.5rem";
    }
-   else if (layout == "FLEX_ROW")
-   {
-      boxStyle.display = "flex";
-      boxStyle.flexDirection = "row";
-      boxStyle.gap = "0.5rem";
-   }
    else if (layout == "FLEX_ROW_SPACE_BETWEEN")
    {
       boxStyle.display = "flex";
       boxStyle.flexDirection = "row";
-      boxStyle.justifyContent = "space-between";
+      boxStyle.justifyContent = "space-between"
       boxStyle.gap = "0.25rem";
    }
-   else if (layout == "FLEX_ROW_CENTER")
-   {
-      boxStyle.display = "flex";
-      boxStyle.flexDirection = "row";
-      boxStyle.justifyContent = "center";
-      boxStyle.gap = "0.25rem";
-      boxStyle.flexWrap = "wrap";
-   }
    else if (layout == "TABLE_SUB_ROW_DETAILS")
    {
       boxStyle.display = "flex";
@@ -122,96 +90,20 @@ export default function CompositeWidget({widgetMetaData, data, actionCallback, v
       boxStyle.borderRadius = "0.5rem";
       boxStyle.background = "#FFFFFF";
    }
+
    if (data?.styleOverrides)
    {
       boxStyle = {...boxStyle, ...data.styleOverrides};
    }
 
-   if (data.styles?.backgroundColor)
-   {
-      boxStyle.backgroundColor = ProcessWidgetBlockUtils.processColorFromStyleMap(data.styles.backgroundColor);
-   }
-
-   if (data.styles?.padding)
-   {
-      boxStyle.paddingTop = data.styles?.padding.top + "px"
-      boxStyle.paddingBottom = data.styles?.padding.bottom + "px"
-      boxStyle.paddingLeft = data.styles?.padding.left + "px"
-      boxStyle.paddingRight = data.styles?.padding.right + "px"
-   }
-
-   let overlayStyle: any = {};
-
-   if (data?.overlayStyleOverrides)
-   {
-      overlayStyle = {...overlayStyle, ...data.overlayStyleOverrides};
-   }
-
-   const content = (
-      <>
-         {
-            data?.overlayHtml &&
-            <Box sx={overlayStyle} className="blockWidgetOverlay">{parse(data.overlayHtml)}</Box>
-         }
-         <Box sx={boxStyle} className="compositeWidget">
-            {
-               data.blocks.map((block: BlockData, index) => (
-                  <React.Fragment key={index}>
-                     <WidgetBlock widgetMetaData={widgetMetaData} block={block} actionCallback={actionCallback} values={values} />
-                  </React.Fragment>
-               ))
-            }
-         </Box>
-      </>
-   );
-
-   if (data.modalMode)
-   {
-      const [isModalOpen, setIsModalOpen] = useState(values && (values[data.blockId] == true));
-
-      /***************************************************************************
-       **
-       ***************************************************************************/
-      const controlCallback = (newValue: boolean) =>
+   return (<Box sx={boxStyle} className="compositeWidget">
       {
-         setIsModalOpen(newValue);
-      };
-
-      /***************************************************************************
-       **
-       ***************************************************************************/
-      const modalOnClose = (event: object, reason: string) =>
-      {
-         values[data.blockId] = false;
-         setIsModalOpen(false);
-         actionCallback({blockTypeName: "BUTTON", values: {}}, {controlCode: `hideModal:${data.blockId}`});
-      };
-
-      //////////////////////////////////////////////////////////////////////////////////////////
-      // register the control-callback function - so when buttons are clicked, we can be told //
-      //////////////////////////////////////////////////////////////////////////////////////////
-      useEffect(() =>
-      {
-         if (actionCallback)
-         {
-            actionCallback(null, {
-               registerControlCallbackName: data.blockId,
-               registerControlCallbackFunction: controlCallback
-            });
-         }
-      }, []);
-
-      return (<Modal open={isModalOpen} onClose={modalOnClose}>
-         <Box sx={{position: "absolute", overflowY: "auto", maxHeight: "100%", width: "100%"}}>
-            <Card sx={{my: 5, mx: "auto", p: "1rem", maxWidth: "1024px"}}>
-               {content}
-            </Card>
-         </Box>
-      </Modal>);
-   }
-   else
-   {
-      return content;
-   }
+         data.blocks.map((block: BlockData, index) => (
+            <React.Fragment key={index}>
+               <WidgetBlock widgetMetaData={widgetMetaData} block={block} />
+            </React.Fragment>
+         ))
+      }
+   </Box>);
 
 }

src/qqq/components/widgets/DashboardWidgets.tsx

@@ -18,18 +18,15 @@
  * 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 {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
 import {Alert, Skeleton} from "@mui/material";
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
-import Modal from "@mui/material/Modal";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import parse from "html-react-parser";
 import QContext from "QContext";
-import EntityForm from "qqq/components/forms/EntityForm";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import TabPanel from "qqq/components/misc/TabPanel";
 import BarChart from "qqq/components/widgets/charts/barchart/BarChart";
@@ -41,19 +38,18 @@ 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, {ChildRecordListData} from "qqq/components/widgets/misc/RecordGridWidget";
+import RecordGridWidget from "qqq/components/widgets/misc/RecordGridWidget";
+import ReportSetupWidget from "qqq/components/widgets/misc/ReportSetupWidget";
 import ScriptViewer from "qqq/components/widgets/misc/ScriptViewer";
 import StepperCard from "qqq/components/widgets/misc/StepperCard";
 import USMapWidget from "qqq/components/widgets/misc/USMapWidget";
 import ParentWidget from "qqq/components/widgets/ParentWidget";
 import MultiStatisticsCard from "qqq/components/widgets/statistics/MultiStatisticsCard";
 import StatisticsCard from "qqq/components/widgets/statistics/StatisticsCard";
-import Widget, {HeaderIcon, LabelComponent, WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT, WidgetData} from "qqq/components/widgets/Widget";
+import Widget, {HeaderIcon, LabelComponent, WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT} from "qqq/components/widgets/Widget";
 import WidgetBlock from "qqq/components/widgets/WidgetBlock";
 import ProcessRun from "qqq/pages/processes/ProcessRun";
 import Client from "qqq/utils/qqq/Client";
@@ -74,9 +70,6 @@ interface Props
    childUrlParams?: string;
    parentWidgetMetaData?: QWidgetMetaData;
    wrapWidgetsInTabPanels: boolean;
-   actionCallback?: (data: any, eventValues?: { [name: string]: any }) => boolean;
-   initialWidgetDataList: any[];
-   values?: { [key: string]: any };
 }
 
 DashboardWidgets.defaultProps = {
@@ -88,14 +81,11 @@ DashboardWidgets.defaultProps = {
    childUrlParams: "",
    parentWidgetMetaData: null,
    wrapWidgetsInTabPanels: false,
-   actionCallback: null,
-   initialWidgetDataList: null,
-   values: {}
 };
 
-function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, record, omitWrappingGridContainer, areChildren, childUrlParams, parentWidgetMetaData, wrapWidgetsInTabPanels, actionCallback, initialWidgetDataList, values}: Props): JSX.Element
+function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, record, omitWrappingGridContainer, areChildren, childUrlParams, parentWidgetMetaData, wrapWidgetsInTabPanels}: Props): JSX.Element
 {
-   const [widgetData, setWidgetData] = useState(initialWidgetDataList == null ? [] as any[] : initialWidgetDataList);
+   const [widgetData, setWidgetData] = useState([] as any[]);
    const [widgetCounter, setWidgetCounter] = useState(0);
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
@@ -103,11 +93,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
    const [haveLoadedParams, setHaveLoadedParams] = useState(false);
    const {accentColor} = useContext(QContext);
 
-   /////////////////////////
-   // modal form controls //
-   /////////////////////////
-   const [showEditChildForm, setShowEditChildForm] = useState(null as any);
-
    let initialSelectedTab = 0;
    let selectedTabKey: string = null;
    if (parentWidgetMetaData && wrapWidgetsInTabPanels)
@@ -128,15 +113,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
 
    useEffect(() =>
    {
-      if (initialWidgetDataList && initialWidgetDataList.length > 0)
-      {
-         // todo actually, should this check each element of the array, down in the loop?  yeah, when we need to, do it that way.
-         console.log("We already have initial widget data, so not fetching from backend.");
-         return;
-      }
-
       setWidgetData([]);
-
       for (let i = 0; i < widgetMetaDataList.length; i++)
       {
          const widgetMetaData = widgetMetaDataList[i];
@@ -173,7 +150,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
 
    const reloadWidget = async (index: number, data: string) =>
    {
-      await (async () =>
+      (async () =>
       {
          const urlParams = getQueryParams(widgetMetaDataList[index], data);
          setCurrentUrlParams(urlParams);
@@ -280,11 +257,11 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
     ** helper function, to convert values from a QRecord values map to a regular old
     ** js object
     *******************************************************************************/
-   function convertQRecordValuesFromMapToObject(record: QRecord): { [name: string]: any }
+   function convertQRecordValuesFromMapToObject(record: QRecord): {[name: string]: any}
    {
-      const rs: { [name: string]: any } = {};
+      const rs: {[name: string]: any} = {};
 
-      if (record && record.values)
+      if(record.values)
       {
          record.values.forEach((value, key) => rs[key] = value);
       }
@@ -292,151 +269,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
       return (rs);
    }
 
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   const closeEditChildForm = (event: object, reason: string) =>
-   {
-      if (reason === "backdropClick" || reason === "escapeKeyDown")
-      {
-         return;
-      }
-
-      setShowEditChildForm(null);
-   };
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function deleteChildRecord(name: string, widgetIndex: number, rowIndex: number)
-   {
-      updateChildRecordList(name, "delete", rowIndex);
-      forceUpdate();
-      actionCallback(widgetData[widgetIndex]);
-   };
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function openEditChildRecord(name: string, widgetData: any, rowIndex: number)
-   {
-      let defaultValues = widgetData.queryOutput.records[rowIndex].values;
-
-      let disabledFields = widgetData.disabledFieldsForNewChildRecords;
-      if (!disabledFields)
-      {
-         disabledFields = widgetData.defaultValuesForNewChildRecords;
-      }
-
-      doOpenEditChildForm(name, widgetData.childTableMetaData, rowIndex, defaultValues, disabledFields);
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function openAddChildRecord(name: string, widgetData: any)
-   {
-      let defaultValues = widgetData.defaultValuesForNewChildRecords;
-
-      let disabledFields = widgetData.disabledFieldsForNewChildRecords;
-      if (!disabledFields)
-      {
-         disabledFields = widgetData.defaultValuesForNewChildRecords;
-      }
-
-      doOpenEditChildForm(name, widgetData.childTableMetaData, null, defaultValues, disabledFields);
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function doOpenEditChildForm(widgetName: string, table: QTableMetaData, rowIndex: number, defaultValues: any, disabledFields: any)
-   {
-      const showEditChildForm: any = {};
-      showEditChildForm.widgetName = widgetName;
-      showEditChildForm.table = table;
-      showEditChildForm.rowIndex = rowIndex;
-      showEditChildForm.defaultValues = defaultValues;
-      showEditChildForm.disabledFields = disabledFields;
-      setShowEditChildForm(showEditChildForm);
-   }
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function submitEditChildForm(values: any, tableName: string)
-   {
-      updateChildRecordList(showEditChildForm.widgetName, showEditChildForm.rowIndex == null ? "insert" : "edit", showEditChildForm.rowIndex, values);
-      let widgetIndex = determineChildRecordListIndex(showEditChildForm.widgetName);
-      actionCallback(widgetData[widgetIndex]);
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function determineChildRecordListIndex(widgetName: string): number
-   {
-      let widgetIndex = -1;
-      for (var i = 0; i < widgetMetaDataList.length; i++)
-      {
-         const widgetMetaData = widgetMetaDataList[i];
-         if (widgetMetaData.name == widgetName)
-         {
-            widgetIndex = i;
-            break;
-         }
-      }
-      return (widgetIndex);
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   function updateChildRecordList(widgetName: string, action: "insert" | "edit" | "delete", rowIndex?: number, values?: any)
-   {
-      ////////////////////////////////////////////////
-      // find the correct child record widget index //
-      ////////////////////////////////////////////////
-      let widgetIndex = determineChildRecordListIndex(widgetName);
-
-      if (!widgetData[widgetIndex].queryOutput.records)
-      {
-         widgetData[widgetIndex].queryOutput.records = [];
-      }
-
-      const newChildListWidgetData: ChildRecordListData = widgetData[widgetIndex];
-      if (!newChildListWidgetData.queryOutput.records)
-      {
-         newChildListWidgetData.queryOutput.records = [];
-      }
-
-      switch (action)
-      {
-         case "insert":
-            newChildListWidgetData.queryOutput.records.push({values: values});
-            break;
-         case "edit":
-            newChildListWidgetData.queryOutput.records[rowIndex] = {values: values};
-            break;
-         case "delete":
-            newChildListWidgetData.queryOutput.records.splice(rowIndex, 1);
-            break;
-      }
-      newChildListWidgetData.totalRows = newChildListWidgetData.queryOutput.records.length;
-      widgetData[widgetIndex] = newChildListWidgetData;
-      setWidgetData(widgetData);
-
-      setShowEditChildForm(null);
-   }
-
-
    const renderWidget = (widgetMetaData: QWidgetMetaData, i: number): JSX.Element =>
    {
       const labelAdditionalComponentsRight: LabelComponent[] = [];
@@ -460,7 +292,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
       }
 
       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
@@ -476,7 +308,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                )
             }
             {
-               widgetMetaData.type === "alert" && widgetData[i]?.html && !widgetData[i]?.hideWidget && (
+               widgetMetaData.type === "alert" && widgetData[i]?.html && (
                   <Widget
                      omitPadding={true}
                      widgetMetaData={widgetMetaData}
@@ -486,16 +318,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                      labelAdditionalComponentsRight={labelAdditionalComponentsRight}
                      labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
-                     <Alert severity={widgetData[i]?.alertType?.toLowerCase()}>
-                        {parse(widgetData[i]?.html)}
-                        {widgetData[i]?.bulletList && (
-                           <div style={{fontSize: "14px"}}>
-                              {widgetData[i].bulletList.map((bullet: string, index: number) =>
-                                 <li key={`widget-${i}-${index}`}>{parse(bullet)}</li>
-                              )}
-                           </div>
-                        )}
-                     </Alert>
+                     <Alert severity={widgetData[i]?.alertType?.toLowerCase()}>{parse(widgetData[i]?.html)}</Alert>
                   </Widget>
                )
             }
@@ -519,20 +342,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
@@ -677,7 +486,9 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
             }
             {
                widgetMetaData.type === "divider" && (
-                  <DividerWidget />
+                  <Box>
+                     <DividerWidget />
+                  </Box>
                )
             }
             {
@@ -711,15 +522,8 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                widgetMetaData.type === "childRecordList" && (
                   widgetData && widgetData[i] &&
                   <RecordGridWidget
-                     disableRowClick={widgetData[i]?.disableRowClick}
-                     allowRecordEdit={widgetData[i]?.allowRecordEdit}
-                     allowRecordDelete={widgetData[i]?.allowRecordDelete}
-                     deleteRecordCallback={(rowIndex) => deleteChildRecord(widgetMetaData.name, i, rowIndex)}
-                     editRecordCallback={(rowIndex) => openEditChildRecord(widgetMetaData.name, widgetData[i], rowIndex)}
-                     addNewRecordCallback={widgetData[i]?.isInProcess ? () => openAddChildRecord(widgetMetaData.name, widgetData[i]) : null}
                      widgetMetaData={widgetMetaData}
                      data={widgetData[i]}
-                     parentRecord={record}
                   />
                )
 
@@ -744,7 +548,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                      labelAdditionalComponentsRight={labelAdditionalComponentsRight}
                      labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
-                     <CompositeWidget widgetMetaData={widgetMetaData} data={widgetData[i]} actionCallback={actionCallback} values={values} />
+                     <CompositeWidget widgetMetaData={widgetMetaData} data={widgetData[i]} />
                   </Widget>
                )
             }
@@ -779,25 +583,17 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                )
             }
             {
-               widgetMetaData.type === "filterAndColumnsSetup" && (
-                  widgetData && widgetData[i] &&
-                  <FilterAndColumnsSetupWidget isEditable={false} widgetMetaData={widgetMetaData} widgetData={widgetData[i]} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
-                  {
-                  }} />
+               widgetMetaData.type === "reportSetup" && (
+                  widgetData && widgetData[i] && widgetData[i].queryParams &&
+                  <ReportSetupWidget isEditable={false} widgetMetaData={widgetMetaData} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
+                  {}} />
                )
             }
             {
                widgetMetaData.type === "pivotTableSetup" && (
                   widgetData && widgetData[i] && widgetData[i].queryParams &&
                   <PivotTableSetupWidget isEditable={false} widgetMetaData={widgetMetaData} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
-                  {
-                  }} />
-               )
-            }
-            {
-               widgetMetaData.type === "dynamicForm" && (
-                  widgetData && widgetData[i] &&
-                  <DynamicFormWidget isEditable={false} widgetMetaData={widgetMetaData} widgetData={widgetData[i]} record={record} recordValues={convertQRecordValuesFromMapToObject(record)} />
+                  {}} />
                )
             }
          </Box>
@@ -819,28 +615,8 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
 
                   if (!omitWrappingGridContainer)
                   {
-                     const gridProps: { [key: string]: any } = {};
-
-                     for (let size of ["xs", "sm", "md", "lg", "xl", "xxl"])
-                     {
-                        const key = `gridCols:sizeClass:${size}`;
-                        if (widgetMetaData?.defaultValues?.has(key))
-                        {
-                           gridProps[size] = widgetMetaData?.defaultValues.get(key);
-                        }
-                     }
-
-                     if (!gridProps["xxl"])
-                     {
-                        gridProps["xxl"] = widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12;
-                     }
-
-                     if (!gridProps["xs"])
-                     {
-                        gridProps["xs"] = 12;
-                     }
-
-                     renderedWidget = (<Grid id={widgetMetaData.name} item {...gridProps} sx={{display: "flex", alignItems: "stretch", scrollMarginTop: "100px"}}>
+                     // @ts-ignore
+                     renderedWidget = (<Grid id={widgetMetaData.name} item xxl={widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12} xs={12} sx={{display: "flex", alignItems: "stretch", scrollMarginTop: "100px"}}>
                         {renderedWidget}
                      </Grid>);
                   }
@@ -891,22 +667,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                   </Grid>
                )
             }
-            {
-               showEditChildForm &&
-               <Modal open={showEditChildForm as boolean} onClose={(event, reason) => closeEditChildForm(event, reason)}>
-                  <div className="modalEditForm">
-                     <EntityForm
-                        isModal={true}
-                        closeModalHandler={closeEditChildForm}
-                        table={showEditChildForm.table}
-                        defaultValues={showEditChildForm.defaultValues}
-                        disabledFields={showEditChildForm.disabledFields}
-                        onSubmitCallback={submitEditChildForm}
-                        overrideHeading={`${showEditChildForm.rowIndex != null ? "Editing" : "Creating New"} ${showEditChildForm.table.label}`}
-                     />
-                  </div>
-               </Modal>
-            }
          </>
       ) : null
    );

src/qqq/components/widgets/Widget.tsx

@@ -21,7 +21,8 @@
 
 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 {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";
@@ -195,6 +196,8 @@ export function HeaderLinkButtonComponent({label, onClickCallback, disabled, dis
 }
 
 
+
+
 /*******************************************************************************
  **
  *******************************************************************************/
@@ -217,7 +220,7 @@ export function HeaderToggleComponent({label, getValue, onClickCallback, disable
    const onClick = () =>
    {
       onClickCallback();
-   };
+   }
 
    return (
       <Box alignItems="baseline" mr="-0.75rem">
@@ -233,6 +236,7 @@ export function HeaderToggleComponent({label, getValue, onClickCallback, disable
 }
 
 
+
 /*******************************************************************************
  **
  *******************************************************************************/
@@ -694,7 +698,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
    );
 
    let sublabelElement = (
-      <Box key="sublabel" height="20px">
+      <Box height="20px">
          <Typography sx={{position: "relative", top: "-18px"}} variant="caption">
             {props.widgetData?.sublabel}
          </Typography>
@@ -781,7 +785,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
                      }
                      {localLabelAdditionalElementsLeft}
                   </Box>
-                  <Box key="sublabelContainer" display="flex">
+                  <Box display="flex">
                      {
                         hasPermission && props.widgetData?.sublabel && (sublabelElement)
                      }

src/qqq/components/widgets/WidgetBlock.tsx

@@ -22,9 +22,6 @@
 
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
 import {Alert, Skeleton} from "@mui/material";
-import ButtonBlock from "qqq/components/widgets/blocks/ButtonBlock";
-import AudioBlock from "qqq/components/widgets/blocks/AudioBlock";
-import InputFieldBlock from "qqq/components/widgets/blocks/InputFieldBlock";
 import React from "react";
 import BigNumberBlock from "qqq/components/widgets/blocks/BigNumberBlock";
 import {BlockData} from "qqq/components/widgets/blocks/BlockModels";
@@ -35,22 +32,19 @@ import TableSubRowDetailRowBlock from "qqq/components/widgets/blocks/TableSubRow
 import TextBlock from "qqq/components/widgets/blocks/TextBlock";
 import UpOrDownNumberBlock from "qqq/components/widgets/blocks/UpOrDownNumberBlock";
 import CompositeWidget from "qqq/components/widgets/CompositeWidget";
-import ImageBlock from "./blocks/ImageBlock";
 
 
 interface WidgetBlockProps
 {
    widgetMetaData: QWidgetMetaData;
    block: BlockData;
-   actionCallback?: (blockData: BlockData, eventValues?: {[name: string]: any}) => boolean;
-   values?: { [key: string]: any };
 }
 
 
 /*******************************************************************************
  ** Component to render a single Block in the widget framework!
  *******************************************************************************/
-export default function WidgetBlock({widgetMetaData, block, actionCallback, values}: WidgetBlockProps): JSX.Element
+export default function WidgetBlock({widgetMetaData, block}: WidgetBlockProps): JSX.Element
 {
    if(!block)
    {
@@ -70,7 +64,7 @@ export default function WidgetBlock({widgetMetaData, block, actionCallback, valu
    if(block.blockTypeName == "COMPOSITE")
    {
       // @ts-ignore - special case for composite type block...
-      return (<CompositeWidget widgetMetaData={widgetMetaData} data={block} actionCallback={actionCallback} values={values} />);
+      return (<CompositeWidget widgetMetaData={widgetMetaData} data={block} />);
    }
 
    switch(block.blockTypeName)
@@ -89,14 +83,6 @@ export default function WidgetBlock({widgetMetaData, block, actionCallback, valu
          return (<DividerBlock widgetMetaData={widgetMetaData} data={block} />);
       case "BIG_NUMBER":
          return (<BigNumberBlock widgetMetaData={widgetMetaData} data={block} />);
-      case "INPUT_FIELD":
-         return (<InputFieldBlock widgetMetaData={widgetMetaData} data={block} actionCallback={actionCallback} />);
-      case "BUTTON":
-         return (<ButtonBlock widgetMetaData={widgetMetaData} data={block} actionCallback={actionCallback} />);
-      case "AUDIO":
-         return (<AudioBlock widgetMetaData={widgetMetaData} data={block} />);
-      case "IMAGE":
-         return (<ImageBlock widgetMetaData={widgetMetaData} data={block} actionCallback={actionCallback} />);
       default:
          return (<Alert sx={{m: "0.5rem"}} color="warning">Unsupported block type: {block.blockTypeName}</Alert>)
    }

src/qqq/components/widgets/WidgetUtils.tsx

@@ -21,16 +21,14 @@
 
 
 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 React from "react";
 import colors from "qqq/assets/theme/base/colors";
 import {WidgetData} from "qqq/components/widgets/Widget";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
-import React from "react";
-import {Link} from "react-router-dom";
 
 /*******************************************************************************
  ** Utility class used by Widgets
@@ -53,17 +51,6 @@ export class WidgetUtils
    };
 
 
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   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>);
-   };
-
-
    /*******************************************************************************
     **
     *******************************************************************************/
@@ -110,4 +97,4 @@ export class WidgetUtils
       return (fileName);
    };
 
-}
+}

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

@@ -1,40 +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 Box from "@mui/material/Box";
-import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
-import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
-import DumpJsonBox from "qqq/utils/DumpJsonBox";
-import React from "react";
-
-/*******************************************************************************
- ** Block that renders ... an audio tag
- **
- ** <audio src=${path} ${autoPlay} ${showControls} />
- *******************************************************************************/
-export default function AudioBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
-{
-   return (
-      <BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
-         <audio src={data.values?.path} autoPlay={data.values?.autoPlay} controls={data.values?.showControls} />
-      </BlockElementWrapper>
-   );
-}

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

@@ -21,19 +21,18 @@
 
 
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import {Box, Tooltip} from "@mui/material";
+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";
-import CompositeWidget from "qqq/components/widgets/CompositeWidget";
-import React, {ReactElement, useContext} from "react";
-import {Link} from "react-router-dom";
 
 interface BlockElementWrapperProps
 {
    data: BlockData;
    metaData: QWidgetMetaData;
-   slot: string;
+   slot: string
    linkProps?: any;
    children: ReactElement;
 }
@@ -48,16 +47,16 @@ export default function BlockElementWrapper({data, metaData, slot, linkProps, ch
    let link: BlockLink;
    let tooltip: BlockTooltip;
 
-   if (slot)
+   if(slot)
    {
       link = data.linkMap && data.linkMap[slot.toUpperCase()];
-      if (!link)
+      if(!link)
       {
          link = data.link;
       }
 
       tooltip = data.tooltipMap && data.tooltipMap[slot.toUpperCase()];
-      if (!tooltip)
+      if(!tooltip)
       {
          tooltip = data.tooltip;
       }
@@ -68,9 +67,9 @@ export default function BlockElementWrapper({data, metaData, slot, linkProps, ch
       tooltip = data.tooltip;
    }
 
-   if (!tooltip)
+   if(!tooltip)
    {
-      const helpRoles = ["ALL_SCREENS"];
+      const helpRoles = ["ALL_SCREENS"]
 
       ///////////////////////////////////////////////////////////////////////////////////////////////
       // the full keys in the helpContent table will look like:                                    //
@@ -81,39 +80,26 @@ export default function BlockElementWrapper({data, metaData, slot, linkProps, ch
       const key = data.blockId ? `${data.blockId},${slot}` : slot;
       const showHelp = helpHelpActive || hasHelpContent(metaData?.helpContent?.get(key), helpRoles);
 
-      if (showHelp)
+      if(showHelp)
       {
          const formattedHelpContent = <HelpContent helpContents={metaData?.helpContent?.get(key)} roles={helpRoles} helpContentKey={`widget:${metaData?.name};slot:${key}`} />;
-         tooltip = {title: formattedHelpContent, placement: "bottom"};
+         tooltip = {title: formattedHelpContent, placement: "bottom"}
       }
    }
 
    let rs = children;
 
-   if (link && link.href)
+   if(link)
    {
-      rs = <Link to={link.href} target={link.target} style={{color: "#546E7A"}} {...linkProps}>{rs}</Link>;
+      rs = <Link to={link.href} target={link.target} style={{color: "#546E7A"}} {...linkProps}>{rs}</Link>
    }
 
-   if (tooltip)
+   if(tooltip)
    {
-      let placement = tooltip.placement ? tooltip.placement.toLowerCase() : "bottom";
+      let placement = tooltip.placement ? tooltip.placement.toLowerCase() : "bottom"
 
       // @ts-ignore - placement possible values
-      if (tooltip.blockData)
-      {
-         // @ts-ignore - special case for composite type block...
-         rs = <Tooltip title={
-            <Box sx={{width: "200px"}}>
-               <CompositeWidget widgetMetaData={metaData} data={tooltip?.blockData} />
-            </Box>
-         }>{rs}</Tooltip>;
-      }
-      else
-      {
-         // @ts-ignore - placement possible values
-         rs = <Tooltip title={tooltip.title} placement={placement}>{rs}</Tooltip>;
-      }
+      rs = <Tooltip title={tooltip.title} placement={placement}>{rs}</Tooltip>
    }
 
    return (rs);

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

@@ -20,7 +20,6 @@
  */
 
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import {CompositeData} from "qqq/components/widgets/CompositeWidget";
 
 
 export interface BlockData
@@ -30,19 +29,16 @@ export interface BlockData
 
    tooltip?: BlockTooltip;
    link?: BlockLink;
-   tooltipMap?: { [slot: string]: BlockTooltip };
-   linkMap?: { [slot: string]: BlockLink };
+   tooltipMap?: {[slot: string]: BlockTooltip};
+   linkMap?: {[slot: string]: BlockLink};
 
    values: any;
    styles?: any;
-
-   conditional?: string;
 }
 
 
 export interface BlockTooltip
 {
-   blockData?: CompositeData;
    title: string | JSX.Element;
    placement: string;
 }
@@ -59,6 +55,5 @@ export interface StandardBlockComponentProps
 {
    widgetMetaData: QWidgetMetaData;
    data: BlockData;
-   actionCallback?: (blockData: BlockData, eventValues?: {[name: string]: any}) => boolean;
 }
 

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

@@ -1,86 +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 Box from "@mui/material/Box";
-import Icon from "@mui/material/Icon";
-import {standardWidth} from "qqq/components/buttons/DefaultButtons";
-import MDButton from "qqq/components/legacy/MDButton";
-import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
-import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
-import React from "react";
-
-
-/*******************************************************************************
- ** Block that renders ... a button...
- **
- *******************************************************************************/
-export default function ButtonBlock({widgetMetaData, data, actionCallback}: StandardBlockComponentProps): JSX.Element
-{
-   const startIcon = data.values.startIcon?.name ? <Icon>{data.values.startIcon.name}</Icon> : null;
-   const endIcon = data.values.endIcon?.name ? <Icon>{data.values.endIcon.name}</Icon> : null;
-
-   function onClick()
-   {
-      if (actionCallback)
-      {
-         actionCallback(data, data.values);
-      }
-      else
-      {
-         console.log("ButtonBlock onClick with no actionCallback present, so, noop");
-      }
-   }
-
-   let buttonVariant: "gradient" | "outlined" | "text" = "gradient";
-   if (data.styles?.format == "outlined")
-   {
-      buttonVariant = "outlined";
-   }
-   else if (data.styles?.format == "text")
-   {
-      buttonVariant = "text";
-   }
-   else if (data.styles?.format == "filled")
-   {
-      buttonVariant = "gradient";
-   }
-
-   // todo - button colors... but to do RGB's, might need to move away from MDButton?
-
-   return (
-      <BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
-         <Box mx={1} my={1} minWidth={standardWidth}>
-            <MDButton
-               type="button"
-               variant={buttonVariant}
-               color="dark"
-               size="small"
-               fullWidth
-               startIcon={startIcon}
-               endIcon={endIcon}
-               onClick={onClick}
-            >
-               {data.values.label ?? "Button"}
-            </MDButton>
-         </Box>
-      </BlockElementWrapper>
-   );
-}

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

@@ -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 Box from "@mui/material/Box";
-import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
-import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
-import DumpJsonBox from "qqq/utils/DumpJsonBox";
-import React from "react";
-
-/*******************************************************************************
- ** Block that renders ... an image tag
- **
- ** <audio src=${path} ${autoPlay} ${showControls} />
- *******************************************************************************/
-export default function AudioBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
-{
-   let imageStyle: any = {};
-
-   if(data.styles?.width)
-   {
-      imageStyle.width = data.styles?.width;
-   }
-
-   if(data.styles?.height)
-   {
-      imageStyle.height = data.styles?.height;
-   }
-
-   if(data.styles?.bordered)
-   {
-      imageStyle.border = "1px solid #C0C0C0";
-      imageStyle.borderRadius = "0.5rem";
-   }
-
-
-   return (
-      <BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
-         <img src={data.values?.path} alt={data.values?.alt} style={imageStyle} />
-      </BlockElementWrapper>
-   );
-}

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

@@ -1,139 +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 Box from "@mui/material/Box";
-import QDynamicFormField from "qqq/components/forms/DynamicFormField";
-import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
-import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
-import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
-import React, {SyntheticEvent, useState} from "react";
-
-/*******************************************************************************
- ** Block that renders ... a text input
- **
- *******************************************************************************/
-export default function InputFieldBlock({widgetMetaData, data, actionCallback}: StandardBlockComponentProps): JSX.Element
-{
-   const [blurCount, setBlurCount] = useState(0)
-
-   const fieldMetaData = new QFieldMetaData(data.values.fieldMetaData);
-   const dynamicField = DynamicFormUtils.getDynamicField(fieldMetaData);
-
-   let autoFocus = data.values.autoFocus as boolean
-   let value = data.values.value;
-   if(value == null || value == undefined)
-   {
-      value = "";
-   }
-
-   ////////////////////////////////////////////////////////////////////////////////
-   // for an autoFocus field...                                                  //
-   // we're finding that if we blur it when clicking an action button, that      //
-   // an un-desirable "now it's been touched, so show an error" happens.         //
-   // so let us remove the default blur handler, for the first (auto) focus/blur //
-   // cycle, and we seem to have a better time.                                  //
-   ////////////////////////////////////////////////////////////////////////////////
-   let dynamicFormFieldRest: {onBlur?: any, sx?: any} = {}
-   if(autoFocus && blurCount == 0)
-   {
-      dynamicFormFieldRest.onBlur = (event: React.SyntheticEvent) =>
-      {
-         event.stopPropagation();
-         event.preventDefault();
-         setBlurCount(blurCount + 1);
-      }
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function eventHandler(event: KeyboardEvent)
-   {
-      if(data.values.submitOnEnter && event.key == "Enter")
-      {
-         // @ts-ignore target.value...
-         const inputValue = event.target.value?.trim()
-
-         // todo - make this behavior opt-in for inputBlocks?
-         if(inputValue && `${inputValue}`.startsWith("->"))
-         {
-            const actionCode = inputValue.substring(2);
-            if(actionCallback)
-            {
-               actionCallback(data, {actionCode: actionCode, _fieldToClearIfError: fieldMetaData.name});
-
-               ///////////////////////////////////////////////////////
-               // return, so we don't submit the actionCode as text //
-               ///////////////////////////////////////////////////////
-               return;
-            }
-         }
-
-         if(fieldMetaData.isRequired && inputValue == "")
-         {
-            console.log("input field is required, but missing value, so not submitting");
-            return;
-         }
-
-         if(actionCallback)
-         {
-            console.log("InputFieldBlock calling actionCallback for submitOnEnter");
-
-            let values: {[name: string]: any} = {};
-            values[fieldMetaData.name] = inputValue;
-
-            actionCallback(data, values);
-         }
-         else
-         {
-            console.log("InputFieldBlock was set as submitOnEnter, but no actionCallback was present, so, noop");
-         }
-      }
-   }
-
-   const labelElement = <Box fontSize="1rem" fontWeight="500" marginBottom="0.25rem">
-      <label htmlFor={fieldMetaData.name}>{fieldMetaData.label}</label>
-   </Box>
-
-   return (
-      <Box mt="0.5rem">
-         <BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
-            <>
-               {labelElement}
-               <QDynamicFormField
-                  name={fieldMetaData.name}
-                  displayFormat={null}
-                  label=""
-                  placeholder={data.values?.placeholder}
-                  backgroundColor="#FFFFFF"
-                  formFieldObject={dynamicField}
-                  type={fieldMetaData.type}
-                  value={value}
-                  autoFocus={autoFocus}
-                  onKeyUp={eventHandler}
-                  {...dynamicFormFieldRest} />
-            </>
-         </BlockElementWrapper>
-      </Box>
-   );
-}

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

@@ -41,7 +41,7 @@ export default function NumberIconBadgeBlock({widgetMetaData, data}: StandardBlo
          {
             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>
+               <Icon style={{color: data.styles.color, fontSize: "1rem", position: "relative", top: "3px"}}>{data.values.iconName}</Icon>
             </BlockElementWrapper>
          }
       </div>);

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

@@ -19,12 +19,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import Box from "@mui/material/Box";
-import Icon from "@mui/material/Icon";
 import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
 import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
-import ProcessWidgetBlockUtils from "qqq/pages/processes/ProcessWidgetBlockUtils";
-import React from "react";
 
 /*******************************************************************************
  ** Block that renders ... just some text.
@@ -33,132 +29,9 @@ import React from "react";
  *******************************************************************************/
 export default function TextBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
 {
-   let color = "rgba(0, 0, 0, 0.87)";
-   if (data.styles?.color)
-   {
-      color = ProcessWidgetBlockUtils.processColorFromStyleMap(data.styles.color);
-   }
-
-   let boxStyle = {};
-   if (data.styles?.format == "alert")
-   {
-      boxStyle =
-         {
-            border: `1px solid ${color}`,
-            background: `${color}40`,
-            padding: "0.5rem",
-            borderRadius: "0.5rem",
-         };
-   }
-   else if (data.styles?.format == "banner")
-   {
-      boxStyle =
-         {
-            background: `${color}40`,
-            padding: "0.5rem",
-         };
-   }
-
-   let fontSize = "1rem";
-   if (data.styles?.size)
-   {
-      switch (data.styles.size.toLowerCase())
-      {
-         case "largest":
-            fontSize = "3rem";
-            break;
-         case "headline":
-            fontSize = "2rem";
-            break;
-         case "title":
-            fontSize = "1.5rem";
-            break;
-         case "body":
-            fontSize = "1rem";
-            break;
-         case "smallest":
-            fontSize = "0.75rem";
-            break;
-         default:
-         {
-            if (data.styles.size.match(/^\d+$/))
-            {
-               fontSize = `${data.styles.size}px`;
-            }
-            else
-            {
-               fontSize = "1rem";
-            }
-         }
-      }
-   }
-
-   let fontWeight = "400";
-   if (data.styles?.weight)
-   {
-      switch (data.styles.weight.toLowerCase())
-      {
-         case "thin":
-         case "100":
-            fontWeight = "100";
-            break;
-         case "extralight":
-         case "200":
-            fontWeight = "200";
-            break;
-         case "light":
-         case "300":
-            fontWeight = "300";
-            break;
-         case "normal":
-         case "400":
-            fontWeight = "400";
-            break;
-         case "medium":
-         case "500":
-            fontWeight = "500";
-            break;
-         case "semibold":
-         case "600":
-            fontWeight = "600";
-            break;
-         case "bold":
-         case "700":
-            fontWeight = "700";
-            break;
-         case "extrabold":
-         case "800":
-            fontWeight = "800";
-            break;
-         case "black":
-         case "900":
-            fontWeight = "900";
-            break;
-      }
-   }
-
-   const text = data.values.interpolatedText ?? data.values.text;
-   const lines = text.split("\n");
-
-   const startIcon = data.values.startIcon?.name ? <Icon>{data.values.startIcon.name}</Icon> : null;
-   const endIcon = data.values.endIcon?.name ? <Icon>{data.values.endIcon.name}</Icon> : null;
-
    return (
       <BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
-         <Box display="inline-block" lineHeight="1.2" sx={boxStyle}>
-            <span style={{fontSize: fontSize, color: color, fontWeight: fontWeight}}>
-               {lines.map((line: string, index: number) =>
-                  (
-                     <div key={index}>
-                        <>
-                           {index == 0 && startIcon ? {startIcon} : null}
-                           {line}
-                           {index == lines.length - 1 && endIcon ? {endIcon} : null}
-                        </>
-                     </div>
-                  ))
-               }</span>
-         </Box>
+         <span style={{fontSize: "1.000rem"}}>{data.values.text}</span>
       </BlockElementWrapper>
    );
 }

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

@@ -58,7 +58,7 @@ export default function UpOrDownNumberBlock({widgetMetaData, data}: StandardBloc
 
    return (
       <>
-         <div style={{display: "flex", flexDirection: data.styles.isStacked ? "column" : "row", alignItems: data.styles.isStacked ? "flex-end" : "baseline", marginLeft: "auto"}}>
+         <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">

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

@@ -50,7 +50,6 @@ 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/ace";
 import "ace-builds/src-noconflict/mode-java";
 import "ace-builds/src-noconflict/mode-javascript";
 import "ace-builds/src-noconflict/mode-json";

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

@@ -19,16 +19,13 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import Box from "@mui/material/Box";
 import Divider from "@mui/material/Divider";
 
 
 function DividerWidget(): JSX.Element
 {
    return (
-      <Box pl={3} pt={3} pb={3} width="100%">
-         <Divider sx={{width: "100%", height: "1px", background: "grey"}} />
-      </Box>
+      <Divider sx={{padding: "1px", background: "red"}}/>
    );
 }
 

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

@@ -39,9 +39,9 @@ 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 {buttonSX, unborderedButtonSX} from "qqq/components/widgets/misc/ReportSetupWidget";
 import Widget, {HeaderToggleComponent} from "qqq/components/widgets/Widget";
 import {PivotObjectKey, PivotTableDefinition, PivotTableFunction, pivotTableFunctionLabels, PivotTableGroupBy, PivotTableValue} from "qqq/models/misc/PivotTableDefinitionModels";
 import QQueryColumns from "qqq/models/query/QQueryColumns";
@@ -280,7 +280,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
       }
 
       modalPivotTableDefinition[rowsOrColumns].push(new PivotTableGroupBy());
-      validateForm();
+      validateForm()
       forceUpdate();
    }
 
@@ -292,7 +292,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
    {
       updateUsedGroupByFieldNames(modalPivotTableDefinition);
       updateUsedValueFieldNames(modalPivotTableDefinition);
-      validateForm();
+      validateForm()
       forceUpdate();
    }
 
@@ -308,7 +308,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
       }
 
       modalPivotTableDefinition.values.push(new PivotTableValue());
-      validateForm();
+      validateForm()
       forceUpdate();
    }
 
@@ -319,7 +319,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
    function removeValue(index: number)
    {
       modalPivotTableDefinition.values.splice(index, 1);
-      validateForm();
+      validateForm()
       forceUpdate();
    }
 
@@ -503,7 +503,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
    const labelAdditionalElementsRight: JSX.Element[] = [];
    if (isEditable)
    {
-      labelAdditionalElementsRight.push(<HeaderToggleComponent key="pivotTableHeader" disabled={editPopupDisabled} disabledTooltip={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle} label="Use Pivot Table?" getValue={() => enabled} onClickCallback={toggleEnabled} />);
+      labelAdditionalElementsRight.push(<HeaderToggleComponent disabled={editPopupDisabled} disabledTooltip={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle} label="Use Pivot Table?" getValue={() => enabled} onClickCallback={toggleEnabled} />);
    }
 
 
@@ -659,7 +659,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
       // 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)
+      if(!submitting && !attemptedSubmit)
       {
          return;
       }
@@ -703,7 +703,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
          // 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)
+         if(attemptedSubmit)
          {
             setAttemptedSubmit(false);
          }

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

@@ -28,7 +28,7 @@ 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, GridDensity, GridEventListener, GridRenderCellParams, GridRowParams, GridToolbarContainer, MuiEvent, useGridApiContext, useGridApiEventHandler} from "@mui/x-data-grid-pro";
+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 DataGridUtils from "qqq/utils/DataGridUtils";
 import HtmlUtils from "qqq/utils/HtmlUtils";
@@ -39,50 +39,45 @@ import {Link, useNavigate} from "react-router-dom";
 
 export interface ChildRecordListData extends WidgetData
 {
-   title?: string;
-   queryOutput?: { records: { values: any, displayValues?: any } [] };
-   childTableMetaData?: QTableMetaData;
-   tablePath?: string;
-   viewAllLink?: string;
-   totalRows?: number;
-   canAddChildRecord?: boolean;
-   defaultValuesForNewChildRecords?: { [fieldName: string]: any };
-   disabledFieldsForNewChildRecords?: { [fieldName: string]: any };
-   defaultValuesForNewChildRecordsFromParentFields?: { [fieldName: string]: string };
+   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,
-   gridOnly?: boolean,
-   gridDensity?: GridDensity,
-   parentRecord?: QRecord
+   widgetMetaData: QWidgetMetaData;
+   data: ChildRecordListData;
+   addNewRecordCallback?: () => void;
+   disableRowClick: boolean;
+   allowRecordEdit: boolean;
+   editRecordCallback?: (rowIndex: number) => void;
+   allowRecordDelete: boolean;
+   deleteRecordCallback?: (rowIndex: number) => void;
 }
 
 RecordGridWidget.defaultProps =
    {
       disableRowClick: false,
       allowRecordEdit: false,
-      allowRecordDelete: false,
-      gridOnly: false,
+      allowRecordDelete: false
    };
 
 const qController = Client.getInstance();
 
-function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRowClick, allowRecordEdit, editRecordCallback, allowRecordDelete, deleteRecordCallback, gridOnly, gridDensity, parentRecord}: Props): JSX.Element
+function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRowClick, allowRecordEdit, editRecordCallback, allowRecordDelete, deleteRecordCallback}: 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,19 +94,12 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
          {
             for (let i = 0; i < queryOutputRecords.length; i++)
             {
-               if (queryOutputRecords[i] instanceof QRecord)
-               {
-                  records.push(queryOutputRecords[i] as QRecord);
-               }
-               else
-               {
-                  records.push(new QRecord(queryOutputRecords[i]));
-               }
+               records.push(new QRecord(queryOutputRecords[i]));
             }
          }
 
-         const tableMetaData = data.childTableMetaData instanceof QTableMetaData ? data.childTableMetaData as QTableMetaData : new QTableMetaData(data.childTableMetaData);
-         const rows = DataGridUtils.makeRows(records, tableMetaData, undefined, true);
+         const tableMetaData = new QTableMetaData(data.childTableMetaData);
+         const rows = DataGridUtils.makeRows(records, tableMetaData, true);
 
          /////////////////////////////////////////////////////////////////////////////////
          // note - tablePath may be null, if the user doesn't have access to the table. //
@@ -122,20 +110,20 @@ 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--
                }
             }
          }
@@ -143,7 +131,7 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
          ////////////////////////////////////
          // add actions cell, if available //
          ////////////////////////////////////
-         if (allowRecordEdit || allowRecordDelete)
+         if(allowRecordEdit || allowRecordDelete)
          {
             columns.unshift({
                field: "_actions",
@@ -157,19 +145,19 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
                   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>;
+                  </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";
 
@@ -177,8 +165,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";
          }
@@ -188,19 +176,19 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
          setCsv(csv);
          setFileName(fileName);
       }
-   }, [JSON.stringify(data?.queryOutput)]);
+   }, [data]);
 
    ///////////////////
    // 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>
-      );
+      )
    }
 
    ///////////////////
@@ -212,10 +200,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.";
          }
@@ -224,21 +212,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" 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>
       );
    }
@@ -246,30 +234,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;
       }
-
-      const defaultValuesForNewChildRecords = data.defaultValuesForNewChildRecords || {};
-
-      ///////////////////////////////////////////////////////////////////////////////////////
-      // copy values from specified fields in the parent record down into the child record //
-      ///////////////////////////////////////////////////////////////////////////////////////
-      if (data.defaultValuesForNewChildRecordsFromParentFields)
-      {
-         for (let childField in data.defaultValuesForNewChildRecordsFromParentFields)
-         {
-            const parentField = data.defaultValuesForNewChildRecordsFromParentFields[childField];
-            defaultValuesForNewChildRecords[childField] = parentRecord?.values?.get(parentField);
-         }
-      }
-
-      labelAdditionalComponentsRight.push(new AddNewRecordButton(data.childTableMetaData, defaultValuesForNewChildRecords, "Add new", disabledFields, addNewRecordCallback));
+      labelAdditionalComponentsRight.push(new AddNewRecordButton(data.childTableMetaData, data.defaultValuesForNewChildRecords, "Add new", disabledFields, addNewRecordCallback))
    }
 
 
@@ -278,16 +251,16 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
    /////////////////////////////////////////////////////////////////
    const handleRowClick = (params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) =>
    {
-      if (disableRowClick)
+      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]}`;
             DataGridUtils.handleRowClick(tablePath, event, gridMouseDownX, gridMouseDownY, navigate, instance);
@@ -303,7 +276,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);
@@ -322,62 +295,6 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
       return (<GridToolbarContainer />);
    }
 
-   let containerPadding = -3;
-   if (data?.isInProcess)
-   {
-      containerPadding = 0;
-   }
-
-
-   const grid = (
-      <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={gridDensity ?? "standard"}
-         // loading={loading}
-         // filterModel={filterModel}
-         // onFilterModelChange={handleFilterChange}
-         // columnVisibilityModel={columnVisibilityModel}
-         // onColumnVisibilityModelChange={handleColumnVisibilityChange}
-         // onColumnOrderChange={handleColumnOrderChange}
-         // onSelectionModelChange={selectionChanged}
-         // onSortModelChange={handleSortChange}
-         // sortingOrder={[ "asc", "desc" ]}
-         // sortModel={columnSortModel}
-      />
-   );
-
-   if (gridOnly)
-   {
-      return (grid);
-   }
 
    return (
       <Widget
@@ -387,10 +304,49 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
          labelAdditionalComponentsRight={labelAdditionalComponentsRight}
          labelBoxAdditionalSx={{position: "relative", top: "-0.375rem"}}
       >
-         <Box mx={containerPadding} mb={containerPadding}>
-            <Box>
-               {grid}
-            </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}
+               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>
       </Widget>
    );

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

@@ -22,8 +22,6 @@
 
 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";
@@ -44,17 +42,15 @@ import Client from "qqq/utils/qqq/Client";
 import FilterUtils from "qqq/utils/qqq/FilterUtils";
 import React, {useContext, useEffect, useRef, useState} from "react";
 
-interface FilterAndColumnsSetupWidgetProps
+interface ReportSetupWidgetProps
 {
-   isEditable: boolean,
-   widgetMetaData: QWidgetMetaData,
-   widgetData: any,
-   recordValues: { [name: string]: any },
-   onSaveCallback?: (values: { [name: string]: any }) => void,
-   label?: string
+   isEditable: boolean;
+   widgetMetaData: QWidgetMetaData;
+   recordValues: {[name: string]: any};
+   onSaveCallback?: (values: {[name: string]: any}) => void;
 }
 
-FilterAndColumnsSetupWidget.defaultProps = {
+ReportSetupWidget.defaultProps = {
    onSaveCallback: null
 };
 
@@ -84,16 +80,11 @@ 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, label}: FilterAndColumnsSetupWidgetProps): JSX.Element
+export default function ReportSetupWidget({isEditable, widgetMetaData, recordValues, onSaveCallback}: ReportSetupWidgetProps): JSX.Element
 {
    const [modalOpen, setModalOpen] = useState(false);
-   const [hideColumns] = useState(widgetData?.hideColumns);
-   const [hidePreview] = useState(widgetData?.hidePreview);
    const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
 
-   const [filterFieldName] = useState(widgetData?.filterFieldName ?? "queryFilterJson");
-   const [columnsFieldName] = useState(widgetData?.columnsFieldName ?? "columnsJson");
-
    const [alertContent, setAlertContent] = useState(null as string);
 
    //////////////////////////////////////////////////////////////////////////////////////////////////
@@ -110,45 +101,18 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
    /////////////////////////////
    // load values from record //
    /////////////////////////////
-   let columns: QQueryColumns = null;
+   let queryFilter = recordValues["queryFilterJson"] && JSON.parse(recordValues["queryFilterJson"]) as QQueryFilter;
    let usingDefaultEmptyFilter = false;
-   let queryFilter = recordValues[filterFieldName] && JSON.parse(recordValues[filterFieldName]) as QQueryFilter;
-   const defaultFilterFields = widgetData?.filterDefaultFieldNames;
-   if (!queryFilter)
+   if(!queryFilter)
    {
       queryFilter = new QQueryFilter();
-      if (defaultFilterFields?.length == 0)
-      {
-         usingDefaultEmptyFilter = true;
-      }
-   }
-   else
-   {
-      queryFilter = Object.assign(new QQueryFilter(), queryFilter);
+      usingDefaultEmptyFilter = true;
    }
 
-   //////////////////////////////////////////////////////////////////////////////////////////////////////
-   // if there are default fields from which a query should be seeded, add/update the filter with them //
-   //////////////////////////////////////////////////////////////////////////////////////////////////////
-   if (defaultFilterFields?.length > 0)
+   let columns: QQueryColumns = null;
+   if(recordValues["columnsJson"])
    {
-      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[columnsFieldName])
-   {
-      columns = QQueryColumns.buildFromJSON(recordValues[columnsFieldName]);
+      columns = QQueryColumns.buildFromJSON(recordValues["columnsJson"]);
    }
 
    //////////////////////////////////////////////////////////////////////
@@ -156,28 +120,19 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
    //////////////////////////////////////////////////////////////////////
    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)
+      if (recordValues["tableName"] && (tableMetaData == null || tableMetaData.name != recordValues["tableName"]))
       {
          (async () =>
          {
-            const tableMetaData = await qController.loadTableMetaData(tableName);
+            const tableMetaData = await qController.loadTableMetaData(recordValues["tableName"])
             setTableMetaData(tableMetaData);
 
             const queryFilterForFrontend = Object.assign({}, queryFilter);
-            await FilterUtils.cleanupValuesInFilerFromQueryString(qController, tableMetaData, queryFilterForFrontend);
-            setFrontendQueryFilter(queryFilterForFrontend);
+            await FilterUtils.cleanupValuesInFilerFromQueryString(qController, tableMetaData, queryFilterForFrontend)
+            setFrontendQueryFilter(queryFilterForFrontend)
          })();
       }
-   }, [JSON.stringify(recordValues)]);
+   }, [recordValues]);
 
 
    /*******************************************************************************
@@ -185,27 +140,8 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
     *******************************************************************************/
    function openEditor()
    {
-      let missingRequiredFields = [] as string[];
-      widgetData?.filterDefaultFieldNames?.forEach((fieldName: string) =>
+      if(recordValues["tableName"])
       {
-         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);
       }
    }
@@ -216,7 +152,7 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
     *******************************************************************************/
    function saveClicked()
    {
-      if (!onSaveCallback)
+      if(!onSaveCallback)
       {
          console.log("onSaveCallback was not defined");
          return;
@@ -234,10 +170,7 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
       setFrontendQueryFilter(view.queryFilter);
       const filter = FilterUtils.prepQueryFilterForBackend(tableMetaData, view.queryFilter);
 
-      const rs: { [key: string]: any } = {};
-      rs[filterFieldName] = JSON.stringify(filter);
-      rs[columnsFieldName] = JSON.stringify(view.queryColumns);
-      onSaveCallback(rs);
+      onSaveCallback({queryFilterJson: JSON.stringify(filter), columnsJson: JSON.stringify(view.queryColumns)});
 
       closeEditor();
    }
@@ -248,7 +181,7 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
     *******************************************************************************/
    function closeEditor(event?: {}, reason?: "backdropClick" | "escapeKeyDown")
    {
-      if (reason == "backdropClick" || reason == "escapeKeyDown")
+      if(reason == "backdropClick" || reason == "escapeKeyDown")
       {
          return;
       }
@@ -262,9 +195,9 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
     *******************************************************************************/
    function renderColumn(column: Column): JSX.Element
    {
-      const [field, table] = FilterUtils.getField(tableMetaData, column.name);
+      const [field, table] = FilterUtils.getField(tableMetaData, column.name)
 
-      if (!column || !column.isVisible || column.name == "__check__" || !field)
+      if(!column || !column.isVisible || column.name == "__check__" || !field)
       {
          return (<React.Fragment />);
       }
@@ -280,11 +213,11 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
    /*******************************************************************************
     **
     *******************************************************************************/
-   function mayShowQuery(): boolean
+   function mayShowQueryPreview(): boolean
    {
-      if (tableMetaData)
+      if(tableMetaData)
       {
-         if (frontendQueryFilter?.criteria?.length > 0 || frontendQueryFilter?.subFilters?.length > 0)
+         if(frontendQueryFilter?.criteria?.length > 0 || frontendQueryFilter?.subFilters?.length > 0)
          {
             return (true);
          }
@@ -296,13 +229,13 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
    /*******************************************************************************
     **
     *******************************************************************************/
-   function mayShowColumns(): boolean
+   function mayShowColumnsPreview(): boolean
    {
-      if (tableMetaData)
+      if(tableMetaData)
       {
-         for (let i = 0; i < columns?.columns?.length; i++)
+         for(let i = 0; i<columns?.columns?.length; i++)
          {
-            if (columns.columns[i].isVisible && columns.columns[i].name != "__check__")
+            if(columns.columns[i].isVisible && columns.columns[i].name != "__check__")
             {
                return (true);
             }
@@ -336,17 +269,10 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
    // 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)
+   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} />);
-      }
+      labelAdditionalElementsRight.push(<HeaderLinkButtonComponent label="Edit Filters and Columns" onClickCallback={openEditor} disabled={tableMetaData == null} disabledTooltip={selectTableFirstTooltipTitle} />)
    }
 
 
@@ -363,15 +289,15 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
          </Collapse>
          <Box pt="0.5rem">
             <Box display="flex" justifyContent="space-between" alignItems="center">
-               <h5>{label ?? "Query Filter"}</h5>
-               <Box fontSize="0.75rem" fontWeight="700">{mayShowQuery() && getCurrentSortIndicator(frontendQueryFilter, tableMetaData, null)}</Box>
+               <h5>Query Filter</h5>
+               <Box fontSize="0.75rem" fontWeight="700">{mayShowQueryPreview() && getCurrentSortIndicator(frontendQueryFilter, tableMetaData, null)}</Box>
             </Box>
             {
-               mayShowQuery() &&
+               mayShowQueryPreview() &&
                <AdvancedQueryPreview tableMetaData={tableMetaData} queryFilter={frontendQueryFilter} isEditable={false} isQueryTooComplex={frontendQueryFilter.subFilters?.length > 0} removeCriteriaByIndexCallback={null} />
             }
             {
-               !mayShowQuery() &&
+               !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 &&
@@ -380,51 +306,34 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
                      </Tooltip>
                   }
                   {
-                     !isEditable && <Box color={colors.gray.main}>No filters are configured.</Box>
+                     !isEditable && <Box color={colors.gray.main}>Your report has no filters.</Box>
                   }
                </Box>
             }
          </Box>
-         {!hideColumns && (
-            <Box pt="1rem">
-               <h5>Columns</h5>
-               <Box display="flex" flexWrap="wrap" fontSize="1rem">
-                  {
-                     mayShowColumns() && columns &&
-                     columns.columns.map((column, i) => <React.Fragment key={`column-${i}`}>{renderColumn(column)}</React.Fragment>)
-                  }
-                  {
-                     !mayShowColumns() &&
-                     <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 pt="1rem">
+            <h5>Columns</h5>
+            <Box display="flex" flexWrap="wrap" fontSize="1rem">
+               {
+                  mayShowColumnsPreview() &&
+                  columns.columns.map((column, i) => <React.Fragment key={i}>{renderColumn(column)}</React.Fragment>)
+               }
+               {
+                  !mayShowColumnsPreview() &&
+                  <Box width="100%" sx={{fontSize: "1rem", background: "#FFFFFF"}} minHeight={"2.375rem"} p={"0.5rem"} pb={"0.125rem"}>
+                     {
+                        isEditable &&
+                        <Tooltip title={selectTableFirstTooltipTitle}>
+                           <span><Button disabled={!recordValues["tableName"]} sx={unborderedButtonSX} onClick={openEditor}>+ Add Columns</Button></span>
+                        </Tooltip>
+                     }
+                     {
+                        !isEditable && <Box color={colors.gray.main}>Your report has no columns.</Box>
+                     }
+                  </Box>
+               }
             </Box>
-         )}
-         {!hidePreview && !isEditable && frontendQueryFilter && tableMetaData && (
-            <Box pt="1rem">
-               <h5>Preview</h5>
-               <RecordQuery
-                  allowVariables={widgetData?.allowVariables}
-                  ref={recordQueryRef}
-                  table={tableMetaData}
-                  isPreview={true}
-                  usage="reportSetup"
-                  isModal={true}
-                  initialQueryFilter={frontendQueryFilter}
-                  initialColumns={columns}
-               />
-            </Box>
-         )}
+         </Box>
          {
             modalOpen &&
             <Modal open={modalOpen} onClose={(event, reason) => closeEditor(event, reason)}>
@@ -440,7 +349,6 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
                         }
                         {
                            tableMetaData && <RecordQuery
-                              allowVariables={widgetData?.allowVariables}
                               ref={recordQueryRef}
                               table={tableMetaData}
                               usage="reportSetup"

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

@@ -393,7 +393,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
    }
 
    return (
-      <Grid container className="scriptViewer" my={-3} mx={-3} pt={4} width={"calc(100% + 3rem)"}>
+      <Grid container className="scriptViewer" m={-2} pt={4} width={"calc(100% + 2rem)"}>
          <Grid item xs={12}>
             <Box>
                {
@@ -530,7 +530,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
                                  </TabPanel>
 
                                  <TabPanel index={2} value={selectedTab}>
-                                    <Box sx={{height: "455px"}} px={2} pt={1}>
+                                    <Box sx={{height: "455px"}} px={2} pb={1}>
                                        <ScriptTestForm scriptId={scriptId}
                                           scriptType={scriptTypeRecord}
                                           tableName={associatedScriptTableName}
@@ -543,7 +543,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
                                  </TabPanel>
 
                                  <TabPanel index={3} value={selectedTab}>
-                                    <Box sx={{height: "455px"}} px={2} pt={1}>
+                                    <Box sx={{height: "455px"}} px={2} pb={1}>
                                        <ScriptDocsForm helpText={scriptTypeRecord?.values.get("helpText")} exampleCode={scriptTypeRecord?.values.get("sampleCode")} />
                                     </Box>
                                  </TabPanel>

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

@@ -19,14 +19,19 @@
  */
 
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import {Box, tooltipClasses, TooltipProps} from "@mui/material";
+import {tooltipClasses, TooltipProps} from "@mui/material";
 import Autocomplete from "@mui/material/Autocomplete";
+import Box from "@mui/material/Box";
 import Icon from "@mui/material/Icon";
 import {styled} from "@mui/material/styles";
 import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
 import TableContainer from "@mui/material/TableContainer";
+import TableRow from "@mui/material/TableRow";
 import Tooltip from "@mui/material/Tooltip";
 import parse from "html-react-parser";
+import React, {useEffect, useMemo, useState} from "react";
+import {useAsyncDebounce, useExpanded, useGlobalFilter, usePagination, useSortBy, useTable} from "react-table";
 import colors from "qqq/assets/theme/base/colors";
 import MDInput from "qqq/components/legacy/MDInput";
 import MDPagination from "qqq/components/legacy/MDPagination";
@@ -38,8 +43,6 @@ 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
 {
@@ -103,17 +106,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++)
       {
@@ -126,7 +129,7 @@ function DataTable({
    }
 
    const columnsToMemo = [...table.columns];
-   if (showExpandColumn)
+   if(showExpandColumn)
    {
       widths.push("60px");
       columnsToMemo.push(
@@ -163,18 +166,18 @@ function DataTable({
                      })}
                   >
                      {/* float this icon to keep it "out of the flow" - in other words, to keep it from making the row taller than it otherwise would be... */}
-                     <Icon fontSize="medium" sx={{float: "left"}}>{row.isExpanded ? "expand_less" : "chevron_left"}</Icon>
+                     <Icon fontSize="medium" sx={{float: "left"}}>{row.isExpanded ? "expand_less" : "chevron_right"}</Icon>
                   </span>
                ) : null,
          },
       );
    }
 
-   if (table.columnHeaderTooltips)
+   if(table.columnHeaderTooltips)
    {
       for (let column of columnsToMemo)
       {
-         if (table.columnHeaderTooltips[column.accessor])
+         if(table.columnHeaderTooltips[column.accessor])
          {
             column.tooltip = table.columnHeaderTooltips[column.accessor];
          }
@@ -294,7 +297,7 @@ function DataTable({
    }
 
    let visibleFooterRows = 1;
-   if (expanded && expanded[`${table.rows.length - 1}`])
+   if(expanded && expanded[`${table.rows.length-1}`])
    {
       //////////////////////////////////////////////////
       // todo - should count how many are expanded... //
@@ -305,152 +308,156 @@ function DataTable({
    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"}
-            : {height: fixedHeight ? `${fixedHeight}px` : "auto", flexGrow: 1, overflowY: "scroll", scrollbarGutter: "stable", marginBottom: "-1px"};
+            : {flexGrow: 1, overflowY: "scroll", scrollbarGutter: "stable", marginBottom: "-1px"};
       }
 
       let innerBoxStyle = {};
-      if (fixedStickyLastRow && isFooter)
+      if(fixedStickyLastRow && isFooter)
       {
          innerBoxStyle = {overflowY: "auto", scrollbarGutter: "stable"};
       }
 
-      ///////////////////////////////////////////////////////////////////////////////////
-      // note - at one point, we had the table's sx including: whiteSpace: "nowrap"... //
-      ///////////////////////////////////////////////////////////////////////////////////
       return <Box sx={boxStyle}><Box sx={innerBoxStyle}>
-         <Table {...getTableProps()} component="div" sx={{display: "grid", gridTemplateRows: "auto", gridTemplateColumns: gridTemplateColumns}}>
+         <Table {...getTableProps()}>
             {
                includeHead && (
-                  headerGroups.map((headerGroup: any, i: number) => (
-                     headerGroup.headers.map((column: any) => (
-                        column.type !== "hidden" && (
-                           <DataTableHeadCell
-                              sx={{position: "sticky", top: 0, background: "white", zIndex: 10, alignItems: "flex-end"}}
-                              key={i++}
-                              {...column.getHeaderProps(isSorted && column.getSortByToggleProps())}
-                              align={column.align ? column.align : "left"}
-                              sorted={setSortedValue(column)}
-                              tooltip={column.tooltip}
-                           >
-                              {column.render("header")}
-                           </DataTableHeadCell>
-                        )
-                     ))
-                  ))
+                  <Box component="thead" sx={{position: "sticky", top: 0, background: "white", zIndex: 10}}>
+                     {headerGroups.map((headerGroup: any, i: number) => (
+                        <TableRow key={i} {...headerGroup.getHeaderGroupProps()} sx={{display: "grid", gridTemplateColumns: gridTemplateColumns}}>
+                           {headerGroup.headers.map((column: any) => (
+                              column.type !== "hidden" && (
+                                 <DataTableHeadCell
+                                    key={i++}
+                                    {...column.getHeaderProps(isSorted && column.getSortByToggleProps())}
+                                    align={column.align ? column.align : "left"}
+                                    sorted={setSortedValue(column)}
+                                    tooltip={column.tooltip}
+                                 >
+                                    {column.render("header")}
+                                 </DataTableHeadCell>
+                              )
+                           ))}
+                        </TableRow>
+                     ))}
+                  </Box>
                )
             }
-            {rows.map((row: any, key: any) =>
-            {
-               prepareRow(row);
-
-               let overrideNoEndBorder = false;
-
-               //////////////////////////////////////////////////////////////////////////////////
-               // don't do an end-border on nested rows - unless they're the last one in a set //
-               //////////////////////////////////////////////////////////////////////////////////
-               if (row.depth > 0)
+            <TableBody {...getTableBodyProps()}>
+               {rows.map((row: any, key: any) =>
                {
-                  overrideNoEndBorder = true;
-                  if (key + 1 < rows.length && rows[key + 1].depth == 0)
+                  prepareRow(row);
+
+                  let overrideNoEndBorder = false;
+
+                  //////////////////////////////////////////////////////////////////////////////////
+                  // don't do an end-border on nested rows - unless they're the last one in a set //
+                  //////////////////////////////////////////////////////////////////////////////////
+                  if(row.depth > 0)
                   {
-                     overrideNoEndBorder = false;
+                     overrideNoEndBorder = true;
+                     if(key + 1 < rows.length && rows[key + 1].depth == 0)
+                     {
+                        overrideNoEndBorder = false;
+                     }
                   }
-               }
 
-               ///////////////////////////////////////
-               // don't do end-border on the footer //
-               ///////////////////////////////////////
-               if (isFooter)
-               {
-                  overrideNoEndBorder = true;
-               }
+                  ///////////////////////////////////////
+                  // don't do end-border on the footer //
+                  ///////////////////////////////////////
+                  if(isFooter)
+                  {
+                     overrideNoEndBorder = true;
+                  }
 
-               let background = "initial";
-               if (isFooter)
-               {
-                  background = "#EEEEEE";
-               }
-               else if (row.depth > 0 || row.isExpanded)
-               {
-                  background = "#FAFAFA";
-               }
+                  let background = "initial";
+                  if(isFooter)
+                  {
+                     background = "#EEEEEE";
+                  }
+                  else if(row.depth > 0 || row.isExpanded)
+                  {
+                     background = "#FAFAFA";
+                  }
 
-               return (
-                  row.cells.map((cell: any) => (
-                     cell.column.type !== "hidden" && (
-                        <DataTableBodyCell
-                           key={key}
-                           sx={{verticalAlign: "top", background: background}}
-                           noBorder={noEndBorder || overrideNoEndBorder || row.isExpanded}
-                           depth={row.depth}
-                           align={cell.column.align ? cell.column.align : "left"}
-                           {...cell.getCellProps()}
-                        >
-                           {
-                              cell.column.type === "default" && (
-                                 cell.value && "number" === typeof cell.value ? (
-                                    <DefaultCell isFooter={isFooter}>{cell.value.toLocaleString()}</DefaultCell>
-                                 ) : (<DefaultCell isFooter={isFooter}>{cell.render("Cell")}</DefaultCell>)
-                              )
-                           }
-                           {
-                              cell.column.type === "htmlAndTooltip" && (
-                                 <DefaultCell isFooter={isFooter}>
-                                    <NoMaxWidthTooltip title={parse(row.values["tooltip"])}>
-                                       <Box>
-                                          {parse(cell.value)}
-                                       </Box>
-                                    </NoMaxWidthTooltip>
-                                 </DefaultCell>
-                              )
-                           }
-                           {
-                              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>
-                              )
-                           }
-                           {
-                              cell.column.type === "image" && row.values["imageTotal"] && (
-                                 <ImageCell imageUrl={row.values["imageUrl"]} label={row.values["imageLabel"]} total={row.values["imageTotal"].toLocaleString()} totalType={row.values["imageTotalType"]} />
-                              )
-                           }
-                           {
-                              cell.column.type === "image" && !row.values["imageTotal"] && (
-                                 <ImageCell imageUrl={row.values["imageUrl"]} label={row.values["imageLabel"]} />
-                              )
-                           }
-                           {
-                              (cell.column.id === "__expander") && cell.render("cell")
-                           }
-                        </DataTableBodyCell>
-                     )
-                  ))
-               );
-            })}
+                  return (
+                     <TableRow sx={{verticalAlign: "top", display: "grid", gridTemplateColumns: gridTemplateColumns, background: background}} key={key} {...row.getRowProps()}>
+                        {row.cells.map((cell: any) => (
+                           cell.column.type !== "hidden" && (
+                              <DataTableBodyCell
+                                 key={key}
+                                 noBorder={noEndBorder || overrideNoEndBorder || row.isExpanded}
+                                 depth={row.depth}
+                                 align={cell.column.align ? cell.column.align : "left"}
+                                 {...cell.getCellProps()}
+                              >
+                                 {
+                                    cell.column.type === "default" && (
+                                       cell.value && "number" === typeof cell.value ? (
+                                          <DefaultCell isFooter={isFooter}>{cell.value.toLocaleString()}</DefaultCell>
+                                       ) : (<DefaultCell isFooter={isFooter}>{cell.render("Cell")}</DefaultCell>)
+                                    )
+                                 }
+                                 {
+                                    cell.column.type === "htmlAndTooltip" && (
+                                       <DefaultCell isFooter={isFooter}>
+                                          <NoMaxWidthTooltip title={parse(row.values["tooltip"])}>
+                                             <Box>
+                                                {parse(cell.value)}
+                                             </Box>
+                                          </NoMaxWidthTooltip>
+                                       </DefaultCell>
+                                    )
+                                 }
+                                 {
+                                    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>
+                                    )
+                                 }
+                                 {
+                                    cell.column.type === "image" && row.values["imageTotal"] && (
+                                       <ImageCell imageUrl={row.values["imageUrl"]} label={row.values["imageLabel"]} total={row.values["imageTotal"].toLocaleString()} totalType={row.values["imageTotalType"]} />
+                                    )
+                                 }
+                                 {
+                                    cell.column.type === "image" && !row.values["imageTotal"] && (
+                                       <ImageCell imageUrl={row.values["imageUrl"]} label={row.values["imageLabel"]} />
+                                    )
+                                 }
+                                 {
+                                    (cell.column.id === "__expander") && cell.render("cell")
+                                 }
+                              </DataTableBodyCell>
+                           )
+                        ))}
+                     </TableRow>
+                  );
+               })}
+
+            </TableBody>
          </Table>
-      </Box></Box>;
+      </Box></Box>
    }
 
    return (
-      <TableContainer sx={{boxShadow: "none", height: (fixedHeight && !fixedStickyLastRow) ? `${fixedHeight}px` : "auto"}}>
+      <TableContainer sx={{boxShadow: "none", height: fixedHeight ? `${fixedHeight}px` : "auto"}}>
          {entriesPerPage && ((hidePaginationDropdown !== undefined && !hidePaginationDropdown) || canSearch) ? (
             <Box display="flex" justifyContent="space-between" alignItems="center" p={3}>
                {entriesPerPage && (hidePaginationDropdown === undefined || !hidePaginationDropdown) && (

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

@@ -1,96 +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 {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-import Modal from "@mui/material/Modal";
-import EntityForm from "qqq/components/forms/EntityForm";
-import Client from "qqq/utils/qqq/Client";
-import React, {useEffect, useReducer, useState} from "react";
-
-
-////////////////////////////////
-// structure of expected data //
-////////////////////////////////
-export interface ModalEditFormData
-{
-   tableName: string;
-   defaultValues?: { [key: string]: string };
-   disabledFields?: { [key: string]: boolean } | string[];
-   overrideHeading?: string;
-   onSubmitCallback?: (values: any, tableName: String) => void;
-   initialShowModalValue?: boolean;
-}
-
-const qController = Client.getInstance();
-
-function ModalEditForm({tableName, defaultValues, disabledFields, overrideHeading, onSubmitCallback, initialShowModalValue}: ModalEditFormData,): JSX.Element
-{
-   const [showModal, setShowModal] = useState(initialShowModalValue);
-   const [table, setTable] = useState(null as QTableMetaData);
-   const [, forceUpdate] = useReducer((x) => x + 1, 0);
-
-   useEffect(() =>
-   {
-      if (!tableName)
-      {
-         return;
-      }
-
-      (async () =>
-      {
-         const tableMetaData = await qController.loadTableMetaData(tableName);
-         setTable(tableMetaData);
-         forceUpdate();
-      })();
-   }, [tableName]);
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   const closeEditChildForm = (event: object, reason: string) =>
-   {
-      if (reason === "backdropClick" || reason === "escapeKeyDown")
-      {
-         return;
-      }
-
-      setShowModal(null);
-   };
-
-   return (
-      table && showModal &&
-      <Modal open={showModal as boolean} onClose={(event, reason) => closeEditChildForm(event, reason)}>
-         <div className="modalEditForm">
-            <EntityForm
-               isModal={true}
-               closeModalHandler={closeEditChildForm}
-               table={table}
-               defaultValues={defaultValues}
-               disabledFields={disabledFields}
-               onSubmitCallback={onSubmitCallback}
-               overrideHeading={overrideHeading}
-            />
-         </div>
-      </Modal>
-   );
-}
-
-export default ModalEditForm;

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

@@ -28,13 +28,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 +43,7 @@ import React, {useEffect, useState} from "react";
 export interface TableDataInput
 {
    columns: { [key: string]: any }[];
-   columnHeaderTooltips?: { [columnName: string]: string | JSX.Element };
+   columnHeaderTooltips?: { [columnName: string]: string | JSX.Element }
    rows: { [key: string]: any }[];
 }
 
@@ -63,7 +63,6 @@ interface Props
 }
 
 const qController = Client.getInstance();
-
 function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown, fixedStickyLastRow, fixedHeight, widgetMetaData}: Props): JSX.Element
 {
    const [qInstance, setQInstance] = useState(null as QInstance);
@@ -93,25 +92,41 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown,
                />
                : noRowsFoundHTML ?
                   <Box p={3} pt={0} pb={3} sx={{textAlign: "center"}}>
-                     <MDTypography variant="subtitle2" color="secondary" fontWeight="regular">
-                        {noRowsFoundHTML ? (parse(noRowsFoundHTML)) : "No rows found"}
+                     <MDTypography
+                        variant="subtitle2"
+                        color="secondary"
+                        fontWeight="regular"
+                     >
+                        {
+                           noRowsFoundHTML ? (
+                              parse(noRowsFoundHTML)
+                           ) : "No rows found"
+                        }
                      </MDTypography>
                   </Box>
                   :
                   <TableContainer sx={{boxShadow: "none"}}>
-                     <Table component="div" sx={{display: "grid", gridTemplateRows: "auto", gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr"}}>
-                        {Array(8).fill(0).map((_, i) =>
-                           <DataTableHeadCell key={`head-${i}`} sorted={false} width="auto" align="center">
-                              <Skeleton width="100%" />
-                           </DataTableHeadCell>
-                        )}
-                        {Array(5).fill(0).map((_, i) =>
-                           Array(8).fill(0).map((_, j) =>
-                              <DataTableBodyCell key={`cell-${i}-${j}`} align="center">
-                                 <DefaultCell isFooter={false}><Skeleton /></DefaultCell>
-                              </DataTableBodyCell>
-                           )
-                        )}
+                     <Table>
+                        <Box component="thead">
+                           <TableRow key="header">
+                              {Array(8).fill(0).map((_, i) =>
+                                 <DataTableHeadCell key={`head-${i}`} sorted={false} width="auto" align="center">
+                                    <Skeleton width="100%" />
+                                 </DataTableHeadCell>
+                              )}
+                           </TableRow>
+                        </Box>
+                        <TableBody>
+                           {Array(5).fill(0).map((_, i) =>
+                              <TableRow sx={{verticalAlign: "top"}} key={`row-${i}`}>
+                                 {Array(8).fill(0).map((_, j) =>
+                                    <DataTableBodyCell key={`cell-${i}-${j}`} align="center">
+                                       <DefaultCell isFooter={false}><Skeleton /></DefaultCell>
+                                    </DataTableBodyCell>
+                                 )}
+                              </TableRow>
+                           )}
+                        </TableBody>
                      </Table>
                   </TableContainer>
          }

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

@@ -23,6 +23,7 @@
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
 // @ts-ignore
 import {htmlToText} from "html-to-text";
+import React, {useContext, useEffect, useState} from "react";
 import QContext from "QContext";
 import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
 import TableCard from "qqq/components/widgets/tables/TableCard";
@@ -30,7 +31,6 @@ 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,7 +40,8 @@ interface Props
    isChild?: boolean;
 }
 
-TableWidget.defaultProps = {};
+TableWidget.defaultProps = {
+};
 
 function TableWidget(props: Props): JSX.Element
 {
@@ -85,7 +86,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,
                      {
@@ -104,7 +105,7 @@ function TableWidget(props: Props): JSX.Element
          setCsv(csv);
 
          const fileName = WidgetUtils.makeExportFileName(props.widgetData, props.widgetMetaData);
-         setFileName(fileName);
+         setFileName(fileName)
 
          console.log(`useEffect, setting fileName ${fileName}`);
       }
@@ -113,28 +114,24 @@ function TableWidget(props: Props): JSX.Element
 
    const onExportClick = () =>
    {
-      if (props.widgetData?.csvData)
+      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)
+      else 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)
-   {
-      labelAdditionalElementsLeft.push(WidgetUtils.generateLabelLink(props.widgetData?.linkText, props.widgetData?.linkURL));
-   }
-   if (props.widgetMetaData?.showExportButton)
+   if(props.widgetMetaData?.showExportButton)
    {
       labelAdditionalElementsLeft.push(WidgetUtils.generateExportButton(onExportClick));
    }
@@ -142,14 +139,14 @@ function TableWidget(props: Props): JSX.Element
    //////////////////////////////////////////////////////
    // look for column-header tooltips from helpContent //
    //////////////////////////////////////////////////////
-   const columnHeaderTooltips: { [columnName: string]: JSX.Element } = {};
+   const columnHeaderTooltips: {[columnName: string]: JSX.Element} = {}
    for (let column of props.widgetData?.columns ?? [])
    {
-      const helpRoles = ["ALL_SCREENS"];
+      const helpRoles = ["ALL_SCREENS"]
       const slotName = `columnHeader=${column.accessor}`;
       const showHelp = helpHelpActive || hasHelpContent(props.widgetMetaData?.helpContent?.get(slotName), helpRoles);
 
-      if (showHelp)
+      if(showHelp)
       {
          const formattedHelpContent = <HelpContent helpContents={props.widgetMetaData?.helpContent?.get(slotName)} roles={helpRoles} helpContentKey={`widget:${props.widgetMetaData?.name};slot:${slotName}`} />;
          columnHeaderTooltips[column.accessor] = formattedHelpContent;

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

@@ -19,7 +19,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {Box} from "@mui/material";
+import Box from "@mui/material/Box";
 import {Theme} from "@mui/material/styles";
 import colors from "qqq/assets/theme/base/colors";
 import {ReactNode} from "react";
@@ -30,14 +30,13 @@ interface Props
    children: ReactNode;
    noBorder?: boolean;
    align?: "left" | "right" | "center";
-   sx?: any;
 }
 
-function DataTableBodyCell({noBorder, align, sx, children}: Props): JSX.Element
+function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
 {
    return (
       <Box
-         component="div"
+         component="td"
          textAlign={align}
          py={1.5}
          px={1.5}
@@ -55,7 +54,7 @@ function DataTableBodyCell({noBorder, align, sx, children}: Props): JSX.Element
             },
             "&:last-child": {
                paddingRight: "1rem"
-            }, ...sx
+            }
          })}
       >
          <Box
@@ -73,7 +72,6 @@ function DataTableBodyCell({noBorder, align, sx, children}: Props): JSX.Element
 DataTableBodyCell.defaultProps = {
    noBorder: false,
    align: "left",
-   sx: {}
 };
 
 export default DataTableBodyCell;

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

@@ -44,14 +44,18 @@ function DataTableHeadCell({width, children, sorted, align, tooltip, ...rest}: P
 
    return (
       <Box
-         component="div"
+         component="th"
          width={width}
          py={1.5}
          px={1.5}
          sx={({palette: {light}, borders: {borderWidth}}: Theme) => ({
             borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`,
-            position: "sticky", top: 0, background: "white",
-            zIndex: 1 // so if body rows scroll behind it, they don't show through
+            "&:nth-of-type(1)": {
+               paddingLeft: "1rem"
+            },
+            "&:last-child": {
+               paddingRight: "1rem"
+            },
          })}
       >
          <Box

src/qqq/layouts/BaseLayout.tsx

@@ -21,12 +21,11 @@
 
 import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
 import Box from "@mui/material/Box";
+import {ReactNode, useEffect, useState} from "react";
 import Footer from "qqq/components/horseshoe/Footer";
 import NavBar from "qqq/components/horseshoe/NavBar";
-import {getBannerClassName, getBannerStyles, getBanner, makeBannerContent} from "qqq/components/misc/Banners";
 import DashboardLayout from "qqq/layouts/DashboardLayout";
 import Client from "qqq/utils/qqq/Client";
-import {ReactNode, useEffect, useState} from "react";
 
 interface Props
 {
@@ -81,34 +80,12 @@ function BaseLayout({stickyNavbar, children}: Props): JSX.Element
       return () => window.removeEventListener("resize", handleTabsOrientation);
    }, [tabsOrientation]);
 
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   function banner(): JSX.Element | null
-   {
-      const banner = getBanner(metaData?.branding, "QFMD_TOP_OF_BODY");
-
-      if (!banner)
-      {
-         return (null);
-      }
-
-      return (<Box className={getBannerClassName(banner)} sx={{display: "flex", justifyContent: "center", padding: "0.5rem", margin: "-20px", marginBottom: "20px", ...getBannerStyles(banner)}}>
-         {makeBannerContent(banner)}
-      </Box>);
-   }
-
-
    return (
-      <>
-         <DashboardLayout>
-            {banner()}
-            <NavBar />
-            <Box>{children}</Box>
-            <Footer company={{href: metaData?.branding?.companyUrl, name: metaData?.branding?.companyName}} />
-         </DashboardLayout>
-      </>
+      <DashboardLayout>
+         <NavBar />
+         <Box>{children}</Box>
+         <Footer company={{href: metaData?.branding?.companyUrl, name: metaData?.branding?.companyName}} />
+      </DashboardLayout>
    );
 }
 

src/qqq/models/fields/FieldPossibleValueProps.ts

@@ -1,38 +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 {QPossibleValue} from "@kingsrook/qqq-frontend-core/lib/model/QPossibleValue";
-
-/*******************************************************************************
- ** Properties attached to a (formik?) form field, to denote how it behaves as
- ** as related to a possible value source.
- *******************************************************************************/
-export interface FieldPossibleValueProps
-{
-   isPossibleValue?: boolean;
-   possibleValues?: QPossibleValue[];
-   initialDisplayValue: string | null;
-   fieldName?: string;
-   tableName?: string;
-   processName?: string;
-   possibleValueSourceName?: string;
-}
-

src/qqq/models/fields/FieldRules.ts

@@ -29,7 +29,6 @@ export interface FieldRule
    sourceField: string;
    action: FieldRuleAction;
    targetField: string;
-   targetWidget: string;
 }
 
 
@@ -47,6 +46,5 @@ export enum FieldRuleTrigger
  *******************************************************************************/
 export enum FieldRuleAction
 {
-   CLEAR_TARGET_FIELD = "CLEAR_TARGET_FIELD",
-   RELOAD_WIDGET = "RELOAD_WIDGET"
+   CLEAR_TARGET_FIELD = "CLEAR_TARGET_FIELD"
 }

src/qqq/models/processes/BulkLoadModels.ts

@@ -1,852 +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 {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-
-export type ValueType = "defaultValue" | "column";
-
-/***************************************************************************
- ** model of a single field that's part of a bulk-load profile/mapping
- ***************************************************************************/
-export class BulkLoadField
-{
-   field: QFieldMetaData;
-   tableStructure: BulkLoadTableStructure;
-
-   valueType: ValueType;
-   columnIndex?: number;
-   headerName?: string = null;
-   defaultValue?: any = null;
-   doValueMapping: boolean = false;
-
-   wideLayoutIndexPath: number[] = [];
-
-   error: string = null;
-   warning: string = null;
-
-   key: string;
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   constructor(field: QFieldMetaData, tableStructure: BulkLoadTableStructure, valueType: ValueType = "column", columnIndex?: number, headerName?: string, defaultValue?: any, doValueMapping?: boolean, wideLayoutIndexPath: number[] = [], error: string = null, warning: string = null)
-   {
-      this.field = field;
-      this.tableStructure = tableStructure;
-      this.valueType = valueType;
-      this.columnIndex = columnIndex;
-      this.headerName = headerName;
-      this.defaultValue = defaultValue;
-      this.doValueMapping = doValueMapping;
-      this.wideLayoutIndexPath = wideLayoutIndexPath;
-      this.error = error;
-      this.warning = warning;
-      this.key = new Date().getTime().toString();
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   public static clone(source: BulkLoadField): BulkLoadField
-   {
-      return (new BulkLoadField(source.field, source.tableStructure, source.valueType, source.columnIndex, source.headerName, source.defaultValue, source.doValueMapping, source.wideLayoutIndexPath, source.error, source.warning));
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   public getQualifiedName(): string
-   {
-      if (this.tableStructure.isMain)
-      {
-         return this.field.name;
-      }
-
-      return this.tableStructure.associationPath + "." + this.field.name;
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   public getQualifiedNameWithWideSuffix(): string
-   {
-      let wideLayoutSuffix = "";
-      if (this.wideLayoutIndexPath.length > 0)
-      {
-         wideLayoutSuffix = "." + this.wideLayoutIndexPath.map(i => i + 1).join(".");
-      }
-
-      if (this.tableStructure.isMain)
-      {
-         return this.field.name + wideLayoutSuffix;
-      }
-
-      return this.tableStructure.associationPath + "." + this.field.name + wideLayoutSuffix;
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   public getKey(): string
-   {
-      let wideLayoutSuffix = "";
-      if (this.wideLayoutIndexPath.length > 0)
-      {
-         wideLayoutSuffix = "." + this.wideLayoutIndexPath.map(i => i + 1).join(".");
-      }
-
-      if (this.tableStructure.isMain)
-      {
-         return this.field.name + wideLayoutSuffix + this.key;
-      }
-
-      return this.tableStructure.associationPath + "." + this.field.name + wideLayoutSuffix + this.key;
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   public getQualifiedLabel(): string
-   {
-      let wideLayoutSuffix = "";
-      if (this.wideLayoutIndexPath.length > 0)
-      {
-         wideLayoutSuffix = " (" + this.wideLayoutIndexPath.map(i => i + 1).join(", ") + ")";
-      }
-
-      if (this.tableStructure.isMain)
-      {
-         return this.field.label + wideLayoutSuffix;
-      }
-
-      return this.tableStructure.label + ": " + this.field.label + wideLayoutSuffix;
-   }
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   public isMany(): boolean
-   {
-      return this.tableStructure && this.tableStructure.isMany;
-   }
-}
-
-
-/***************************************************************************
- ** this is a type defined in qqq backend - a representation of a bulk-load
- ** table - e.g., how it fits into qqq - and of note - how child / association
- ** tables are nested too.
- ***************************************************************************/
-export interface BulkLoadTableStructure
-{
-   isMain: boolean;
-   isMany: boolean;
-   tableName: string;
-   label: string;
-   associationPath: string;
-   fields: QFieldMetaData[];
-   associations: BulkLoadTableStructure[];
-}
-
-
-/*******************************************************************************
- ** this is the internal data structure that the UI works with - but notably,
- ** is not how we send it to the backend or how backend saves profiles -- see
- ** BulkLoadProfile for that.
- *******************************************************************************/
-export class BulkLoadMapping
-{
-   fields: { [qualifiedName: string]: BulkLoadField } = {};
-   fieldsByTablePrefix: { [prefix: string]: { [qualifiedFieldName: string]: BulkLoadField } } = {};
-   tablesByPath: { [path: string]: BulkLoadTableStructure } = {};
-
-   requiredFields: BulkLoadField[] = [];
-   additionalFields: BulkLoadField[] = [];
-   unusedFields: BulkLoadField[] = [];
-
-   valueMappings: { [fieldName: string]: { [fileValue: string]: any } } = {};
-
-   hasHeaderRow: boolean;
-   layout: string;
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   constructor(tableStructure: BulkLoadTableStructure)
-   {
-      if (tableStructure)
-      {
-         this.processTableStructure(tableStructure);
-
-         if (!tableStructure.associations)
-         {
-            this.layout = "FLAT";
-         }
-      }
-
-      this.hasHeaderRow = true;
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   private processTableStructure(tableStructure: BulkLoadTableStructure)
-   {
-      const prefix = tableStructure.isMain ? "" : tableStructure.associationPath;
-      this.fieldsByTablePrefix[prefix] = {};
-      this.tablesByPath[prefix] = tableStructure;
-
-      for (let field of tableStructure.fields)
-      {
-         // todo delete this - backend should only give it to us if editable: if (field.isEditable)
-         {
-            const bulkLoadField = new BulkLoadField(field, tableStructure);
-            const qualifiedName = bulkLoadField.getQualifiedName();
-            this.fields[qualifiedName] = bulkLoadField;
-            this.fieldsByTablePrefix[prefix][qualifiedName] = bulkLoadField;
-
-            if (tableStructure.isMain && field.isRequired)
-            {
-               this.requiredFields.push(bulkLoadField);
-            }
-            else
-            {
-               this.unusedFields.push(bulkLoadField);
-            }
-         }
-      }
-
-      for (let associatedTableStructure of tableStructure.associations ?? [])
-      {
-         this.processTableStructure(associatedTableStructure);
-      }
-   }
-
-
-   /***************************************************************************
-    ** take a saved bulk load profile - and convert it into a working bulkLoadMapping
-    ** for the frontend to use!
-    ***************************************************************************/
-   public static fromSavedProfileRecord(tableStructure: BulkLoadTableStructure, profileRecord: QRecord): BulkLoadMapping
-   {
-      const bulkLoadProfile = JSON.parse(profileRecord.values.get("mappingJson")) as BulkLoadProfile;
-      return BulkLoadMapping.fromBulkLoadProfile(tableStructure, bulkLoadProfile);
-   }
-
-
-   /***************************************************************************
-    ** take a saved bulk load profile - and convert it into a working bulkLoadMapping
-    ** for the frontend to use!
-    ***************************************************************************/
-   public static fromBulkLoadProfile(tableStructure: BulkLoadTableStructure, bulkLoadProfile: BulkLoadProfile): BulkLoadMapping
-   {
-      const bulkLoadMapping = new BulkLoadMapping(tableStructure);
-
-      if (bulkLoadProfile.version == "v1")
-      {
-         bulkLoadMapping.hasHeaderRow = bulkLoadProfile.hasHeaderRow;
-         bulkLoadMapping.layout = bulkLoadProfile.layout;
-
-         ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-         // function to get a bulkLoadMapping field by its (full) name - whether that's in the required fields list,   //
-         // or it's an additional field, in which case, we'll go through the addField method to move what list it's in //
-         ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-         function getBulkLoadFieldMovingFromUnusedToActiveIfNeeded(bulkLoadMapping: BulkLoadMapping, name: string): BulkLoadField
-         {
-            let wideIndex: number = null;
-            if (name.match(/,\d+$/))
-            {
-               wideIndex = Number(name.match(/\d+$/));
-               name = name.replace(/,\d+$/, "");
-            }
-
-            for (let field of bulkLoadMapping.requiredFields)
-            {
-               if (field.getQualifiedName() == name)
-               {
-                  return (field);
-               }
-            }
-
-            for (let field of bulkLoadMapping.unusedFields)
-            {
-               if (field.getQualifiedName() == name)
-               {
-                  const addedField = bulkLoadMapping.addField(field, wideIndex);
-                  return (addedField);
-               }
-            }
-         }
-
-         //////////////////////////////////////////////////////////////////
-         // loop over fields in the profile - adding them to the mapping //
-         //////////////////////////////////////////////////////////////////
-         for (let bulkLoadProfileField of ((bulkLoadProfile.fieldList ?? []) as BulkLoadProfileField[]))
-         {
-            const bulkLoadField = getBulkLoadFieldMovingFromUnusedToActiveIfNeeded(bulkLoadMapping, bulkLoadProfileField.fieldName);
-            if (!bulkLoadField)
-            {
-               console.log(`Couldn't find bulk-load-field by name from profile record [${bulkLoadProfileField.fieldName}]`);
-               continue;
-            }
-
-            if ((bulkLoadProfileField.columnIndex != null && bulkLoadProfileField.columnIndex != undefined) || (bulkLoadProfileField.headerName != null && bulkLoadProfileField.headerName != undefined))
-            {
-               bulkLoadField.valueType = "column";
-               bulkLoadField.doValueMapping = bulkLoadProfileField.doValueMapping;
-               bulkLoadField.headerName = bulkLoadProfileField.headerName;
-               bulkLoadField.columnIndex = bulkLoadProfileField.columnIndex;
-
-               if (bulkLoadProfileField.valueMappings)
-               {
-                  bulkLoadMapping.valueMappings[bulkLoadProfileField.fieldName] = {};
-                  for (let fileValue in bulkLoadProfileField.valueMappings)
-                  {
-                     ////////////////////////////////////////////////////
-                     // frontend wants string values here, so, string. //
-                     ////////////////////////////////////////////////////
-                     bulkLoadMapping.valueMappings[bulkLoadProfileField.fieldName][String(fileValue)] = bulkLoadProfileField.valueMappings[fileValue];
-                  }
-               }
-            }
-            else
-            {
-               bulkLoadField.valueType = "defaultValue";
-               bulkLoadField.defaultValue = bulkLoadProfileField.defaultValue;
-            }
-         }
-
-         return (bulkLoadMapping);
-      }
-      else
-      {
-         throw ("Unexpected version for bulk load profile: " + bulkLoadProfile.version);
-      }
-   }
-
-
-   /***************************************************************************
-    ** take a working bulkLoadMapping from the frontend, and convert it to a
-    ** BulkLoadProfile for the backend / for us to save.
-    ***************************************************************************/
-   public toProfile(): { haveErrors: boolean, profile: BulkLoadProfile }
-   {
-      let haveErrors = false;
-      const profile = new BulkLoadProfile();
-
-      profile.version = "v1";
-      profile.hasHeaderRow = this.hasHeaderRow;
-      profile.layout = this.layout;
-
-      for (let bulkLoadField of [...this.requiredFields, ...this.additionalFields])
-      {
-         let fullFieldName = (bulkLoadField.tableStructure.isMain ? "" : bulkLoadField.tableStructure.associationPath + ".") + bulkLoadField.field.name;
-         if (bulkLoadField.wideLayoutIndexPath != null && bulkLoadField.wideLayoutIndexPath != undefined && bulkLoadField.wideLayoutIndexPath.length)
-         {
-            fullFieldName += "," + bulkLoadField.wideLayoutIndexPath.join(".");
-         }
-
-         bulkLoadField.error = null;
-         if (bulkLoadField.valueType == "column")
-         {
-            if (bulkLoadField.columnIndex == undefined || bulkLoadField.columnIndex == null)
-            {
-               haveErrors = true;
-               bulkLoadField.error = "You must select a column.";
-            }
-            else
-            {
-               const field: BulkLoadProfileField = {fieldName: fullFieldName, columnIndex: bulkLoadField.columnIndex, headerName: bulkLoadField.headerName, doValueMapping: bulkLoadField.doValueMapping};
-
-               if (this.valueMappings[fullFieldName])
-               {
-                  field.valueMappings = this.valueMappings[fullFieldName];
-               }
-
-               profile.fieldList.push(field);
-            }
-         }
-         else if (bulkLoadField.valueType == "defaultValue")
-         {
-            if (bulkLoadField.defaultValue == undefined || bulkLoadField.defaultValue == null || bulkLoadField.defaultValue == "")
-            {
-               haveErrors = true;
-               bulkLoadField.error = "A value is required.";
-            }
-            else
-            {
-               profile.fieldList.push({fieldName: fullFieldName, defaultValue: bulkLoadField.defaultValue});
-            }
-         }
-      }
-
-      return {haveErrors, profile};
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   public addField(bulkLoadField: BulkLoadField, specifiedWideIndex?: number): BulkLoadField
-   {
-      if (bulkLoadField.isMany() && this.layout == "WIDE")
-      {
-         let index: number;
-         if (specifiedWideIndex != null && specifiedWideIndex != undefined)
-         {
-            index = specifiedWideIndex;
-         }
-         else
-         {
-            ///////////////////////////////////////////////
-            // find the max index for this field already //
-            ///////////////////////////////////////////////
-            let maxIndex = -1;
-            for (let existingField of [...this.requiredFields, ...this.additionalFields])
-            {
-               if (existingField.getQualifiedName() == bulkLoadField.getQualifiedName())
-               {
-                  const thisIndex = existingField.wideLayoutIndexPath[0];
-                  if (thisIndex != null && thisIndex != undefined && thisIndex > maxIndex)
-                  {
-                     maxIndex = thisIndex;
-                  }
-               }
-            }
-            index = maxIndex + 1;
-         }
-
-         const cloneField = BulkLoadField.clone(bulkLoadField);
-         cloneField.wideLayoutIndexPath = [index];
-         this.additionalFields.push(cloneField);
-         return (cloneField);
-      }
-      else
-      {
-         this.additionalFields.push(bulkLoadField);
-         return (bulkLoadField);
-      }
-   }
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   public removeField(toRemove: BulkLoadField): void
-   {
-      const newAdditionalFields: BulkLoadField[] = [];
-      for (let bulkLoadField of this.additionalFields)
-      {
-         if (bulkLoadField.getQualifiedNameWithWideSuffix() != toRemove.getQualifiedNameWithWideSuffix())
-         {
-            newAdditionalFields.push(bulkLoadField);
-         }
-      }
-
-      this.additionalFields = newAdditionalFields;
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   public switchLayout(newLayout: string): void
-   {
-      const newAdditionalFields: BulkLoadField[] = [];
-      let anyChanges = false;
-
-      if ("WIDE" != newLayout)
-      {
-         ////////////////////////////////////////////////////////////////////////////////////////////////////////
-         // if going to a layout other than WIDE, make sure there aren't any fields with a wideLayoutIndexPath //
-         ////////////////////////////////////////////////////////////////////////////////////////////////////////
-         const namesWhereOneWideLayoutIndexHasBeenFound: { [name: string]: boolean } = {};
-         for (let existingField of this.additionalFields)
-         {
-            if (existingField.wideLayoutIndexPath.length > 0)
-            {
-               const name = existingField.getQualifiedName();
-               if (namesWhereOneWideLayoutIndexHasBeenFound[name])
-               {
-                  /////////////////////////////////////////////////////////////////////////////////////////////////////////
-                  // in this case, we're on like the 2nd or 3rd instance of, say, Line Item: SKU - so - just discard it. //
-                  /////////////////////////////////////////////////////////////////////////////////////////////////////////
-                  anyChanges = true;
-               }
-               else
-               {
-                  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-                  // else, this is the 1st instance of, say, Line Item: SKU - so mark that we've found it - and keep this field //
-                  // (that is, put it in the new array), but with no index path                                                 //
-                  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-                  namesWhereOneWideLayoutIndexHasBeenFound[name] = true;
-                  const newField = BulkLoadField.clone(existingField);
-                  newField.wideLayoutIndexPath = [];
-                  newAdditionalFields.push(newField);
-                  anyChanges = true;
-               }
-            }
-            else
-            {
-               //////////////////////////////////////////////////////
-               // else, non-wide-path fields, just get added as-is //
-               //////////////////////////////////////////////////////
-               newAdditionalFields.push(existingField);
-            }
-         }
-      }
-      else
-      {
-         ///////////////////////////////////////////////////////////////////////////////////////////////
-         // if going to WIDE layout, then any field from a child table needs a wide-layout-index-path //
-         ///////////////////////////////////////////////////////////////////////////////////////////////
-         for (let existingField of this.additionalFields)
-         {
-            if (existingField.tableStructure.isMain)
-            {
-               ////////////////////////////////////////////
-               // fields from main table come over as-is //
-               ////////////////////////////////////////////
-               newAdditionalFields.push(existingField);
-            }
-            else
-            {
-               /////////////////////////////////////////////////////////////////////////////////////////////
-               // fields from child tables get a wideLayoutIndexPath (and we're assuming just 1 for each) //
-               /////////////////////////////////////////////////////////////////////////////////////////////
-               const newField = BulkLoadField.clone(existingField);
-               newField.wideLayoutIndexPath = [0];
-               newAdditionalFields.push(newField);
-               anyChanges = true;
-            }
-         }
-      }
-
-      if (anyChanges)
-      {
-         this.additionalFields = newAdditionalFields;
-      }
-
-      this.layout = newLayout;
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   public getFieldsForColumnIndex(i: number): BulkLoadField[]
-   {
-      const rs: BulkLoadField[] = [];
-
-      for (let field of [...this.requiredFields, ...this.additionalFields])
-      {
-         if (field.valueType == "column" && field.columnIndex == i)
-         {
-            rs.push(field);
-         }
-      }
-
-      return (rs);
-   }
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   public handleChangeToHasHeaderRow(newValue: any, fileDescription: FileDescription)
-   {
-      const newRequiredFields: BulkLoadField[] = [];
-      let anyChangesToRequiredFields = false;
-
-      const newAdditionalFields: BulkLoadField[] = [];
-      let anyChangesToAdditionalFields = false;
-
-      ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-      // if we're switching to have header-rows enabled, then make sure that no columns w/ duplicated headers are selected //
-      // strategy to do this:  build new lists of both required & additional fields - and track if we had to change any    //
-      // column indexes (set to null) - add a warning to them, and only replace the arrays if there were changes.          //
-      ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-      if (newValue)
-      {
-         for (let field of this.requiredFields)
-         {
-            if (field.valueType == "column" && fileDescription.duplicateHeaderIndexes[field.columnIndex])
-            {
-               const newField = BulkLoadField.clone(field);
-               newField.columnIndex = null;
-               newField.warning = "This field was assigned to a column with a duplicated header"
-               newRequiredFields.push(newField);
-               anyChangesToRequiredFields = true;
-            }
-            else
-            {
-               newRequiredFields.push(field);
-            }
-         }
-
-         for (let field of this.additionalFields)
-         {
-            if (field.valueType == "column" && fileDescription.duplicateHeaderIndexes[field.columnIndex])
-            {
-               const newField = BulkLoadField.clone(field);
-               newField.columnIndex = null;
-               newField.warning = "This field was assigned to a column with a duplicated header"
-               newAdditionalFields.push(newField);
-               anyChangesToAdditionalFields = true;
-            }
-            else
-            {
-               newAdditionalFields.push(field);
-            }
-         }
-      }
-
-      if (anyChangesToRequiredFields)
-      {
-         this.requiredFields = newRequiredFields;
-      }
-
-      if (anyChangesToAdditionalFields)
-      {
-         this.additionalFields = newAdditionalFields;
-      }
-   }
-}
-
-
-/***************************************************************************
- ** meta-data about the file that the user uploaded
- ***************************************************************************/
-export class FileDescription
-{
-   headerValues: string[];
-   headerLetters: string[];
-   bodyValuesPreview: string[][];
-
-   duplicateHeaderIndexes: boolean[];
-
-   // todo - just get this from the profile always - it's not part of the file per-se
-   hasHeaderRow: boolean = true;
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   constructor(headerValues: string[], headerLetters: string[], bodyValuesPreview: string[][])
-   {
-      this.headerValues = headerValues;
-      this.headerLetters = headerLetters;
-      this.bodyValuesPreview = bodyValuesPreview;
-
-      this.duplicateHeaderIndexes = [];
-      const usedLabels: { [label: string]: boolean } = {};
-      for (let i = 0; i < headerValues.length; i++)
-      {
-         const label = headerValues[i];
-         if (usedLabels[label])
-         {
-            this.duplicateHeaderIndexes[i] = true;
-         }
-         usedLabels[label] = true;
-      }
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   public setHasHeaderRow(hasHeaderRow: boolean)
-   {
-      this.hasHeaderRow = hasHeaderRow;
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   public getColumnNames(): string[]
-   {
-      if (this.hasHeaderRow)
-      {
-         return this.headerValues;
-      }
-      else
-      {
-         return this.headerLetters.map(l => `Column ${l}`);
-      }
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   public getPreviewValues(columnIndex: number, fieldType?: QFieldType): string[]
-   {
-      if (columnIndex == undefined)
-      {
-         return [];
-      }
-
-      function getTypedValue(value: any): string
-      {
-         if (value == null)
-         {
-            return "";
-         }
-
-         //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-         // this was useful at one point in time when we had an object coming back for xlsx files with many different data types //
-         // we'd see a .string attribute, which would have the value we'd want to show.  not using it now, but keep in case      //
-         //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-         if (value && value.string)
-         {
-            switch (fieldType)
-            {
-               case QFieldType.BOOLEAN:
-               {
-                  return value.bool;
-               }
-
-               case QFieldType.STRING:
-               case QFieldType.TEXT:
-               case QFieldType.HTML:
-               case QFieldType.PASSWORD:
-               {
-                  return value.string;
-               }
-
-               case QFieldType.INTEGER:
-               case QFieldType.LONG:
-               {
-                  return value.integer;
-               }
-               case QFieldType.DECIMAL:
-               {
-                  return value.decimal;
-               }
-               case QFieldType.DATE:
-               {
-                  return value.date;
-               }
-               case QFieldType.TIME:
-               {
-                  return value.time;
-               }
-               case QFieldType.DATE_TIME:
-               {
-                  return value.dateTime;
-               }
-               case QFieldType.BLOB:
-                  return ""; // !!
-            }
-         }
-
-         return (`${value}`);
-      }
-
-      const valueArray: string[] = [];
-
-      if (!this.hasHeaderRow)
-      {
-         const typedValue = getTypedValue(this.headerValues[columnIndex]);
-         valueArray.push(typedValue == null ? "" : `${typedValue}`);
-      }
-
-      for (let value of this.bodyValuesPreview[columnIndex])
-      {
-         const typedValue = getTypedValue(value);
-         valueArray.push(typedValue == null ? "" : `${typedValue}`);
-      }
-
-      return (valueArray);
-   }
-}
-
-
-/***************************************************************************
- ** this (BulkLoadProfile & ...Field) is the model of what we save, and is
- ** also what we submit to the backend during the process.
- ***************************************************************************/
-export class BulkLoadProfile
-{
-   version: string;
-   fieldList: BulkLoadProfileField[] = [];
-   hasHeaderRow: boolean;
-   layout: string;
-}
-
-type BulkLoadProfileField =
-   {
-      fieldName: string,
-      columnIndex?: number,
-      headerName?: string,
-      defaultValue?: any,
-      doValueMapping?: boolean,
-      valueMappings?: { [fileValue: string]: any }
-   };
-
-
-/***************************************************************************
- ** In the bulk load forms, we have some forward-ref callback functions, and
- ** they like to capture/retain a reference when those functions get defined,
- ** so we had some trouble updating objects in those functions.
- **
- ** We "solved" this by creating instances of this class, which get captured,
- ** so then we can replace the wrapped object, and have a better time...
- ***************************************************************************/
-export class Wrapper<T>
-{
-   t: T;
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   constructor(t: T)
-   {
-      this.t = t;
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   public get(): T
-   {
-      return this.t;
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   public set(t: T)
-   {
-      this.t = t;
-   }
-}
-

src/qqq/models/processes/ProcessSummaryLine.tsx

@@ -53,8 +53,6 @@ export class ProcessSummaryLine
    linkText: string;
    linkPostText: string;
 
-   bulletsOfText: any[];
-
    constructor(processSummaryLine: any)
    {
       this.status = processSummaryLine.status;
@@ -68,8 +66,6 @@ export class ProcessSummaryLine
       this.linkText = processSummaryLine.linkText;
       this.linkPostText = processSummaryLine.linkPostText;
 
-      this.bulletsOfText = processSummaryLine.bulletsOfText;
-
       this.filter = processSummaryLine.filter;
    }
 
@@ -146,13 +142,6 @@ export class ProcessSummaryLine
                         </span>
                      ) : <span>{lastWord}</span>
                   }
-                  {
-                     this.bulletsOfText && <ul style={{marginLeft: "2rem"}}>
-                        {
-                           this.bulletsOfText.map((bullet, index) => <li key={index}>{bullet}</li>)
-                        }
-                     </ul>
-                  }
                </ListItemText>
             </Box>
          </ListItem>

src/qqq/pages/processes/ProcessWidgetBlockUtils.tsx

@@ -1,268 +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 {QComponentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QComponentType";
-import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
-import {QFrontendStepMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData";
-import {CompositeData} from "qqq/components/widgets/CompositeWidget";
-
-/*******************************************************************************
- ** Utility functions used by ProcessRun for working with ad-hoc, block &
- ** composite type widgets.
- **
- *******************************************************************************/
-export default class ProcessWidgetBlockUtils
-{
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public static isActionCodeValid(actionCode: string, step: QFrontendStepMetaData, processValues: any): boolean
-   {
-      ///////////////////////////////////////////////////////////
-      // private recursive function to walk the composite tree //
-      ///////////////////////////////////////////////////////////
-      function recursiveIsActionCodeValidForCompositeData(compositeWidgetData: CompositeData): boolean
-      {
-         for (let i = 0; i < compositeWidgetData.blocks.length; i++)
-         {
-            const block = compositeWidgetData.blocks[i];
-
-            ////////////////////////////////////////////////////////////////
-            // skip the block if it has a 'conditional', which isn't true //
-            ////////////////////////////////////////////////////////////////
-            const conditionalFieldName = block.conditional;
-            if (conditionalFieldName)
-            {
-               const value = processValues[conditionalFieldName];
-               if (!value)
-               {
-                  continue;
-               }
-            }
-
-            if (block.blockTypeName == "COMPOSITE")
-            {
-               ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
-               // recursive call for composites, but only return if a true is found (in case a subsequent block has a true) //
-               ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
-               const isValidForThisBlock = recursiveIsActionCodeValidForCompositeData(block as unknown as CompositeData);
-               if (isValidForThisBlock)
-               {
-                  return (true);
-               }
-               // else, continue...
-            }
-            else if (block.blockTypeName == "BUTTON")
-            {
-               //////////////////////////////////////////
-               // look at actionCodes on button blocks //
-               //////////////////////////////////////////
-               if (block.values?.actionCode == actionCode)
-               {
-                  return (true);
-               }
-            }
-         }
-
-         /////////////////////////////////////////
-         // if code wasn't found, it is invalid //
-         /////////////////////////////////////////
-         return false;
-      }
-
-      /////////////////////////////////////////////////////
-      // iterate over all components in the current step //
-      /////////////////////////////////////////////////////
-      for (let i = 0; i < step.components.length; i++)
-      {
-         const component = step.components[i];
-         if (component.type == "WIDGET" && component.values?.isAdHocWidget)
-         {
-            ///////////////////////////////////////////////////////////////////////////////////////////////
-            // for ad-hoc widget components, check if this actionCode exists on any action-button blocks //
-            ///////////////////////////////////////////////////////////////////////////////////////////////
-            const isValidForThisWidget = recursiveIsActionCodeValidForCompositeData(component.values);
-            if (isValidForThisWidget)
-            {
-               return (true);
-            }
-         }
-      }
-
-      ////////////////////////////////////
-      // upon fallthrough, it's a false //
-      ////////////////////////////////////
-      return false;
-   }
-
-
-   /***************************************************************************
-    ** perform evaluations on a compositeWidget's data, given current process
-    ** values, to do dynamic stuff, like:
-    ** - removing fields with un-true conditions
-    ***************************************************************************/
-   public static dynamicEvaluationOfCompositeWidgetData(compositeWidgetData: CompositeData, processValues: any)
-   {
-      for (let i = 0; i < compositeWidgetData.blocks.length; i++)
-      {
-         const block = compositeWidgetData.blocks[i];
-
-         ////////////////////////////////////////////////////////////////////
-         // if the block has a conditional, evaluate, and remove if untrue //
-         ////////////////////////////////////////////////////////////////////
-         const conditionalFieldName = block.conditional;
-         if (conditionalFieldName)
-         {
-            const value = processValues[conditionalFieldName];
-            if (!value)
-            {
-               console.debug(`Splicing away block based on [${conditionalFieldName}]...`);
-               compositeWidgetData.blocks.splice(i, 1);
-               i--;
-               continue;
-            }
-         }
-
-         if (block.blockTypeName == "COMPOSITE")
-         {
-            /////////////////////////////////////////
-            // make recursive calls for composites //
-            /////////////////////////////////////////
-            ProcessWidgetBlockUtils.dynamicEvaluationOfCompositeWidgetData(block as unknown as CompositeData, processValues);
-         }
-         else if (block.blockTypeName == "INPUT_FIELD")
-         {
-            /////////////////////////////////////////////////////////////////////////////////////////////////////////////
-            // for input fields, put the process's value for the field-name into the block's values object as '.value' //
-            /////////////////////////////////////////////////////////////////////////////////////////////////////////////
-            const fieldName = block.values?.fieldMetaData?.name;
-            if (processValues.hasOwnProperty(fieldName))
-            {
-               block.values.value = processValues[fieldName];
-            }
-         }
-         else if (block.blockTypeName == "TEXT")
-         {
-            //////////////////////////////////////////////////////////////////////////////////////
-            // for text-blocks - interpolate ${fieldName} expressions into their process-values //
-            //////////////////////////////////////////////////////////////////////////////////////
-            let text = block.values?.text;
-            if (text)
-            {
-               for (let key of Object.keys(processValues))
-               {
-                  text = text.replaceAll("${" + key + "}", processValues[key]);
-               }
-               block.values.interpolatedText = text;
-            }
-         }
-      }
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   public static addFieldsForCompositeWidget(step: QFrontendStepMetaData, processValues: any, addFieldCallback: (fieldMetaData: QFieldMetaData) => void)
-   {
-      ///////////////////////////////////////////////////////////
-      // private recursive function to walk the composite tree //
-      ///////////////////////////////////////////////////////////
-      function recursiveHelper(widgetData: CompositeData)
-      {
-         try
-         {
-            for (let block of widgetData.blocks)
-            {
-               if (block.blockTypeName == "COMPOSITE")
-               {
-                  recursiveHelper(block as unknown as CompositeData);
-               }
-               else if (block.blockTypeName == "INPUT_FIELD")
-               {
-                  const fieldMetaData = new QFieldMetaData(block.values?.fieldMetaData);
-                  addFieldCallback(fieldMetaData);
-               }
-            }
-         }
-         catch (e)
-         {
-            console.log("Error adding fields for compositeWidget: " + e);
-         }
-      }
-
-      ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-      // foreach component, if it's an adhoc widget or a widget w/ its data in the processValues, then, call recursive helper on it //
-      ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-      for (let component of step.components)
-      {
-         if (component.type == QComponentType.WIDGET && component.values?.isAdHocWidget)
-         {
-            recursiveHelper(component.values as unknown as CompositeData);
-         }
-         else if (component.type == QComponentType.WIDGET && processValues[component.values?.widgetName])
-         {
-            recursiveHelper(processValues[component.values?.widgetName] as unknown as CompositeData);
-         }
-      }
-   }
-
-
-   /***************************************************************************
-    **
-    ***************************************************************************/
-   public static processColorFromStyleMap(colorFromStyleMap?: string): string
-   {
-      if (colorFromStyleMap)
-      {
-         switch (colorFromStyleMap.toUpperCase())
-         {
-            case "SUCCESS":
-               return("#2BA83F");
-            case "WARNING":
-               return("#FBA132");
-            case "ERROR":
-               return("#FB4141");
-            case "INFO":
-               return("#458CFF");
-            case "MUTED":
-               return("#7b809a");
-            default:
-            {
-               if (colorFromStyleMap.match(/^[0-9A-F]{6}$/))
-               {
-                  return(`#${colorFromStyleMap}`);
-               }
-               else if (colorFromStyleMap.match(/^[0-9A-F]{8}$/))
-               {
-                  return(`#${colorFromStyleMap}`);
-               }
-               else
-               {
-                  return(colorFromStyleMap);
-               }
-            }
-         }
-      }
-   }
-
-}

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

@@ -121,7 +121,7 @@ function ColumnStats({tableMetaData, fieldMetaData, fieldTableName, filter}: Pro
             }
 
             const valueCounts = [] as QRecord[];
-            for(let i = 0; i < result.values.valueCounts?.length; i++)
+            for(let i = 0; i < result.values.valueCounts.length; i++)
             {
                let valueRecord = new QRecord(result.values.valueCounts[i]);
 

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

@@ -0,0 +1,947 @@
+/*
+ * 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 {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QPossibleValue} from "@kingsrook/qqq-frontend-core/lib/model/QPossibleValue";
+import {FormControl, InputLabel, Select, SelectChangeEvent, TextFieldProps} from "@mui/material";
+import Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import Grid from "@mui/material/Grid";
+import Icon from "@mui/material/Icon";
+import Modal from "@mui/material/Modal";
+import TextField from "@mui/material/TextField";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import {getGridNumericOperators, getGridStringOperators, GridColDef, GridFilterInputMultipleValue, GridFilterInputMultipleValueProps, GridFilterInputValueProps, GridFilterItem} from "@mui/x-data-grid-pro";
+import {GridFilterInputValue} from "@mui/x-data-grid/components/panel/filterPanel/GridFilterInputValue";
+import {GridApiCommunity} from "@mui/x-data-grid/internals";
+import {GridFilterOperator} from "@mui/x-data-grid/models/gridFilterOperator";
+import React, {useEffect, useRef, useState} from "react";
+import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
+import ChipTextField from "qqq/components/forms/ChipTextField";
+import DynamicSelect from "qqq/components/forms/DynamicSelect";
+
+
+////////////////////////////////
+// input element for 'is any' //
+////////////////////////////////
+function CustomIsAnyInput(type: "number" | "text", props: GridFilterInputValueProps)
+{
+   enum Delimiter
+   {
+      DETECT_AUTOMATICALLY = "Detect Automatically",
+      COMMA = "Comma",
+      NEWLINE = "Newline",
+      PIPE = "Pipe",
+      SPACE = "Space",
+      TAB = "Tab",
+      CUSTOM = "Custom",
+   }
+
+   const delimiterToCharacterMap: { [key: string]: string } = {};
+
+   delimiterToCharacterMap[Delimiter.COMMA] = "[,\n\r]";
+   delimiterToCharacterMap[Delimiter.TAB] = "[\t,\n,\r]";
+   delimiterToCharacterMap[Delimiter.NEWLINE] = "[\n\r]";
+   delimiterToCharacterMap[Delimiter.PIPE] = "[\\|\r\n]";
+   delimiterToCharacterMap[Delimiter.SPACE] = "[ \n\r]";
+
+   const delimiterDropdownOptions = Object.values(Delimiter);
+
+   const mainCardStyles: any = {};
+   mainCardStyles.width = "60%";
+   mainCardStyles.minWidth = "500px";
+
+   const [gridFilterItem, setGridFilterItem] = useState(props.item);
+   const [pasteModalIsOpen, setPasteModalIsOpen] = useState(false);
+   const [inputText, setInputText] = useState("");
+   const [delimiter, setDelimiter] = useState("");
+   const [delimiterCharacter, setDelimiterCharacter] = useState("");
+   const [customDelimiterValue, setCustomDelimiterValue] = useState("");
+   const [chipData, setChipData] = useState(undefined);
+   const [detectedText, setDetectedText] = useState("");
+   const [errorText, setErrorText] = useState("");
+
+   //////////////////////////////////////////////////////////////
+   // handler for when paste icon is clicked in 'any' operator //
+   //////////////////////////////////////////////////////////////
+   const handlePasteClick = (event: any) =>
+   {
+      event.target.blur();
+      setPasteModalIsOpen(true);
+   };
+
+   const applyValue = (item: GridFilterItem) =>
+   {
+      console.log(`updating grid values: ${JSON.stringify(item.value)}`);
+      setGridFilterItem(item);
+      props.applyValue(item);
+   };
+
+   const clearData = () =>
+   {
+      setDelimiter("");
+      setDelimiterCharacter("");
+      setChipData([]);
+      setInputText("");
+      setDetectedText("");
+      setCustomDelimiterValue("");
+      setPasteModalIsOpen(false);
+   };
+
+   const handleCancelClicked = () =>
+   {
+      clearData();
+      setPasteModalIsOpen(false);
+   };
+
+   const handleSaveClicked = () =>
+   {
+      if (gridFilterItem)
+      {
+         ////////////////////////////////////////
+         // if numeric remove any non-numerics //
+         ////////////////////////////////////////
+         let saveData = [];
+         for (let i = 0; i < chipData.length; i++)
+         {
+            if (type !== "number" || !Number.isNaN(Number(chipData[i])))
+            {
+               saveData.push(chipData[i]);
+            }
+         }
+
+         if (gridFilterItem.value)
+         {
+            gridFilterItem.value = [...gridFilterItem.value, ...saveData];
+         }
+         else
+         {
+            gridFilterItem.value = saveData;
+         }
+
+         setGridFilterItem(gridFilterItem);
+         props.applyValue(gridFilterItem);
+      }
+
+      clearData();
+      setPasteModalIsOpen(false);
+   };
+
+   ////////////////////////////////////////////////////////////////
+   // when user selects a different delimiter on the parse modal //
+   ////////////////////////////////////////////////////////////////
+   const handleDelimiterChange = (event: SelectChangeEvent) =>
+   {
+      const newDelimiter = event.target.value;
+      console.log(`Delimiter Changed to ${JSON.stringify(newDelimiter)}`);
+
+      setDelimiter(newDelimiter);
+      if (newDelimiter === Delimiter.CUSTOM)
+      {
+         setDelimiterCharacter(customDelimiterValue);
+      }
+      else
+      {
+         setDelimiterCharacter(delimiterToCharacterMap[newDelimiter]);
+      }
+   };
+
+   const handleTextChange = (event: any) =>
+   {
+      const inputText = event.target.value;
+      setInputText(inputText);
+   };
+
+   const handleCustomDelimiterChange = (event: any) =>
+   {
+      let inputText = event.target.value;
+      setCustomDelimiterValue(inputText);
+   };
+
+   ///////////////////////////////////////////////////////////////////////////////////////
+   // iterate over each character, putting them into 'buckets' so that we can determine //
+   // a good default to use when data is pasted into the textarea                       //
+   ///////////////////////////////////////////////////////////////////////////////////////
+   const calculateAutomaticDelimiter = (text: string): string =>
+   {
+      const buckets = new Map();
+      for (let i = 0; i < text.length; i++)
+      {
+         let bucketName = "";
+
+         switch (text.charAt(i))
+         {
+            case "\t":
+               bucketName = Delimiter.TAB;
+               break;
+            case "\n":
+            case "\r":
+               bucketName = Delimiter.NEWLINE;
+               break;
+            case "|":
+               bucketName = Delimiter.PIPE;
+               break;
+            case " ":
+               bucketName = Delimiter.SPACE;
+               break;
+            case ",":
+               bucketName = Delimiter.COMMA;
+               break;
+         }
+
+         if (bucketName !== "")
+         {
+            let currentCount = (buckets.has(bucketName)) ? buckets.get(bucketName) : 0;
+            buckets.set(bucketName, currentCount + 1);
+         }
+      }
+
+      ///////////////////////
+      // default is commas //
+      ///////////////////////
+      let highestCount = 0;
+      let delimiter = Delimiter.COMMA;
+      for (let j = 0; j < delimiterDropdownOptions.length; j++)
+      {
+         let bucketName = delimiterDropdownOptions[j];
+         if (buckets.has(bucketName) && buckets.get(bucketName) > highestCount)
+         {
+            delimiter = bucketName;
+            highestCount = buckets.get(bucketName);
+         }
+      }
+
+      setDetectedText(`${delimiter} Detected`);
+      return (delimiterToCharacterMap[delimiter]);
+   };
+
+   useEffect(() =>
+   {
+      let currentDelimiter = delimiter;
+      let currentDelimiterCharacter = delimiterCharacter;
+
+      /////////////////////////////////////////////////////////////////////////////
+      // if no delimiter already set in the state, call function to determine it //
+      /////////////////////////////////////////////////////////////////////////////
+      if (!currentDelimiter || currentDelimiter === Delimiter.DETECT_AUTOMATICALLY)
+      {
+         currentDelimiterCharacter = calculateAutomaticDelimiter(inputText);
+         if (!currentDelimiterCharacter)
+         {
+            return;
+         }
+
+         currentDelimiter = Delimiter.DETECT_AUTOMATICALLY;
+         setDelimiter(Delimiter.DETECT_AUTOMATICALLY);
+         setDelimiterCharacter(currentDelimiterCharacter);
+      }
+      else if (currentDelimiter === Delimiter.CUSTOM)
+      {
+         ////////////////////////////////////////////////////
+         // if custom, make sure to split on new lines too //
+         ////////////////////////////////////////////////////
+         currentDelimiterCharacter = `[${customDelimiterValue}\r\n]`;
+      }
+
+      console.log(`current delimiter is: ${currentDelimiter}, delimiting on: ${currentDelimiterCharacter}`);
+
+      let regex = new RegExp(currentDelimiterCharacter);
+      let parts = inputText.split(regex);
+      let chipData = [] as string[];
+
+      ///////////////////////////////////////////////////////
+      // if delimiter is empty string, dont split anything //
+      ///////////////////////////////////////////////////////
+      setErrorText("");
+      if (currentDelimiterCharacter !== "")
+      {
+         for (let i = 0; i < parts.length; i++)
+         {
+            let part = parts[i].trim();
+            if (part !== "")
+            {
+               chipData.push(part);
+
+               ///////////////////////////////////////////////////////////
+               // if numeric, check that first before pushing as a chip //
+               ///////////////////////////////////////////////////////////
+               if (type === "number" && Number.isNaN(Number(part)))
+               {
+                  setErrorText("Some values are not numbers");
+               }
+            }
+         }
+      }
+
+      setChipData(chipData);
+
+   }, [inputText, delimiterCharacter, customDelimiterValue, detectedText]);
+
+   return (
+      <Box>
+         {
+            props &&
+            (
+               <Box id="testId" sx={{width: "100%", display: "inline-flex", flexDirection: "row", alignItems: "end", height: 48}}>
+                  <GridFilterInputMultipleValue
+                     sx={{width: "100%"}}
+                     variant="standard"
+                     type={type} {...props}
+                     applyValue={applyValue}
+                     item={gridFilterItem}
+                  />
+                  <Tooltip title="Quickly add many values to your filter by pasting them from a spreadsheet or any other data source.">
+                     <Icon onClick={handlePasteClick} fontSize="small" color="info" sx={{marginLeft: "10px", cursor: "pointer"}}>paste_content</Icon>
+                  </Tooltip>
+               </Box>
+            )
+         }
+         {
+            pasteModalIsOpen &&
+            (
+               <Modal open={pasteModalIsOpen}>
+                  <Box sx={{position: "absolute", overflowY: "auto", width: "100%"}}>
+                     <Box py={3} justifyContent="center" sx={{display: "flex", mt: 8}}>
+                        <Card sx={mainCardStyles}>
+                           <Box p={4} pb={2}>
+                              <Grid container>
+                                 <Grid item pr={3} xs={12} lg={12}>
+                                    <Typography variant="h5">Bulk Add Filter Values</Typography>
+                                    <Typography sx={{display: "flex", lineHeight: "1.7", textTransform: "revert"}} variant="button">
+                                       Paste into the box on the left.
+                                       Review the filter values in the box on the right.
+                                       If the filter values are not what are expected, try changing the separator using the dropdown below.
+                                    </Typography>
+                                 </Grid>
+                              </Grid>
+                           </Box>
+                           <Grid container pl={3} pr={3} justifyContent="center" alignItems="stretch" sx={{display: "flex", height: "100%"}}>
+                              <Grid item pr={3} xs={6} lg={6} sx={{width: "100%", display: "flex", flexDirection: "column", flexGrow: 1}}>
+                                 <FormControl sx={{m: 1, width: "100%"}}>
+                                    <TextField
+                                       id="outlined-multiline-static"
+                                       label="PASTE TEXT"
+                                       multiline
+                                       onChange={handleTextChange}
+                                       rows={16}
+                                       value={inputText}
+                                    />
+                                 </FormControl>
+                              </Grid>
+                              <Grid item xs={6} lg={6} sx={{display: "flex", flexGrow: 1}}>
+                                 <FormControl sx={{m: 1, width: "100%"}}>
+                                    <ChipTextField
+                                       handleChipChange={() =>
+                                       {
+                                       }}
+                                       chipData={chipData}
+                                       chipType={type}
+                                       multiline
+                                       fullWidth
+                                       variant="outlined"
+                                       id="tags"
+                                       rows={0}
+                                       name="tags"
+                                       label="FILTER VALUES REVIEW"
+                                    />
+                                 </FormControl>
+                              </Grid>
+                           </Grid>
+                           <Grid container pl={3} pr={3} justifyContent="center" alignItems="stretch" sx={{display: "flex", height: "100%"}}>
+                              <Grid item pl={1} pr={3} xs={6} lg={6} sx={{width: "100%", display: "flex", flexDirection: "column", flexGrow: 1}}>
+                                 <Box sx={{display: "inline-flex", alignItems: "baseline"}}>
+                                    <FormControl sx={{mt: 2, width: "50%"}}>
+                                       <InputLabel htmlFor="select-native">
+                                          SEPARATOR
+                                       </InputLabel>
+                                       <Select
+                                          multiline
+                                          native
+                                          value={delimiter}
+                                          onChange={handleDelimiterChange}
+                                          label="SEPARATOR"
+                                          size="medium"
+                                          inputProps={{
+                                             id: "select-native",
+                                          }}
+                                       >
+                                          {delimiterDropdownOptions.map((delimiter) => (
+                                             <option key={delimiter} value={delimiter}>
+                                                {delimiter}
+                                             </option>
+                                          ))}
+                                       </Select>
+                                    </FormControl>
+                                    {delimiter === Delimiter.CUSTOM.valueOf() && (
+
+                                       <FormControl sx={{pl: 2, top: 5, width: "50%"}}>
+                                          <TextField
+                                             name="custom-delimiter-value"
+                                             placeholder="Custom Separator"
+                                             label="Custom Separator"
+                                             variant="standard"
+                                             value={customDelimiterValue}
+                                             onChange={handleCustomDelimiterChange}
+                                             inputProps={{maxLength: 1}}
+                                          />
+                                       </FormControl>
+                                    )}
+                                    {inputText && delimiter === Delimiter.DETECT_AUTOMATICALLY.valueOf() && (
+
+                                       <Typography pl={2} variant="button" sx={{top: "1px", textTransform: "revert"}}>
+                                          <i>{detectedText}</i>
+                                       </Typography>
+                                    )}
+                                 </Box>
+                              </Grid>
+                              <Grid sx={{display: "flex", justifyContent: "flex-start", alignItems: "flex-start"}} item pl={1} xs={3} lg={3}>
+                                 {
+                                    errorText && chipData.length > 0 && (
+                                       <Box sx={{display: "flex", justifyContent: "flex-start", alignItems: "flex-start"}}>
+                                          <Icon color="error">error</Icon>
+                                          <Typography sx={{paddingLeft: "4px", textTransform: "revert"}} variant="button">{errorText}</Typography>
+                                       </Box>
+                                    )
+                                 }
+                              </Grid>
+                              <Grid sx={{display: "flex", justifyContent: "flex-end", alignItems: "flex-start"}} item pr={1} xs={3} lg={3}>
+                                 {
+                                    chipData && chipData.length > 0 && (
+                                       <Typography sx={{textTransform: "revert"}} variant="button">{chipData.length.toLocaleString()} {chipData.length === 1 ? "value" : "values"}</Typography>
+                                    )
+                                 }
+                              </Grid>
+                           </Grid>
+                           <Box p={3} pt={0}>
+                              <Grid container pl={1} pr={1} justifyContent="right" alignItems="stretch" sx={{display: "flex-inline "}}>
+                                 <QCancelButton
+                                    onClickHandler={handleCancelClicked}
+                                    iconName="cancel"
+                                    disabled={false} />
+                                 <QSaveButton onClickHandler={handleSaveClicked} label="Add Filters" disabled={false} />
+                              </Grid>
+                           </Box>
+                        </Card>
+                     </Box>
+                  </Box>
+               </Modal>
+
+            )
+         }
+      </Box>
+   );
+}
+
+//////////////////////
+// string operators //
+//////////////////////
+const stringNotEqualsOperator: GridFilterOperator = {
+   label: "does not equal",
+   value: "isNot",
+   getApplyFilterFn: () => null,
+   // @ts-ignore
+   InputComponent: GridFilterInputValue,
+};
+
+const stringNotContainsOperator: GridFilterOperator = {
+   label: "does not contain",
+   value: "notContains",
+   getApplyFilterFn: () => null,
+   // @ts-ignore
+   InputComponent: GridFilterInputValue,
+};
+
+const stringNotStartsWithOperator: GridFilterOperator = {
+   label: "does not start with",
+   value: "notStartsWith",
+   getApplyFilterFn: () => null,
+   // @ts-ignore
+   InputComponent: GridFilterInputValue,
+};
+
+const stringNotEndWithOperator: GridFilterOperator = {
+   label: "does not end with",
+   value: "notEndsWith",
+   getApplyFilterFn: () => null,
+   // @ts-ignore
+   InputComponent: GridFilterInputValue,
+};
+
+const getListValueString = (value: GridFilterItem["value"]): string =>
+{
+   if (value && value.length)
+   {
+      let labels = [] as string[];
+
+      let maxLoops = value.length;
+      if(maxLoops > 5)
+      {
+         maxLoops = 3;
+      }
+
+      for (let i = 0; i < maxLoops; i++)
+      {
+         labels.push(value[i]);
+      }
+
+      if(maxLoops < value.length)
+      {
+         labels.push(" and " + (value.length - maxLoops) + " other values.");
+      }
+
+      return (labels.join(", "));
+   }
+   return (value);
+};
+
+const stringIsAnyOfOperator: GridFilterOperator = {
+   label: "is any of",
+   value: "isAnyOf",
+   getValueAsString: getListValueString,
+   getApplyFilterFn: () => null,
+   // @ts-ignore
+   InputComponent: (props: GridFilterInputMultipleValueProps<GridApiCommunity>) => CustomIsAnyInput("text", props)
+};
+
+const stringIsNoneOfOperator: GridFilterOperator = {
+   label: "is none of",
+   value: "isNone",
+   getValueAsString: getListValueString,
+   getApplyFilterFn: () => null,
+   // @ts-ignore
+   InputComponent: (props: GridFilterInputMultipleValueProps<GridApiCommunity>) => CustomIsAnyInput("text", props)
+};
+
+let gridStringOperators = getGridStringOperators();
+let equals = gridStringOperators.splice(1, 1)[0];
+let contains = gridStringOperators.splice(0, 1)[0];
+let startsWith = gridStringOperators.splice(0, 1)[0];
+let endsWith = gridStringOperators.splice(0, 1)[0];
+
+///////////////////////////////////
+// remove default isany operator //
+///////////////////////////////////
+gridStringOperators.splice(2, 1)[0];
+gridStringOperators = [equals, stringNotEqualsOperator, contains, stringNotContainsOperator, startsWith, stringNotStartsWithOperator, endsWith, stringNotEndWithOperator, ...gridStringOperators, stringIsAnyOfOperator, stringIsNoneOfOperator];
+
+export const QGridStringOperators = gridStringOperators;
+
+
+///////////////////////////////////////
+// input element for numbers-between //
+///////////////////////////////////////
+function InputNumberInterval(props: GridFilterInputValueProps)
+{
+   const SUBMIT_FILTER_STROKE_TIME = 500;
+   const {item, applyValue, focusElementRef = null} = props;
+
+   const filterTimeout = useRef<any>();
+   const [filterValueState, setFilterValueState] = useState<[string, string]>(
+      item.value ?? "",
+   );
+   const [applying, setIsApplying] = useState(false);
+
+   useEffect(() =>
+   {
+      return () =>
+      {
+         clearTimeout(filterTimeout.current);
+      };
+   }, []);
+
+   useEffect(() =>
+   {
+      const itemValue = item.value ?? [undefined, undefined];
+      setFilterValueState(itemValue);
+   }, [item.value]);
+
+   const updateFilterValue = (lowerBound: string, upperBound: string) =>
+   {
+      clearTimeout(filterTimeout.current);
+      setFilterValueState([lowerBound, upperBound]);
+
+      setIsApplying(true);
+      filterTimeout.current = setTimeout(() =>
+      {
+         setIsApplying(false);
+         applyValue({...item, value: [lowerBound, upperBound]});
+      }, SUBMIT_FILTER_STROKE_TIME);
+   };
+
+   const handleUpperFilterChange: TextFieldProps["onChange"] = (event) =>
+   {
+      const newUpperBound = event.target.value;
+      updateFilterValue(filterValueState[0], newUpperBound);
+   };
+   const handleLowerFilterChange: TextFieldProps["onChange"] = (event) =>
+   {
+      const newLowerBound = event.target.value;
+      updateFilterValue(newLowerBound, filterValueState[1]);
+   };
+
+   return (
+      <Box
+         sx={{
+            display: "inline-flex",
+            flexDirection: "row",
+            alignItems: "end",
+            height: 48,
+            pl: "20px",
+         }}
+      >
+         <TextField
+            name="lower-bound-input"
+            placeholder="From"
+            label="From"
+            variant="standard"
+            value={Number(filterValueState[0])}
+            onChange={handleLowerFilterChange}
+            type="number"
+            inputRef={focusElementRef}
+            sx={{mr: 2}}
+         />
+         <TextField
+            name="upper-bound-input"
+            placeholder="To"
+            label="To"
+            variant="standard"
+            value={Number(filterValueState[1])}
+            onChange={handleUpperFilterChange}
+            type="number"
+            InputProps={applying ? {endAdornment: <Icon>sync</Icon>} : {}}
+         />
+      </Box>
+   );
+}
+
+
+//////////////////////
+// number operators //
+//////////////////////
+const betweenOperator: GridFilterOperator = {
+   label: "is between",
+   value: "between",
+   getApplyFilterFn: () => null,
+   // @ts-ignore
+   InputComponent: InputNumberInterval
+};
+
+const notBetweenOperator: GridFilterOperator = {
+   label: "is not between",
+   value: "notBetween",
+   getApplyFilterFn: () => null,
+   // @ts-ignore
+   InputComponent: InputNumberInterval
+};
+
+const numericIsAnyOfOperator: GridFilterOperator = {
+   label: "is any of",
+   value: "isAnyOf",
+   getApplyFilterFn: () => null,
+   getValueAsString: getListValueString,
+   // @ts-ignore
+   InputComponent: (props: GridFilterInputMultipleValueProps<GridApiCommunity>) => CustomIsAnyInput("number", props)
+};
+
+const numericIsNoneOfOperator: GridFilterOperator = {
+   label: "is none of",
+   value: "isNone",
+   getApplyFilterFn: () => null,
+   getValueAsString: getListValueString,
+   // @ts-ignore
+   InputComponent: (props: GridFilterInputMultipleValueProps<GridApiCommunity>) => CustomIsAnyInput("number", props)
+};
+
+//////////////////////////////
+// remove default is any of //
+//////////////////////////////
+let gridNumericOperators = getGridNumericOperators();
+gridNumericOperators.splice(8, 1)[0];
+export const QGridNumericOperators = [...gridNumericOperators, betweenOperator, notBetweenOperator, numericIsAnyOfOperator, numericIsNoneOfOperator];
+
+///////////////////////
+// boolean operators //
+///////////////////////
+const booleanTrueOperator: GridFilterOperator = {
+   label: "is yes",
+   value: "isTrue",
+   getApplyFilterFn: (filterItem: GridFilterItem, column: GridColDef) => null
+};
+
+const booleanFalseOperator: GridFilterOperator = {
+   label: "is no",
+   value: "isFalse",
+   getApplyFilterFn: (filterItem: GridFilterItem, column: GridColDef) => null
+};
+
+const booleanEmptyOperator: GridFilterOperator = {
+   label: "is empty",
+   value: "isEmpty",
+   getApplyFilterFn: (filterItem: GridFilterItem, column: GridColDef) => null
+};
+
+const booleanNotEmptyOperator: GridFilterOperator = {
+   label: "is not empty",
+   value: "isNotEmpty",
+   getApplyFilterFn: (filterItem: GridFilterItem, column: GridColDef) => null
+};
+
+export const QGridBooleanOperators = [booleanTrueOperator, booleanFalseOperator, booleanEmptyOperator, booleanNotEmptyOperator];
+
+const blobEmptyOperator: GridFilterOperator = {
+   label: "is empty",
+   value: "isEmpty",
+   getApplyFilterFn: (filterItem: GridFilterItem, column: GridColDef) => null
+};
+
+const blobNotEmptyOperator: GridFilterOperator = {
+   label: "is not empty",
+   value: "isNotEmpty",
+   getApplyFilterFn: (filterItem: GridFilterItem, column: GridColDef) => null
+};
+
+export const QGridBlobOperators = [blobNotEmptyOperator, blobEmptyOperator];
+
+
+///////////////////////////////////////
+// input element for possible values //
+///////////////////////////////////////
+function InputPossibleValueSourceSingle(tableName: string, field: QFieldMetaData, props: GridFilterInputValueProps)
+{
+   const SUBMIT_FILTER_STROKE_TIME = 500;
+   const {item, applyValue, focusElementRef = null} = props;
+
+   console.log("Item.value?  " + item.value);
+
+   const filterTimeout = useRef<any>();
+   const [filterValueState, setFilterValueState] = useState<any>(item.value ?? null);
+   const [selectedPossibleValue, setSelectedPossibleValue] = useState((item.value ?? null) as QPossibleValue);
+   const [applying, setIsApplying] = useState(false);
+
+   useEffect(() =>
+   {
+      return () =>
+      {
+         clearTimeout(filterTimeout.current);
+      };
+   }, []);
+
+   useEffect(() =>
+   {
+      const itemValue = item.value ?? null;
+      setFilterValueState(itemValue);
+   }, [item.value]);
+
+   const updateFilterValue = (value: QPossibleValue) =>
+   {
+      clearTimeout(filterTimeout.current);
+      setFilterValueState(value);
+
+      setIsApplying(true);
+      filterTimeout.current = setTimeout(() =>
+      {
+         setIsApplying(false);
+         applyValue({...item, value: value});
+      }, SUBMIT_FILTER_STROKE_TIME);
+   };
+
+   const handleChange = (value: QPossibleValue) =>
+   {
+      updateFilterValue(value);
+   };
+
+   return (
+      <Box
+         sx={{
+            display: "inline-flex",
+            flexDirection: "row",
+            alignItems: "end",
+            height: 48,
+         }}
+      >
+         <DynamicSelect
+            tableName={tableName}
+            fieldName={field.name}
+            fieldLabel="Value"
+            initialValue={selectedPossibleValue?.id}
+            initialDisplayValue={selectedPossibleValue?.label}
+            inForm={false}
+            onChange={handleChange}
+            // InputProps={applying ? {endAdornment: <Icon>sync</Icon>} : {}}
+         />
+      </Box>
+   );
+}
+
+
+////////////////////////////////////////////////
+// input element for multiple possible values //
+////////////////////////////////////////////////
+function InputPossibleValueSourceMultiple(tableName: string, field: QFieldMetaData, props: GridFilterInputValueProps)
+{
+   const SUBMIT_FILTER_STROKE_TIME = 500;
+   const {item, applyValue, focusElementRef = null} = props;
+
+   console.log("Item.value?  " + item.value);
+
+   const filterTimeout = useRef<any>();
+   const [selectedPossibleValues, setSelectedPossibleValues] = useState(item.value as QPossibleValue[]);
+   const [applying, setIsApplying] = useState(false);
+
+   useEffect(() =>
+   {
+      return () =>
+      {
+         clearTimeout(filterTimeout.current);
+      };
+   }, []);
+
+   useEffect(() =>
+   {
+      const itemValue = item.value ?? null;
+   }, [item.value]);
+
+   const updateFilterValue = (value: QPossibleValue) =>
+   {
+      clearTimeout(filterTimeout.current);
+
+      setIsApplying(true);
+      filterTimeout.current = setTimeout(() =>
+      {
+         setIsApplying(false);
+         applyValue({...item, value: value});
+      }, SUBMIT_FILTER_STROKE_TIME);
+   };
+
+   const handleChange = (value: QPossibleValue) =>
+   {
+      updateFilterValue(value);
+   };
+
+   return (
+      <Box
+         sx={{
+            display: "inline-flex",
+            flexDirection: "row",
+            alignItems: "end",
+            height: 48,
+         }}
+      >
+         <DynamicSelect
+            tableName={tableName}
+            fieldName={field.name}
+            isMultiple={true}
+            fieldLabel="Value"
+            initialValues={selectedPossibleValues}
+            inForm={false}
+            onChange={handleChange}
+         />
+      </Box>
+   );
+}
+
+const getPvsValueString = (value: GridFilterItem["value"]): string =>
+{
+   if (value && value.length)
+   {
+      let labels = [] as string[];
+
+      let maxLoops = value.length;
+      if(maxLoops > 5)
+      {
+         maxLoops = 3;
+      }
+
+      for (let i = 0; i < maxLoops; i++)
+      {
+         if(value[i] && value[i].label)
+         {
+            labels.push(value[i].label);
+         }
+         else
+         {
+            labels.push(value);
+         }
+      }
+
+      if(maxLoops < value.length)
+      {
+         labels.push(" and " + (value.length - maxLoops) + " other values.");
+      }
+
+      return (labels.join(", "));
+   }
+   else if (value && value.label)
+   {
+      return (value.label);
+   }
+   return (value);
+};
+
+//////////////////////////////////
+// possible value set operators //
+//////////////////////////////////
+export const buildQGridPvsOperators = (tableName: string, field: QFieldMetaData): GridFilterOperator[] =>
+{
+   return ([
+      {
+         label: "is",
+         value: "is",
+         getApplyFilterFn: () => null,
+         getValueAsString: getPvsValueString,
+         InputComponent: (props: GridFilterInputValueProps<GridApiCommunity>) => InputPossibleValueSourceSingle(tableName, field, props)
+      },
+      {
+         label: "is not",
+         value: "isNot",
+         getApplyFilterFn: () => null,
+         getValueAsString: getPvsValueString,
+         InputComponent: (props: GridFilterInputValueProps<GridApiCommunity>) => InputPossibleValueSourceSingle(tableName, field, props)
+      },
+      {
+         label: "is any of",
+         value: "isAnyOf",
+         getValueAsString: getPvsValueString,
+         getApplyFilterFn: () => null,
+         InputComponent: (props: GridFilterInputValueProps<GridApiCommunity>) => InputPossibleValueSourceMultiple(tableName, field, props)
+      },
+      {
+         label: "is none of",
+         value: "isNone",
+         getValueAsString: getPvsValueString,
+         getApplyFilterFn: () => null,
+         InputComponent: (props: GridFilterInputValueProps<GridApiCommunity>) => InputPossibleValueSourceMultiple(tableName, field, props)
+      },
+      {
+         label: "is empty",
+         value: "isEmpty",
+         getValueAsString: getPvsValueString,
+         getApplyFilterFn: (filterItem: GridFilterItem, column: GridColDef) => null
+      },
+      {
+         label: "is not empty",
+         value: "isNotEmpty",
+         getValueAsString: getPvsValueString,
+         getApplyFilterFn: (filterItem: GridFilterItem, column: GridColDef) => null
+      }
+   ]);
+};

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

@@ -33,7 +33,8 @@ 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 {Alert, Box, Collapse, Menu, Typography} from "@mui/material";
+import {Alert, Collapse, Menu, Typography} from "@mui/material";
+import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
 import Divider from "@mui/material/Divider";
@@ -91,10 +92,8 @@ interface Props
    launchProcess?: QProcessMetaData;
    usage?: QueryScreenUsage;
    isModal?: boolean;
-   isPreview?: boolean;
    initialQueryFilter?: QQueryFilter;
    initialColumns?: QQueryColumns;
-   allowVariables?: boolean;
 }
 
 ///////////////////////////////////////////////////////
@@ -110,7 +109,7 @@ const qController = Client.getInstance();
  *******************************************************************************/
 const getLoadingScreen = (isModal: boolean) =>
 {
-   if (isModal)
+   if(isModal)
    {
       return (<Box>&nbsp;</Box>);
    }
@@ -126,7 +125,7 @@ const getLoadingScreen = (isModal: boolean) =>
  **
  ** Yuge component.  The best.  Lots of very smart people are saying so.
  *******************************************************************************/
-const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariables, initialQueryFilter, initialColumns}: Props, ref) =>
+const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, initialColumns}: Props, ref) =>
 {
    const tableName = table.name;
    const [searchParams] = useSearchParams();
@@ -152,7 +151,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariable
     *******************************************************************************/
    function localStorageSet(key: string, value: string)
    {
-      if (mayWriteLocalStorage)
+      if(mayWriteLocalStorage)
       {
          localStorage.setItem(key, value);
       }
@@ -164,7 +163,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariable
     *******************************************************************************/
    function localStorageRemove(key: string)
    {
-      if (mayWriteLocalStorage)
+      if(mayWriteLocalStorage)
       {
          localStorage.removeItem(key);
       }
@@ -177,7 +176,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariable
          {
             return view;
          }
-      };
+      }
    });
 
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -257,7 +256,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariable
       defaultView.mode = defaultMode;
    }
 
-   if (firstRender)
+   if(firstRender)
    {
       /////////////////////////////////////////////////////////////////////////
       // allow a caller to send in an initial filter & set of columns.       //
@@ -409,10 +408,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariable
    //////////////////////////////////////////////////////////////////
    // we use our own header - so clear out the context page header //
    //////////////////////////////////////////////////////////////////
-   if (!isModal)
-   {
-      setPageHeader(null);
-   }
+   setPageHeader(null);
 
    //////////////////////
    // ole' faithful... //
@@ -487,6 +483,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariable
    };
 
 
+
    /*******************************************************************************
     **
     *******************************************************************************/
@@ -631,7 +628,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariable
          const type = (e.target as any).type;
          const validType = (type !== "text" && type !== "textarea" && type !== "input" && type !== "search");
 
-         if (validType && !isModal && !dotMenuOpen && !keyboardHelpOpen && !activeModalProcess)
+         if (validType && !dotMenuOpen && !keyboardHelpOpen && !activeModalProcess)
          {
             if (!e.metaKey && !e.ctrlKey && e.key === "n" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission)
             {
@@ -669,7 +666,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariable
       {
          document.removeEventListener("keydown", down);
       };
-   }, [isModal, dotMenuOpen, keyboardHelpOpen, metaData, activeModalProcess]);
+   }, [dotMenuOpen, keyboardHelpOpen, metaData, activeModalProcess]);
 
 
    /*******************************************************************************
@@ -711,7 +708,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariable
          {
             if (localStorage.getItem(currentSavedViewLocalStorageKey))
             {
-               if (usage == "queryScreen")
+               if(usage == "queryScreen")
                {
                   currentSavedViewId = Number.parseInt(localStorage.getItem(currentSavedViewLocalStorageKey));
                   navigate(`${metaData.getTablePathByName(tableName)}/savedView/${currentSavedViewId}`);
@@ -750,13 +747,13 @@ const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariable
          const viewForLocalStorage: RecordQueryView = JSON.parse(viewAsJSON);
          if (viewForLocalStorage?.queryFilter?.criteria?.length > 0)
          {
-            FilterUtils.stripAwayIncompleteCriteria(viewForLocalStorage.queryFilter);
+            FilterUtils.stripAwayIncompleteCriteria(viewForLocalStorage.queryFilter)
          }
          localStorageSet(viewLocalStorageKey, JSON.stringify(viewForLocalStorage));
       }
-      catch (e)
+      catch(e)
       {
-         console.log("Error storing view in local storage: " + e);
+         console.log("Error storing view in local storage: " + e)
       }
    };
 
@@ -868,7 +865,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariable
       for (let i = 0; i < queryFilter?.orderBys?.length; i++)
       {
          const fieldName = queryFilter.orderBys[i].fieldName;
-         if (fieldName != null && fieldName.indexOf(".") > -1)
+         if (fieldName.indexOf(".") > -1)
          {
             const joinTableName = fieldName.replaceAll(/\..*/g, "");
             if (!vjtToUse.has(joinTableName))
@@ -884,18 +881,6 @@ const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariable
    };
 
 
-   /*******************************************************************************
-    ** Opens a new query screen in a new window with the current filter
-    *******************************************************************************/
-   const openFilterInNewWindow = () =>
-   {
-      let filterForBackend = JSON.parse(JSON.stringify(view.queryFilter));
-      filterForBackend = FilterUtils.prepQueryFilterForBackend(tableMetaData, filterForBackend);
-      const url = `${metaData?.getTablePathByName(tableName)}?filter=${encodeURIComponent(JSON.stringify(filterForBackend))}`;
-      window.open(url);
-   };
-
-
    /*******************************************************************************
     ** This is the method that actually executes a query to update the data in the table.
     *******************************************************************************/
@@ -913,26 +898,6 @@ const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariable
          return;
       }
 
-      /////////////////////////////////////////////////////////////////////////////////////////////////
-      // if any values in the query are of type "FilterVariableExpression", display an error showing //
-      // that a backend query cannot be made because of missing values for that expression           //
-      /////////////////////////////////////////////////////////////////////////////////////////////////
-      setWarningAlert(null);
-      for (var i = 0; i < queryFilter?.criteria?.length; i++)
-      {
-         for (var j = 0; j < queryFilter?.criteria[i]?.values?.length; j++)
-         {
-            const value = queryFilter.criteria[i].values[j];
-            if (value?.type == "FilterVariableExpression")
-            {
-               setWarningAlert("Cannot perform query because of a missing value for a variable.");
-               setLoading(false);
-               setRows([]);
-               return;
-            }
-         }
-      }
-
       recordAnalytics({category: "tableEvents", action: "query", label: tableMetaData.label});
 
       console.log(`In updateTable for ${reason} ${JSON.stringify(queryFilter)}`);
@@ -971,7 +936,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariable
          console.log(`Issuing query: ${thisQueryId}`);
          if (tableMetaData.capabilities.has(Capability.TABLE_COUNT))
          {
-            if (clearOutCount)
+            if(clearOutCount)
             {
                setTotalRecords(null);
                setDistinctRecords(null);
@@ -1103,7 +1068,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariable
       ////////////////////////////////
       // make the rows for the grid //
       ////////////////////////////////
-      const rows = DataGridUtils.makeRows(results, tableMetaData, tableVariant);
+      const rows = DataGridUtils.makeRows(results, tableMetaData);
       setRows(rows);
 
       setLoading(false);
@@ -1469,6 +1434,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariable
       return (selectedIds.length);
    };
 
+
    /*******************************************************************************
     ** get a query-string to put on the url to indicate what records are going into
     ** a process.
@@ -1612,22 +1578,6 @@ const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariable
     *******************************************************************************/
    const processClicked = (process: QProcessMetaData) =>
    {
-      if (process.minInputRecords != null && process.minInputRecords > 0 && getNoOfSelectedRecords() === 0)
-      {
-         setAlertContent(`No records were selected for the process: ${process.label}`);
-         return;
-      }
-      else if (process.minInputRecords != null && getNoOfSelectedRecords() < process.minInputRecords)
-      {
-         setAlertContent(`Too few records were selected for the process: ${process.label}.  A minimum of ${process.minInputRecords} is required.`);
-         return;
-      }
-      else if (process.maxInputRecords != null && getNoOfSelectedRecords() > process.maxInputRecords)
-      {
-         setAlertContent(`Too many records were selected for the process: ${process.label}.  A maximum of ${process.maxInputRecords} is allowed.`);
-         return;
-      }
-
       // todo - let the process specify that it needs initial rows - err if none selected.
       //  alternatively, let a process itself have an initial screen to select rows...
       openModalProcess(process);
@@ -2260,25 +2210,12 @@ const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariable
       return (
          <GridToolbarContainer>
             <div>
-               <Tooltip title="Refresh Query">
-                  <Button id="refresh-button" onClick={() => updateTable("refresh button")} startIcon={<Icon>refresh</Icon>} sx={{pl: "1rem", pr: "0.5rem", minWidth: "unset"}}></Button>
-               </Tooltip>
+               <Button id="refresh-button" onClick={() => updateTable("refresh button")} startIcon={<Icon>refresh</Icon>} sx={{pl: "1rem", pr: "0.5rem", minWidth: "unset"}}></Button>
+            </div>
+            <div style={{position: "relative"}}>
+               {/* @ts-ignore */}
+               <GridToolbarDensitySelector nonce={undefined} />
             </div>
-            {
-               !isPreview && (
-                  <div style={{position: "relative"}}>
-                     {/* @ts-ignore */}
-                     <GridToolbarDensitySelector nonce={undefined} />
-                  </div>
-               )
-            }
-            {
-               isPreview && (
-                  <Tooltip title="Open In New Window">
-                     <Button id="open-filter-in-new-window-button" onClick={() => openFilterInNewWindow()} startIcon={<Icon>launch</Icon>} sx={{pl: "1rem", pr: "0.5rem", minWidth: "unset"}}></Button>
-                  </Tooltip>
-               )
-            }
 
             {
                usage == "queryScreen" &&
@@ -2587,7 +2524,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariable
             {
                const currentSavedViewId = Number.parseInt(localStorage.getItem(currentSavedViewLocalStorageKey));
                console.log(`returning to previously active saved view ${currentSavedViewId}`);
-               if (usage == "queryScreen")
+               if(usage == "queryScreen")
                {
                   navigate(`${metaData.getTablePathByName(tableName)}/savedView/${currentSavedViewId}`);
                }
@@ -2830,7 +2767,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariable
       spaceAboveGrid += 60;
    }
 
-   if (isModal)
+   if(isModal)
    {
       spaceAboveGrid += 130;
    }
@@ -2913,7 +2850,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariable
                }
 
                {
-                  !isPreview && metaData && tableMetaData &&
+                  metaData && tableMetaData &&
                   <BasicAndAdvancedQueryControls
                      ref={basicAndAdvancedQueryControlsRef}
                      metaData={metaData}
@@ -2926,7 +2863,6 @@ const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariable
                      gridApiRef={gridApiRef}
                      mode={mode}
                      queryScreenUsage={usage}
-                     allowVariables={allowVariables}
                      setMode={doSetMode}
                      savedViewsComponent={savedViewsComponent}
                      columnMenuComponent={buildColumnMenu()}
@@ -2951,11 +2887,9 @@ const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariable
                            filterPanel:
                               {
                                  tableMetaData: tableMetaData,
-                                 queryScreenUsage: usage,
                                  metaData: metaData,
                                  queryFilter: queryFilter,
                                  updateFilter: doSetQueryFilter,
-                                 allowVariables: allowVariables
                               }
                         }}
                         localeText={{
@@ -3039,15 +2973,15 @@ const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariable
       </React.Fragment>
    );
 
-   if (isModal)
+   if(isModal)
    {
       return body;
    }
 
    return (
       <BaseLayout>{body}</BaseLayout>
-   );
-});
+   )
+})
 
 
 RecordQuery.defaultProps = {

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

@@ -34,7 +34,6 @@ import BaseLayout from "qqq/layouts/BaseLayout";
 import Client from "qqq/utils/qqq/Client";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
 
-import "ace-builds/src-noconflict/ace";
 import "ace-builds/src-noconflict/mode-java";
 import "ace-builds/src-noconflict/mode-javascript";
 import "ace-builds/src-noconflict/mode-json";
@@ -191,7 +190,7 @@ function RecordDeveloperView({table}: Props): JSX.Element
                                                 <Card sx={{mb: 3}}>
                                                    <Typography variant="h6" p={2} pl={3} pb={3}>{field?.label}</Typography>
 
-                                                   <Box display="flex" alignItems="center" justifyContent="space-between" gap={2} mx={3} mb={3} mt={0}>
+                                                   <Box display="flex" alignItems="center" justifyContent="space-between" gap={2}>
                                                       {scriptId ?
                                                          <ScriptViewer
                                                             scriptId={scriptId}

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,17 +46,14 @@ 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 {SxProps} from "@mui/system";
 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";
@@ -75,95 +71,18 @@ 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 }, styleOverrides?: {label?: SxProps, value?: SxProps}, tableVariant?: QTableVariant)
-{
-   return <Grid container lg={12} key={key} display="flex" 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;
-               let gridColumns = (field.gridColumns && field.gridColumns > 0) ? field.gridColumns : 12;
-
-               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", ...(styleOverrides?.label ?? {})}}>{label}:</Typography>;
-
-               return (
-                  <Grid item key={fieldName} lg={gridColumns} flexDirection="column" 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)" sx={{...(styleOverrides?.value ?? {})}}>
-                           {ValueUtils.getDisplayValue(field, record, "view", fieldName, tableVariant)}
-                        </Typography>
-                     </>
-                  </Grid>
-               );
-            }
-         })
-      }
-   </Grid>;
-}
-
-
-/***************************************************************************
- **
- ***************************************************************************/
-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();
 
@@ -180,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);
@@ -198,16 +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 CREATE_CHILD_KEY = "createChild";
+   const {accentColor, setPageHeader, tableMetaData, setTableMetaData, tableProcesses, setTableProcesses, dotMenuOpen, keyboardHelpOpen, helpHelpActive, recordAnalytics} = useContext(QContext);
 
    if (localStorage.getItem(tableVariantLocalStorageKey))
    {
@@ -311,19 +225,12 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
          ///////////////////////////////////////////////////////////////////////////////////////////////
          // the path for a process looks like: .../table/id/process                                   //
          // the path for creating a child record looks like: .../table/id/createChild/:childTableName //
-         // the path for creating a child record in a process looks like:                             //
-         // .../table/id/processName#/createChild=...                                                 //
          ///////////////////////////////////////////////////////////////////////////////////////////////
-         let hasChildRecordKey = pathParts.some(p => p.includes(CREATE_CHILD_KEY));
-         if (!hasChildRecordKey)
-         {
-            hasChildRecordKey = hashParts.some(h => h.includes(CREATE_CHILD_KEY));
-         }
 
-         ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-         // if our tableName is in the -3 index, and there is no token for updating child records, try to open process //
-         ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-         if (!hasChildRecordKey && pathParts[pathParts.length - 3] === tableName)
+         //////////////////////////////////////////////////////////////
+         // if our tableName is in the -3 index, try to open process //
+         //////////////////////////////////////////////////////////////
+         if (pathParts[pathParts.length - 3] === tableName)
          {
             const processName = pathParts[pathParts.length - 1];
             const processList = allTableProcesses.filter(p => p.name.endsWith(processName));
@@ -360,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] == CREATE_CHILD_KEY)
+         if (pathParts[pathParts.length - 4] === tableName && pathParts[pathParts.length - 2] == "createChild")
          {
             (async () =>
             {
@@ -379,7 +286,7 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
          for (let i = 0; i < hashParts.length; i++)
          {
             const parts = hashParts[i].split("=");
-            if (parts.length > 1 && parts[0] == CREATE_CHILD_KEY)
+            if (parts.length > 1 && parts[0] == "createChild")
             {
                (async () =>
                {
@@ -423,6 +330,31 @@ 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
@@ -498,18 +430,7 @@ 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});
          }
@@ -546,7 +467,7 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
 
          setPageHeader(record.recordLabel);
 
-         if (!launchingProcess && !activeModalProcess)
+         if (!launchingProcess)
          {
             try
             {
@@ -598,7 +519,40 @@ 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, undefined, undefined, tableVariant);
+               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);
+                           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:${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")
                {
@@ -668,7 +622,6 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
    const handleClickDeleteButton = () =>
    {
       setDeleteConfirmationOpen(true);
-      setIsDeleteSubmitting(false);
    };
 
    const handleDeleteConfirmClose = () =>
@@ -678,7 +631,6 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
 
    const handleDelete = (event: { preventDefault: () => void }) =>
    {
-      setIsDeleteSubmitting(true);
       event?.preventDefault();
       (async () =>
       {
@@ -687,13 +639,11 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
          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);
@@ -809,68 +759,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);
@@ -1004,10 +892,10 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
                               }
 
                               <Grid container spacing={3}>
-                                 <Grid item xs={12} lg={3} className="recordSidebar">
+                                 <Grid item xs={12} lg={3}>
                                     <QRecordSidebar tableSections={tableSections} />
                                  </Grid>
-                                 <Grid item xs={12} lg={9} className="recordWithSidebar">
+                                 <Grid item xs={12} lg={9}>
 
                                     <Grid container spacing={3}>
                                        <Grid item xs={12} mb={3}>
@@ -1026,7 +914,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}
@@ -1075,7 +962,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>
@@ -1092,7 +979,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}
@@ -1123,11 +1010,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>);
-   }
-}