CE-704: updates to better handling selecting variants on 'integrations', or if not valid, etc.

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2.1
 
 orbs:
   node: circleci/node@5.1.0
-  browser-tools: circleci/browser-tools@1.4.6
+  browser-tools: circleci/browser-tools@1.4.5
 
 executors:
   java17:

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.85",
+      "@kingsrook/qqq-frontend-core": "1.0.82",
       "@mui/icons-material": "5.4.1",
       "@mui/material": "5.11.1",
       "@mui/styles": "5.11.1",
@@ -42,7 +42,6 @@
       "react-dom": "18.0.0",
       "react-github-btn": "1.2.1",
       "react-google-drive-picker": "^1.2.0",
-      "react-markdown": "9.0.1",
       "react-router-dom": "6.2.1",
       "react-router-hash-link": "2.4.3",
       "react-table": "7.7.0",

pom.xml

@@ -29,7 +29,7 @@
    <packaging>jar</packaging>
 
    <properties>
-      <revision>0.20.0-SNAPSHOT</revision>
+      <revision>0.19.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>feature-CE-798-quick-filters-20240123.205854-1</version>
+         <version>0.17.0-SNAPSHOT</version>
       </dependency>
       <dependency>
          <groupId>org.slf4j</groupId>
@@ -77,13 +77,13 @@
       <dependency>
          <groupId>org.seleniumhq.selenium</groupId>
          <artifactId>selenium-java</artifactId>
-         <version>4.15.0</version>
+         <version>4.10.0</version>
          <scope>test</scope>
       </dependency>
       <dependency>
          <groupId>io.github.bonigarcia</groupId>
          <artifactId>webdrivermanager</artifactId>
-         <version>5.6.2</version>
+         <version>5.4.1</version>
          <scope>test</scope>
       </dependency>
       <dependency>
@@ -119,7 +119,7 @@
       <dependency>
          <groupId>org.json</groupId>
          <artifactId>json</artifactId>
-         <version>20231013</version>
+         <version>20230227</version>
          <scope>test</scope>
       </dependency>
       <dependency>

src/App.tsx

@@ -36,7 +36,7 @@ import {LicenseInfo} from "@mui/x-license-pro";
 import jwt_decode from "jwt-decode";
 import React, {JSXElementConstructor, Key, ReactElement, useEffect, useState,} from "react";
 import {useCookies} from "react-cookie";
-import {Navigate, Route, Routes, useLocation, useSearchParams,} from "react-router-dom";
+import {Navigate, Route, Routes, useLocation,} from "react-router-dom";
 import {Md5} from "ts-md5/dist/md5";
 import CommandMenu from "CommandMenu";
 import QContext from "QContext";
@@ -73,14 +73,6 @@ export default function App()
    const [loggedInUser, setLoggedInUser] = useState({} as { name?: string, email?: string });
    const [defaultRoute, setDefaultRoute] = useState("/no-apps");
 
-   /////////////////////////////////////////////////////////
-   // tell the client how to do a logout if it sees a 401 //
-   /////////////////////////////////////////////////////////
-   Client.setUnauthorizedCallback(() =>
-   {
-      logout();
-   })
-
    const shouldStoreNewToken = (newToken: string, oldToken: string): boolean =>
    {
       if (!cookies[SESSION_UUID_COOKIE_NAME])
@@ -175,8 +167,18 @@ export default function App()
                   console.log("Using existing sessionUUID cookie");
                }
 
+               /*
+               ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+               // todo#authHeader - this is our quick rollback plan - if we feel the need to stop using the cookie approach. //
+               // we turn off the shouldStoreNewToken block above, and turn on these 2 lines.                                //
+               ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+               removeCookie(SESSION_UUID_COOKIE_NAME, {path: "/"});
+               localStorage.removeItem("accessToken");
+               */
+
                setIsFullyAuthenticated(true);
                qController.setGotAuthentication();
+               qController.setAuthorizationHeaderValue("Bearer " + accessToken);
 
                setLoggedInUser(user);
                console.log("Token load complete.");
@@ -197,8 +199,8 @@ export default function App()
             // use a random token if anonymous or mock //
             /////////////////////////////////////////////
             console.log("Generating random token...");
+            qController.setAuthorizationHeaderValue(Md5.hashStr(`${new Date()}`));
             setIsFullyAuthenticated(true);
-            qController.setGotAuthentication();
             setCookie(SESSION_UUID_COOKIE_NAME, Md5.hashStr(`${new Date()}`), {path: "/"});
             console.log("Token generation complete.");
             return;
@@ -226,7 +228,6 @@ export default function App()
    const {miniSidenav, direction, layout, openConfigurator, sidenavColor} = controller;
    const [onMouseEnter, setOnMouseEnter] = useState(false);
    const {pathname} = useLocation();
-   const [queryParams] = useSearchParams();
 
    const [needToLoadRoutes, setNeedToLoadRoutes] = useState(true);
    const [sideNavRoutes, setSideNavRoutes] = useState([]);
@@ -518,7 +519,7 @@ export default function App()
                name: loggedInUser?.name ?? "Anonymous",
                key: "username",
                noCollapse: true,
-               icon: <Avatar src={profilePicture} alt="{loggedInUser?.name}" />,
+               icon: <Avatar src={profilePicture} alt="{user?.name}" />,
             };
             setProfileRoutes(profileRoutes);
 
@@ -660,8 +661,6 @@ export default function App()
    const [tableProcesses, setTableProcesses] = useState(null);
    const [dotMenuOpen, setDotMenuOpen] = useState(false);
    const [keyboardHelpOpen, setKeyboardHelpOpen] = useState(false);
-   const [helpHelpActive] = useState(queryParams.has("helpHelp"));
-
    return (
 
       appRoutes && (
@@ -672,7 +671,6 @@ export default function App()
             tableProcesses: tableProcesses,
             dotMenuOpen: dotMenuOpen,
             keyboardHelpOpen: keyboardHelpOpen,
-            helpHelpActive: helpHelpActive,
             setPageHeader: (header: string | JSX.Element) => setPageHeader(header),
             setAccentColor: (accentColor: string) => setAccentColor(accentColor),
             setTableMetaData: (tableMetaData: QTableMetaData) => setTableMetaData(tableMetaData),
@@ -704,4 +702,4 @@ export default function App()
          </QContext.Provider>
       )
    );
-}
+}

src/QContext.tsx

@@ -51,7 +51,6 @@ interface QContext
    ///////////////////////////////////
    pathToLabelMap?: {[path: string]: string};
    branding?: QBrandingMetaData;
-   helpHelpActive?: boolean;
 }
 
 const defaultState = {
@@ -60,7 +59,6 @@ const defaultState = {
    dotMenuOpen: false,
    keyboardHelpOpen: false,
    pathToLabelMap: {},
-   helpHelpActive: false,
 };
 
 const QContext = createContext<QContext>(defaultState);

src/main/java/Placeholder.java

@@ -0,0 +1,10 @@
+/*******************************************************************************
+ ** Placeholder class, because maven really wants some source under src/main?
+ *******************************************************************************/
+public class Placeholder
+{
+   public void f()
+   {
+     
+   }
+}

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

@@ -1,31 +0,0 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2023.  Kingsrook, LLC
- * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
- * contact@kingsrook.com
- * https://github.com/Kingsrook/
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-package com.kingsrook.qqq.frontend.materialdashboard.model.metadata;
-
-
-/*******************************************************************************
- **
- *******************************************************************************/
-public interface MaterialDashboardIconRoleNames
-{
-   String TOP_RIGHT_INSIDE_CARD = "topRightInsideCard";
-}

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

@@ -22,23 +22,17 @@
 package com.kingsrook.qqq.frontend.materialdashboard.model.metadata;
 
 
-import java.util.HashSet;
 import java.util.List;
-import java.util.Set;
-import com.kingsrook.qqq.backend.core.instances.QInstanceValidator;
-import com.kingsrook.qqq.backend.core.model.metadata.QInstance;
 import com.kingsrook.qqq.backend.core.model.metadata.tables.QSupplementalTableMetaData;
-import com.kingsrook.qqq.backend.core.model.metadata.tables.QTableMetaData;
-import com.kingsrook.qqq.backend.core.utils.CollectionUtils;
 
 
 /*******************************************************************************
- ** table-level meta-data for this module (handled as QSupplementalTableMetaData)
+ **
  *******************************************************************************/
 public class MaterialDashboardTableMetaData extends QSupplementalTableMetaData
 {
    private List<List<String>> gotoFieldNames;
-   private List<String> defaultQuickFilterFieldNames;
+
 
 
    /*******************************************************************************
@@ -92,73 +86,4 @@ public class MaterialDashboardTableMetaData extends QSupplementalTableMetaData
       return (this);
    }
 
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   @Override
-   public void validate(QInstance qInstance, QTableMetaData tableMetaData, QInstanceValidator qInstanceValidator)
-   {
-      super.validate(qInstance, tableMetaData, qInstanceValidator);
-
-      String prefix = "MaterialDashboardTableMetaData supplementalTableMetaData for table [" + tableMetaData.getName() + "] ";
-
-      for(List<String> gotoFieldNameSubList : CollectionUtils.nonNullList(gotoFieldNames))
-      {
-         qInstanceValidator.assertCondition(!gotoFieldNameSubList.isEmpty(), prefix + "has an empty gotoFieldNames list");
-         validateListOfFieldNames(tableMetaData, gotoFieldNameSubList, qInstanceValidator, prefix + "gotoFieldNames: ");
-      }
-      validateListOfFieldNames(tableMetaData, defaultQuickFilterFieldNames, qInstanceValidator, prefix + "defaultQuickFilterFieldNames: ");
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   private void validateListOfFieldNames(QTableMetaData tableMetaData, List<String> fieldNames, QInstanceValidator qInstanceValidator, String prefix)
-   {
-      Set<String> usedNames = new HashSet<>();
-      for(String fieldName : CollectionUtils.nonNullList(fieldNames))
-      {
-         if(qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldName), prefix + " unrecognized field name: " + fieldName))
-         {
-            qInstanceValidator.assertCondition(!usedNames.contains(fieldName), prefix + " has a duplicated field name: " + fieldName);
-            usedNames.add(fieldName);
-         }
-      }
-   }
-
-
-
-   /*******************************************************************************
-    ** Getter for defaultQuickFilterFieldNames
-    *******************************************************************************/
-   public List<String> getDefaultQuickFilterFieldNames()
-   {
-      return (this.defaultQuickFilterFieldNames);
-   }
-
-
-
-   /*******************************************************************************
-    ** Setter for defaultQuickFilterFieldNames
-    *******************************************************************************/
-   public void setDefaultQuickFilterFieldNames(List<String> defaultQuickFilterFieldNames)
-   {
-      this.defaultQuickFilterFieldNames = defaultQuickFilterFieldNames;
-   }
-
-
-
-   /*******************************************************************************
-    ** Fluent setter for defaultQuickFilterFieldNames
-    *******************************************************************************/
-   public MaterialDashboardTableMetaData withDefaultQuickFilterFieldNames(List<String> defaultQuickFilterFieldNames)
-   {
-      this.defaultQuickFilterFieldNames = defaultQuickFilterFieldNames;
-      return (this);
-   }
-
 }

src/qqq/assets/theme-dark/base/typography.ts

@@ -149,7 +149,7 @@ interface Types {
 }
 
 const baseProperties = {
-  fontFamily: '"SF Pro Display", "Roboto", "Helvetica", "Arial", sans-serif',
+  fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
   fontWeightLighter: 100,
   fontWeightLight: 300,
   fontWeightRegular: 400,

src/qqq/assets/theme/base/colors.ts

@@ -78,19 +78,6 @@ interface Types
       light: string;
       main: string;
       focus: string;
-   }
-   blueGray:
-      | {
-      main: string;
-   }
-   gray:
-      | {
-      main: string;
-      focus: string;
-   }
-   grayLines:
-      | {
-      main: string;
    }
       | any;
    primary: ColorsTypes | any;
@@ -187,19 +174,6 @@ const colors: Types = {
       focus: "#ffffff",
    },
 
-   blueGray: {
-      main: "#546E7A"
-   },
-
-   gray: {
-      main: "#757575",
-      focus: "#757575",
-   },
-
-   grayLines: {
-      main: "#D6D6D6"
-   },
-
    black: {
       light: "#000000",
       main: "#000000",
@@ -242,7 +216,7 @@ const colors: Types = {
    },
 
    dark: {
-      main: "#212121",
+      main: "#344767",
       focus: "#2c3c58",
    },
 

src/qqq/assets/theme/base/typography.ts

@@ -149,7 +149,7 @@ interface Types {
 }
 
 const baseProperties = {
-  fontFamily: '"SF Pro Display", "Roboto", "Helvetica", "Arial", sans-serif',
+  fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
   fontWeightLighter: 100,
   fontWeightLight: 300,
   fontWeightRegular: 400,
@@ -199,10 +199,9 @@ const typography: Types = {
   },
 
   h3: {
-    fontSize: "1.75rem",
+    fontSize: pxToRem(30),
     lineHeight: 1.375,
     ...baseHeadingProperties,
-    fontWeight: 600
   },
 
   h4: {
@@ -218,10 +217,9 @@ const typography: Types = {
   },
 
   h6: {
-    fontSize: "1.125rem",
+    fontSize: pxToRem(16),
     lineHeight: 1.625,
     ...baseHeadingProperties,
-    fontWeight: 500
   },
 
   subtitle1: {

src/qqq/assets/theme/components/card/index.ts

@@ -31,7 +31,7 @@ type Types = any;
 
 const card: Types = {
    defaultProps: {
-      elevation: 0
+      elevation: 3
    },
    styleOverrides: {
       root: {
@@ -42,7 +42,7 @@ const card: Types = {
          wordWrap: "break-word",
          backgroundColor: white.main,
          backgroundClip: "border-box",
-         border: `${borderWidth[1]} solid ${colors.grayLines.main}`,
+         border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`,
          borderRadius: borderRadius.xl,
          overflow: "visible",
       },

src/qqq/assets/theme/components/tabs/index.ts

@@ -1,75 +1,68 @@
 /**
- =========================================================
- * Material Dashboard 2 PRO React TS - v1.0.0
- =========================================================
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
 
- * Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
- * Copyright 2022 Creative Tim (https://www.creative-tim.com)
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
 
- Coded by www.creative-tim.com
+Coded by www.creative-tim.com
 
  =========================================================
 
- * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
- */
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
 
 // Material Dashboard 2 PRO React TS Base Styles
 import colors from "qqq/assets/theme/base/colors";
+import borders from "qqq/assets/theme/base/borders";
+import boxShadows from "qqq/assets/theme/base/boxShadows";
 
 // Material Dashboard 2 PRO React TS Helper Functions
 import pxToRem from "qqq/assets/theme/functions/pxToRem";
 
-const {grey, white} = colors;
+const { grey, white } = colors;
+const { borderRadius } = borders;
+const { tabsBoxShadow } = boxShadows;
 
 // types
 type Types = any;
 
 const tabs: Types = {
-   styleOverrides: {
-      root: {
-         position: "relative",
-         borderRadius: 0,
-         borderBottom: "1px solid",
-         borderBottomColor: grey[400],
-         minHeight: "unset",
-         padding: "0",
-         margin: "0",
-         "& button": {
-            fontWeight: 500
-         }
-      },
+  styleOverrides: {
+    root: {
+      position: "relative",
+      backgroundColor: grey[100],
+      borderRadius: borderRadius.xl,
+      minHeight: "unset",
+      padding: pxToRem(4),
+    },
 
-      scroller: {
-         marginLeft: "0.5rem"
-      },
+    flexContainer: {
+      height: "100%",
+      position: "relative",
+      zIndex: 10,
+    },
 
-      flexContainer: {
-         height: "100%",
-         position: "relative",
-         width: "fit-content",
-         zIndex: 10,
-      },
+    fixed: {
+      overflow: "unset !important",
+      overflowX: "unset !important",
+    },
 
-      fixed: {
-         overflow: "unset !important",
-         overflowX: "unset !important",
+    vertical: {
+      "& .MuiTabs-indicator": {
+        width: "100%",
       },
+    },
 
-      vertical: {
-         "& .MuiTabs-indicator": {
-            width: "100%",
-         },
-      },
-
-      indicator: {
-         height: "100%",
-         borderRadius: 0,
-         backgroundColor: white.main,
-         borderBottom: "2px solid",
-         borderBottomColor: colors.info.main,
-         transition: "all 500ms ease",
-      },
-   },
+    indicator: {
+      height: "100%",
+      borderRadius: borderRadius.lg,
+      backgroundColor: white.main,
+      boxShadow: tabsBoxShadow.indicator,
+      transition: "all 500ms ease",
+    },
+  },
 };
 
 export default tabs;

src/qqq/assets/theme/components/tabs/tab.ts

@@ -1,17 +1,17 @@
 /**
- =========================================================
- * Material Dashboard 2 PRO React TS - v1.0.0
- =========================================================
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
 
- * Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
- * Copyright 2022 Creative Tim (https://www.creative-tim.com)
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
 
- Coded by www.creative-tim.com
+Coded by www.creative-tim.com
 
  =========================================================
 
- * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
- */
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
 
 // Material Dashboard 2 PRO React TS Base Styles
 import typography from "qqq/assets/theme/base/typography";
@@ -21,50 +21,48 @@ import colors from "qqq/assets/theme/base/colors";
 // Material Dashboard 2 PRO React TS Helper Functions
 import pxToRem from "qqq/assets/theme/functions/pxToRem";
 
-const {size, fontWeightRegular} = typography;
-const {borderRadius} = borders;
-const {dark} = colors;
+const { size, fontWeightRegular } = typography;
+const { borderRadius } = borders;
+const { dark } = colors;
 
 // types
 type Types = any;
 
 const tab: Types = {
-   styleOverrides: {
-      root: {
-         display: "flex",
-         alignItems: "center",
-         flexDirection: "row",
-         flex: "1 1 auto",
-         textAlign: "center",
-         maxWidth: "unset !important",
-         minWidth: "unset !important",
-         minHeight: "unset !important",
-         fontSize: size.md,
-         fontWeight: fontWeightRegular,
-         textTransform: "none",
-         lineHeight: "inherit",
-         padding: "0.75rem 0.5rem 0.5rem",
-         margin: "0 0.5rem",
-         borderRadius: 0,
-         border: 0,
-         color: `${dark.main} !important`,
-         opacity: "1 !important",
+  styleOverrides: {
+    root: {
+      display: "flex",
+      alignItems: "center",
+      flexDirection: "row",
+      flex: "1 1 auto",
+      textAlign: "center",
+      maxWidth: "unset !important",
+      minWidth: "unset !important",
+      minHeight: "unset !important",
+      fontSize: size.md,
+      fontWeight: fontWeightRegular,
+      textTransform: "none",
+      lineHeight: "inherit",
+      padding: pxToRem(4),
+      borderRadius: borderRadius.lg,
+      color: `${dark.main} !important`,
+      opacity: "1 !important",
 
-         "& .material-icons, .material-icons-round": {
-            marginBottom: "0 !important",
-            marginRight: pxToRem(6),
-         },
-
-         "& svg": {
-            marginBottom: "0 !important",
-            marginRight: pxToRem(6),
-         },
+      "& .material-icons, .material-icons-round": {
+        marginBottom: "0 !important",
+        marginRight: pxToRem(6),
       },
 
-      labelIcon: {
-         paddingTop: pxToRem(4),
+      "& svg": {
+        marginBottom: "0 !important",
+        marginRight: pxToRem(6),
       },
-   },
+    },
+
+    labelIcon: {
+      paddingTop: pxToRem(4),
+    },
+  },
 };
 
 export default tab;

src/qqq/assets/theme/components/tooltip.ts

@@ -24,7 +24,7 @@ import borders from "qqq/assets/theme/base/borders";
 // Material Dashboard 2 PRO React TS Helper Functions
 import pxToRem from "qqq/assets/theme/functions/pxToRem";
 
-const { black, light, white, dark } = colors;
+const { black, light } = colors;
 const { size, fontWeightRegular } = typography;
 const { borderRadius } = borders;
 
@@ -39,20 +39,19 @@ const tooltip: Types = {
 
   styleOverrides: {
     tooltip: {
-      maxWidth: pxToRem(300),
-      backgroundColor: white.main,
-      color: dark.main,
+      maxWidth: pxToRem(200),
+      backgroundColor: black.main,
+      color: light.main,
       fontSize: size.sm,
       fontWeight: fontWeightRegular,
-      textAlign: "left",
+      textAlign: "center",
       borderRadius: borderRadius.md,
       opacity: 0.7,
-      padding: "1rem",
-      boxShadow: "0px 0px 12px rgba(128, 128, 128, 0.40)"
+      padding: `${pxToRem(5)} ${pxToRem(8)} ${pxToRem(4)}`,
     },
 
     arrow: {
-      color: white.main,
+      color: black.main,
     },
   },
 };

src/qqq/components/audits/AuditBody.tsx

@@ -402,16 +402,14 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
 
                      return (
                         <Box key={audit0.values.get("id")} className="auditGroupBlock">
-                           <Box position="sticky" top="0" zIndex={3}>
-                              <Box display="flex" flexDirection="row" justifyContent="center" fontSize={14} position={"relative"} top={"-1px"} pb={"6px"} sx={{backgroundImage: "linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,1) 80%, rgba(255,255,255,0))"}}>
-                                 <Box borderTop={1} mt={1.25} mr={1} width="100%" borderColor="#B0B0B0" />
-                                 <Box whiteSpace="nowrap">
-                                    {ValueUtils.getFullWeekday(audit0.values.get("timestamp"))} {timestampParts[0]}
-                                    {timestampParts[0] == todayFormatted ? " (Today)" : ""}
-                                    {timestampParts[0] == yesterdayFormatted ? " (Yesterday)" : ""}
-                                 </Box>
-                                 <Box borderTop={1} mt={1.25} ml={1} width="100%" borderColor="#B0B0B0" />
+                           <Box display="flex" flexDirection="row" justifyContent="center" fontSize={14}>
+                              <Box borderTop={1} mt={1.25} mr={1} width="100%" borderColor="#B0B0B0" />
+                              <Box whiteSpace="nowrap">
+                                 {ValueUtils.getFullWeekday(audit0.values.get("timestamp"))} {timestampParts[0]}
+                                 {timestampParts[0] == todayFormatted ? " (Today)" : ""}
+                                 {timestampParts[0] == yesterdayFormatted ? " (Yesterday)" : ""}
                               </Box>
+                              <Box borderTop={1} mt={1.25} ml={1} width="100%" borderColor="#B0B0B0" />
                            </Box>
 
                            {

src/qqq/components/buttons/DefaultButtons.tsx

@@ -37,7 +37,7 @@ interface QCreateNewButtonProps
 export function QCreateNewButton({tablePath}: QCreateNewButtonProps): JSX.Element
 {
    return (
-      <Box ml={3} mr={0} width={standardWidth}>
+      <Box ml={3} mr={2} width={standardWidth}>
          <Link to={`${tablePath}/create`}>
             <MDButton variant="gradient" color="info" fullWidth startIcon={<Icon>add</Icon>}>
                Create New

src/qqq/components/forms/BooleanFieldSwitch.tsx

@@ -19,18 +19,17 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {Box, InputLabel} from "@mui/material";
+import {InputLabel} from "@mui/material";
 import Stack from "@mui/material/Stack";
 import {styled} from "@mui/material/styles";
 import Switch from "@mui/material/Switch";
 import Typography from "@mui/material/Typography";
 import {useFormikContext} from "formik";
 import React, {SyntheticEvent} from "react";
-import colors from "qqq/assets/theme/base/colors";
 
 const AntSwitch = styled(Switch)(({theme}) => ({
-   width: 32,
-   height: 20,
+   width: 28,
+   height: 16,
    padding: 0,
    display: "flex",
    "&:active": {
@@ -54,19 +53,15 @@ const AntSwitch = styled(Switch)(({theme}) => ({
    },
    "& .MuiSwitch-thumb": {
       boxShadow: "0 2px 4px 0 rgb(0 35 11 / 20%)",
-      width: 16,
-      height: 16,
-      borderRadius: 8,
+      width: 12,
+      height: 12,
+      borderRadius: 6,
       transition: theme.transitions.create([ "width" ], {
          duration: 200,
       }),
    },
-   "&.nullSwitch .MuiSwitch-thumb": {
-      width: 28,
-   },
    "& .MuiSwitch-track": {
-      height: 20,
-      borderRadius: 20 / 2,
+      borderRadius: 16 / 2,
       opacity: 1,
       backgroundColor:
          theme.palette.mode === "dark" ? "rgba(255,255,255,.35)" : "rgba(0,0,0,.25)",
@@ -83,7 +78,6 @@ interface Props
 }
 
 
-
 function BooleanFieldSwitch({name, label, value, isDisabled}: Props) : JSX.Element
 {
    const {setFieldValue} = useFormikContext();
@@ -102,29 +96,27 @@ function BooleanFieldSwitch({name, label, value, isDisabled}: Props) : JSX.Eleme
       setFieldValue(name, !value);
    }
 
-   const classNullSwitch = (value === null || value == undefined || `${value}` == "") ? "nullSwitch" : "";
-
    return (
-      <Box bgcolor={isDisabled ? colors.grey[200] : ""}>
+      <>
          <InputLabel shrink={true}>{label}</InputLabel>
-         <Stack direction="row" spacing={1} alignItems="center" height="37px">
+         <Stack direction="row" spacing={1} alignItems="center">
             <Typography
-               fontSize="1rem"
+               fontSize="0.875rem"
                color={value === false ? "auto" : "#bfbfbf" }
                onClick={(e) => setSwitch(e, false)}
                sx={{cursor: value === false || isDisabled ? "inherit" : "pointer"}}>
          No
             </Typography>
-            <AntSwitch className={classNullSwitch} name={name} checked={value} onClick={toggleSwitch} disabled={isDisabled} />
+            <AntSwitch name={name} checked={value} onClick={toggleSwitch} disabled={isDisabled} />
             <Typography
-               fontSize="1rem"
+               fontSize="0.875rem"
                color={value === true ? "auto" : "#bfbfbf"}
                onClick={(e) => setSwitch(e, true)}
                sx={{cursor: value === true || isDisabled ? "inherit" : "pointer"}}>
          Yes
             </Typography>
          </Stack>
-      </Box>
+      </>
    );
 }
 

src/qqq/components/forms/DynamicForm.tsx

@@ -32,7 +32,6 @@ import React, {useState} from "react";
 import QDynamicFormField from "qqq/components/forms/DynamicFormField";
 import DynamicSelect from "qqq/components/forms/DynamicSelect";
 import MDTypography from "qqq/components/legacy/MDTypography";
-import HelpContent from "qqq/components/misc/HelpContent";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
 
 interface Props
@@ -42,13 +41,16 @@ interface Props
    bulkEditMode?: boolean;
    bulkEditSwitchChangeHandler?: any;
    record?: QRecord;
-   helpRoles?: string[];
-   helpContentKeyPrefix?: string;
 }
 
-function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHandler, record, helpRoles, helpContentKeyPrefix}: Props): JSX.Element
+function QDynamicForm(props: Props): JSX.Element
 {
-   const {formFields, values, errors, touched} = formData;
+   const {
+      formData, formLabel, bulkEditMode, bulkEditSwitchChangeHandler,
+   } = props;
+   const {
+      formFields, values, errors, touched,
+   } = formData;
 
    const formikProps = useFormikContext();
    const [fileName, setFileName] = useState(null as string);
@@ -68,8 +70,8 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
    {
       setFileName(null);
       formikProps.setFieldValue(fieldName, null);
-      record?.values.delete(fieldName)
-      record?.displayValues.delete(fieldName)
+      props.record?.values.delete(fieldName)
+      props.record?.displayValues.delete(fieldName)
    };
 
    const bulkEditSwitchChanged = (name: string, value: boolean) =>
@@ -77,7 +79,6 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
       bulkEditSwitchChangeHandler(name, value);
    };
 
-
    return (
       <Box>
          <Box lineHeight={0}>
@@ -95,38 +96,29 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
                   && Object.keys(formFields).map((fieldName: any) =>
                   {
                      const field = formFields[fieldName];
-                     if (field.omitFromQDynamicForm)
-                     {
-                        return null;
-                     }
-
                      if (values[fieldName] === undefined)
                      {
                         values[fieldName] = "";
                      }
 
-                     let formattedHelpContent = <HelpContent helpContents={field.fieldMetaData.helpContents} roles={helpRoles} helpContentKey={`${helpContentKeyPrefix ?? ""}field:${fieldName}`} />;
-                     if(formattedHelpContent)
+                     if (field.omitFromQDynamicForm)
                      {
-                        formattedHelpContent = <Box color="#757575" fontSize="0.875rem" mt="-0.25rem">{formattedHelpContent}</Box>
+                        return null;
                      }
 
-                     const labelElement = <Box fontSize="1rem" fontWeight="500" marginBottom="0.25rem">
-                        <label htmlFor={field.name}>{field.label}</label>
-                     </Box>
-
                      if (field.type === "file")
                      {
                         const pseudoField = new QFieldMetaData({name: fieldName, type: QFieldType.BLOB});
                         return (
                            <Grid item xs={12} sm={6} key={fieldName}>
                               <Box mb={1.5}>
-                                 {labelElement}
+
+                                 <InputLabel shrink={true}>{field.label}</InputLabel>
                                  {
-                                    record && record.values.get(fieldName) && <Box fontSize="0.875rem" pb={1}>
+                                    props.record && props.record.values.get(fieldName) && <Box fontSize="0.875rem" pb={1}>
                                        Current File:
                                        <Box display="inline-flex" pl={1}>
-                                          {ValueUtils.getDisplayValue(pseudoField, record, "view")}
+                                          {ValueUtils.getDisplayValue(pseudoField, props.record, "view")}
                                           <Tooltip placement="bottom" title="Remove current file">
                                              <Icon className="blobIcon" fontSize="small" onClick={(e) => removeFile(fieldName)}>delete</Icon>
                                           </Tooltip>
@@ -170,20 +162,18 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
 
                         return (
                            <Grid item xs={12} sm={6} key={fieldName}>
-                              {labelElement}
                               <DynamicSelect
                                  tableName={field.possibleValueProps.tableName}
                                  processName={field.possibleValueProps.processName}
                                  fieldName={fieldName}
                                  isEditable={field.isEditable}
-                                 fieldLabel=""
+                                 fieldLabel={field.label}
                                  initialValue={values[fieldName]}
                                  initialDisplayValue={field.possibleValueProps.initialDisplayValue}
                                  bulkEditMode={bulkEditMode}
                                  bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
                                  otherValues={otherValuesMap}
                               />
-                              {formattedHelpContent}
                            </Grid>
                         );
                      }
@@ -192,11 +182,9 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
                      // todo? placeholder={password.placeholder}
                      return (
                         <Grid item xs={12} sm={6} key={fieldName}>
-                           {labelElement}
                            <QDynamicFormField
-                              id={field.name}
                               type={field.type}
-                              label=""
+                              label={field.label}
                               isEditable={field.isEditable}
                               name={fieldName}
                               displayFormat={field.displayFormat}
@@ -207,7 +195,6 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
                               success={`${values[fieldName]}` !== "" && !errors[fieldName] && touched[fieldName]}
                               formFieldObject={field}
                            />
-                           {formattedHelpContent}
                         </Grid>
                      );
                   })}
@@ -220,7 +207,6 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
 QDynamicForm.defaultProps = {
    formLabel: undefined,
    bulkEditMode: false,
-   helpRoles: ["ALL_SCREENS"],
    bulkEditSwitchChangeHandler: () =>
    {
    },

src/qqq/components/forms/DynamicFormField.tsx

@@ -25,7 +25,6 @@ import Switch from "@mui/material/Switch";
 import {ErrorMessage, Field, useFormikContext} from "formik";
 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";
@@ -53,7 +52,6 @@ function QDynamicFormField({
 {
    const [switchChecked, setSwitchChecked] = useState(false);
    const [isDisabled, setIsDisabled] = useState(!isEditable || bulkEditMode);
-   const {inputBorderColor} = colors;
 
    const {setFieldValue} = useFormikContext();
 
@@ -90,14 +88,7 @@ function QDynamicFormField({
    if (type === "checkbox")
    {
       getsBulkEditHtmlLabel = false;
-      field = (<>
-         <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>}
-            </MDTypography>
-         </Box>
-      </>);
+      field = (<BooleanFieldSwitch name={name} label={label} value={value} isDisabled={isDisabled} />);
    }
    else if (type === "ace")
    {
@@ -124,7 +115,7 @@ function QDynamicFormField({
                width="100%"
                height="300px"
                value={value}
-               style={{border: `1px solid ${inputBorderColor}`, borderRadius: "0.75rem"}}
+               style={{border: "1px solid gray"}}
             />
          </>
       );
@@ -133,7 +124,7 @@ function QDynamicFormField({
    {
       field = (
          <>
-            <Field {...rest} 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="standard" label={label} InputLabelProps={inputLabelProps} InputProps={inputProps} fullWidth disabled={isDisabled}
                onKeyPress={(e: any) =>
                {
                   if (e.key === "Enter")
@@ -173,14 +164,6 @@ function QDynamicFormField({
                   id={`bulkEditSwitch-${name}`}
                   checked={switchChecked}
                   onClick={bulkEditSwitchChanged}
-                  sx={{top: "-4px",
-                     "& .MuiSwitch-track": {
-                        height: 20,
-                        borderRadius: 10,
-                        top: -3,
-                        position: "relative"
-                     }
-                  }}
                />
             </Box>
             <Box width="100%" sx={{background: (type == "checkbox" && isDisabled) ? "#f0f2f5!important" : "initial"}}>

src/qqq/components/forms/DynamicFormUtils.ts

@@ -89,7 +89,6 @@ class DynamicFormUtils
       label += field.isRequired ? " *" : "";
 
       return ({
-         fieldMetaData: field,
          name: field.name,
          label: label,
          isRequired: field.isRequired,

src/qqq/components/forms/DynamicSelect.tsx

@@ -29,7 +29,6 @@ import Switch from "@mui/material/Switch";
 import TextField from "@mui/material/TextField";
 import {ErrorMessage, useFormikContext} from "formik";
 import React, {useEffect, useState} from "react";
-import colors from "qqq/assets/theme/base/colors";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import Client from "qqq/utils/qqq/Client";
 
@@ -50,8 +49,6 @@ interface Props
    bulkEditMode?: boolean;
    bulkEditSwitchChangeHandler?: any;
    otherValues?: Map<string, any>;
-   variant: "standard" | "outlined";
-   initiallyOpen: boolean;
 }
 
 DynamicSelect.defaultProps = {
@@ -66,8 +63,6 @@ DynamicSelect.defaultProps = {
    isMultiple: false,
    bulkEditMode: false,
    otherValues: new Map<string, any>(),
-   variant: "outlined",
-   initiallyOpen: false,
    bulkEditSwitchChangeHandler: () =>
    {
    },
@@ -75,14 +70,12 @@ DynamicSelect.defaultProps = {
 
 const qController = Client.getInstance();
 
-function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabel, inForm, initialValue, initialDisplayValue, initialValues, onChange, isEditable, isMultiple, bulkEditMode, bulkEditSwitchChangeHandler, otherValues, variant, initiallyOpen}: Props)
+function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabel, inForm, initialValue, initialDisplayValue, initialValues, onChange, isEditable, isMultiple, bulkEditMode, bulkEditSwitchChangeHandler, otherValues}: Props)
 {
-   const [open, setOpen] = useState(initiallyOpen);
+   const [open, setOpen] = useState(false);
    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))))
-   const {inputBorderColor} = colors;
 
    ////////////////////////////////////////////////////////////////////////////////////////////////
    // default value - needs to be an array (from initialValues (array) prop) for multiple mode - //
@@ -116,14 +109,7 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
       {
          // console.log("First render, so not searching...");
          setFirstRender(false);
-
-         /*
-         if(!initiallyOpen)
-         {
-            console.log("returning because not initially open?");
-            return;
-         }
-         */
+         return;
       }
       // console.log("Use effect for searchTerm - searching!");
 
@@ -156,24 +142,6 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
       };
    }, [ searchTerm ]);
 
-   // todo - finish... call it in onOpen?
-   const reloadIfOtherValuesAreChanged = () =>
-   {
-      if(JSON.stringify(Object.fromEntries(otherValues)) != otherValuesWhenResultsWereLoaded)
-      {
-         (async () =>
-         {
-            setLoading(true);
-            setOptions([]);
-            console.log("Refreshing possible values...");
-            const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, fieldName, searchTerm ?? "", null, otherValues);
-            setLoading(false);
-            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}`);
@@ -262,7 +230,7 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
       // attributes.  so, doing this, w/ key=id, seemed to fix it.                                 //
       ///////////////////////////////////////////////////////////////////////////////////////////////
       return (
-         <li {...props} key={option.id} style={{fontSize: "1rem"}}>
+         <li {...props} key={option.id}>
             {content}
          </li>
       );
@@ -276,35 +244,13 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
       bulkEditSwitchChangeHandler(fieldName, newSwitchValue);
    };
 
-   ////////////////////////////////////////////
-   // for outlined style, adjust some styles //
-   ////////////////////////////////////////////
-   let autocompleteSX = {};
-   if (variant == "outlined")
-   {
-      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
-         }
-      }
-   }
+   // console.log(`default value: ${JSON.stringify(defaultValue)}`);
 
    const autocomplete = (
       <Box>
          <Autocomplete
             id={overrideId ?? fieldName}
-            sx={autocompleteSX}
+            sx={{background: isDisabled ? "#f0f2f5!important" : "initial"}}
             open={open}
             fullWidth
             onOpen={() =>
@@ -359,7 +305,7 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
                <TextField
                   {...params}
                   label={fieldLabel}
-                  variant={variant}
+                  variant="standard"
                   autoComplete="off"
                   type="search"
                   InputProps={{
@@ -395,14 +341,6 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
                   id={`bulkEditSwitch-${fieldName}`}
                   checked={switchChecked}
                   onClick={bulkEditSwitchChanged}
-                  sx={{top: "-4px",
-                     "& .MuiSwitch-track": {
-                        height: 20,
-                        borderRadius: 10,
-                        top: -3,
-                        position: "relative"
-                     }
-                  }}
                />
             </Box>
             <Box width="100%">

src/qqq/components/forms/EntityForm.tsx

@@ -37,12 +37,10 @@ import React, {useContext, useEffect, useReducer, useState} from "react";
 import {useLocation, useNavigate, useParams} from "react-router-dom";
 import * as Yup from "yup";
 import QContext from "QContext";
-import colors from "qqq/assets/theme/base/colors";
 import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
 import QDynamicForm from "qqq/components/forms/DynamicForm";
 import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
 import MDTypography from "qqq/components/legacy/MDTypography";
-import HelpContent from "qqq/components/misc/HelpContent";
 import QRecordSidebar from "qqq/components/misc/RecordSidebar";
 import HtmlUtils from "qqq/utils/HtmlUtils";
 import Client from "qqq/utils/qqq/Client";
@@ -81,7 +79,6 @@ function EntityForm(props: Props): JSX.Element
    const [validations, setValidations] = useState({});
    const [initialValues, setInitialValues] = useState({} as { [key: string]: any });
    const [formFields, setFormFields] = useState(null as Map<string, any>);
-   const [t1section, setT1Section] = useState(null as QTableSection);
    const [t1sectionName, setT1SectionName] = useState(null as string);
    const [nonT1Sections, setNonT1Sections] = useState([] as QTableSection[]);
 
@@ -154,9 +151,7 @@ function EntityForm(props: Props): JSX.Element
       {
          return <div>Loading...</div>;
       }
-
-      const helpRoles = [props.id ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"]
-      return <QDynamicForm formData={formData} record={record} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableName};`} />;
+      return <QDynamicForm formData={formData} record={record} />;
    }
 
    if (!asyncLoadInited)
@@ -335,7 +330,6 @@ function EntityForm(props: Props): JSX.Element
          /////////////////////////////////////
          const dynamicFormFieldsBySection = new Map<string, any>();
          let t1sectionName;
-         let t1section;
          const nonT1Sections: QTableSection[] = [];
          for (let i = 0; i < tableSections.length; i++)
          {
@@ -388,7 +382,6 @@ function EntityForm(props: Props): JSX.Element
             if (section.tier === "T1")
             {
                t1sectionName = section.name;
-               t1section = section;
             }
             else
             {
@@ -396,7 +389,6 @@ function EntityForm(props: Props): JSX.Element
             }
          }
          setT1SectionName(t1sectionName);
-         setT1Section(t1section);
          setNonT1Sections(nonT1Sections);
          setFormFields(dynamicFormFieldsBySection);
          setValidations(Yup.object().shape(formValidations));
@@ -434,11 +426,6 @@ function EntityForm(props: Props): JSX.Element
       actions.setSubmitting(true);
       await (async () =>
       {
-         /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-         // we will be manipulating the values sent to the backend, so clone values so they remained unchanged for the form widgets //
-         /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-         const valuesToPost = JSON.parse(JSON.stringify(values));
-
          for(let fieldName of tableMetaData.fields.keys())
          {
             const fieldMetaData = tableMetaData.fields.get(fieldName);
@@ -451,17 +438,17 @@ function EntityForm(props: Props): JSX.Element
             // changing from, say, 12:15:30 to just 12:15:00... this seems to get around that, for cases when the       //
             // user didn't change the value in the field (but if the user did change the value, then we will submit it) //
             //////////////////////////////////////////////////////////////////////////////////////////////////////////////
-            if(fieldMetaData.type === QFieldType.DATE_TIME && valuesToPost[fieldName])
+            if(fieldMetaData.type === QFieldType.DATE_TIME && values[fieldName])
             {
-               console.log(`DateTime ${fieldName}: Initial value: [${initialValues[fieldName]}] -> [${valuesToPost[fieldName]}]`)
-               if (initialValues[fieldName] == valuesToPost[fieldName])
+               console.log(`DateTime ${fieldName}: Initial value: [${initialValues[fieldName]}] -> [${values[fieldName]}]`)
+               if (initialValues[fieldName] == values[fieldName])
                {
                   console.log(" - Is the same, so, deleting from the post");
-                  delete (valuesToPost[fieldName]);
+                  delete (values[fieldName]);
                }
                else
                {
-                  valuesToPost[fieldName] = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(valuesToPost[fieldName]);
+                  values[fieldName] = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(values[fieldName]);
                }
             }
 
@@ -474,14 +461,10 @@ function EntityForm(props: Props): JSX.Element
             ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
             if(fieldMetaData.type === QFieldType.BLOB)
             {
-               if(typeof valuesToPost[fieldName] === "string")
+               if(typeof values[fieldName] === "string")
                {
                   console.log(`${fieldName} value was a string, so, we're deleting it from the values array, to not submit it to the backend, to not change it.`);
-                  delete(valuesToPost[fieldName]);
-               }
-               else
-               {
-                  valuesToPost[fieldName] = values[fieldName];
+                  delete(values[fieldName]);
                }
             }
          }
@@ -490,7 +473,7 @@ function EntityForm(props: Props): JSX.Element
          {
             // todo - audit that it's a dupe
             await qController
-               .update(tableName, props.id, valuesToPost)
+               .update(tableName, props.id, values)
                .then((record) =>
                {
                   if (props.isModal)
@@ -523,7 +506,7 @@ function EntityForm(props: Props): JSX.Element
          else
          {
             await qController
-               .create(tableName, valuesToPost)
+               .create(tableName, values)
                .then((record) =>
                {
                   if (props.isModal)
@@ -560,19 +543,6 @@ function EntityForm(props: Props): JSX.Element
    const formId = props.id != null ? `edit-${tableMetaData?.name}-form` : `create-${tableMetaData?.name}-form`;
 
    let body;
-
-   const getSectionHelp = (section: QTableSection) =>
-   {
-      const helpRoles = [props.id ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"]
-      const formattedHelpContent = <HelpContent helpContents={section.helpContents} roles={helpRoles} helpContentKey={`table:${tableMetaData.name};section:${section.name}`} />;
-
-      return formattedHelpContent && (
-         <Box px={"1.5rem"} fontSize={"0.875rem"}>
-            {formattedHelpContent}
-         </Box>
-      )
-   }
-
    if (notAllowedError)
    {
       body = (
@@ -594,26 +564,23 @@ function EntityForm(props: Props): JSX.Element
    }
    else
    {
-      const cardElevation = props.isModal ? 3 : 0;
+      const cardElevation = props.isModal ? 3 : 1;
       body = (
          <Box mb={3}>
-            {
-               (alertContent || warningContent) &&
-               <Grid container spacing={3}>
-                  <Grid item xs={12}>
-                     {alertContent ? (
-                        <Box mb={3}>
-                           <Alert severity="error" onClose={() => setAlertContent(null)}>{alertContent}</Alert>
-                        </Box>
-                     ) : ("")}
-                     {warningContent ? (
-                        <Box mb={3}>
-                           <Alert severity="warning" onClose={() => setWarningContent(null)}>{warningContent}</Alert>
-                        </Box>
-                     ) : ("")}
-                  </Grid>
+            <Grid container spacing={3}>
+               <Grid item xs={12}>
+                  {alertContent ? (
+                     <Box mb={3}>
+                        <Alert severity="error" onClose={() => setAlertContent(null)}>{alertContent}</Alert>
+                     </Box>
+                  ) : ("")}
+                  {warningContent ? (
+                     <Box mb={3}>
+                        <Alert severity="warning" onClose={() => setWarningContent(null)}>{warningContent}</Alert>
+                     </Box>
+                  ) : ("")}
                </Grid>
-            }
+            </Grid>
             <Grid container spacing={3}>
                {
                   !props.isModal &&
@@ -651,11 +618,10 @@ function EntityForm(props: Props): JSX.Element
                                        <MDTypography variant="h5">{formTitle}</MDTypography>
                                     </Box>
                                  </Box>
-                                 {t1section && getSectionHelp(t1section)}
                                  {
                                     t1sectionName && formFields ? (
-                                       <Box px={3}>
-                                          <Box pb={"0.25rem"} width="100%">
+                                       <Box pb={1} px={3}>
+                                          <Box p={3} width="100%">
                                              {getFormSection(values, touched, formFields.get(t1sectionName), errors)}
                                           </Box>
                                        </Box>
@@ -669,9 +635,8 @@ function EntityForm(props: Props): JSX.Element
                                     <MDTypography variant="h6" p={3} pb={1}>
                                        {section.label}
                                     </MDTypography>
-                                    {getSectionHelp(section)}
                                     <Box pb={1} px={3}>
-                                       <Box pb={"0.75rem"} width="100%">
+                                       <Box p={3} width="100%">
                                           {getFormSection(values, touched, formFields.get(section.name), errors)}
                                        </Box>
                                     </Box>

src/qqq/components/horseshoe/Breadcrumbs.tsx

@@ -25,7 +25,6 @@ import Icon from "@mui/material/Icon";
 import {ReactNode, useContext} from "react";
 import {Link} from "react-router-dom";
 import QContext from "QContext";
-import colors from "qqq/assets/theme/base/colors";
 import MDTypography from "qqq/components/legacy/MDTypography";
 
 interface Props
@@ -113,35 +112,43 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
       <Box mr={{xs: 0, xl: 8}}>
          <MuiBreadcrumbs
             sx={{
-               fontSize: "1.125rem",
-               fontWeight: "500",
-               color: colors.dark.main,
-               "& li": {
-                  lineHeight: "unset!important"
-               },
-               "& a": {
-                  color: colors.gray.main
-               },
                "& .MuiBreadcrumbs-separator": {
-                  fontSize: "1.125rem",
-                  fontWeight: "500",
-                  color: colors.dark.main
+                  color: ({palette: {white, grey}}) => (light ? white.main : grey[600]),
                },
             }}
          >
             <Link to="/">
-               <Icon sx={{fontSize: "1.25rem!important", position: "relative", top: "0.25rem"}}>{icon}</Icon>
+               <MDTypography
+                  component="span"
+                  variant="body2"
+                  color={light ? "white" : "dark"}
+                  opacity={light ? 0.8 : 0.5}
+                  sx={{lineHeight: 0}}
+               >
+                  <Icon>{icon}</Icon>
+               </MDTypography>
             </Link>
             {fullRoutes.map((fullRoute: string) => (
                <Link to={fullRoute} key={fullRoute}>
-                  {fullPathToLabel(fullRoute, fullRoute.replace(/.*\//, ""))}
+                  <MDTypography
+                     component="span"
+                     variant="button"
+                     fontWeight="regular"
+                     textTransform="capitalize"
+                     color={light ? "white" : "dark"}
+                     opacity={light ? 0.8 : 0.5}
+                     sx={{lineHeight: 0}}
+                  >
+                     {fullPathToLabel(fullRoute, fullRoute.replace(/.*\//, ""))}
+                  </MDTypography>
                </Link>
             ))}
          </MuiBreadcrumbs>
          <MDTypography
             pt={1}
+            fontWeight="bold"
             textTransform="capitalize"
-            variant="h3"
+            variant="h5"
             color={light ? "white" : "dark"}
             noWrap
          >

src/qqq/components/horseshoe/NavBar.tsx

@@ -19,7 +19,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {Popper, InputAdornment} from "@mui/material";
+import {Popper} from "@mui/material";
 import AppBar from "@mui/material/AppBar";
 import Autocomplete from "@mui/material/Autocomplete";
 import Badge from "@mui/material/Badge";
@@ -34,8 +34,8 @@ 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";
-import {navbar, navbarContainer, navbarRow, navbarMobileMenu, recentlyViewedMenu,} from "qqq/components/horseshoe/Styles";
-import {setTransparentNavbar, useMaterialUIController, setMiniSidenav} from "qqq/context";
+import {navbar, navbarContainer, navbarIconButton, navbarRow,} from "qqq/components/horseshoe/Styles";
+import {setTransparentNavbar, useMaterialUIController,} from "qqq/context";
 import HistoryUtils from "qqq/utils/HistoryUtils";
 
 // Declaring prop types for NavBar
@@ -57,7 +57,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
 {
    const [navbarType, setNavbarType] = useState<"fixed" | "absolute" | "relative" | "static" | "sticky">();
    const [controller, dispatch] = useMaterialUIController();
-   const {miniSidenav, transparentNavbar, fixedNavbar, darkMode,} = controller;
+   const {transparentNavbar, fixedNavbar, darkMode,} = controller;
    const [openMenu, setOpenMenu] = useState<any>(false);
    const [history, setHistory] = useState<any>([] as HistoryEntry[]);
    const [autocompleteValue, setAutocompleteValue] = useState<any>(null);
@@ -105,8 +105,6 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
       return () => window.removeEventListener("scroll", handleTransparentNavbar);
    }, [dispatch, fixedNavbar]);
 
-   const handleMiniSidenav = () => setMiniSidenav(dispatch, !miniSidenav);
-
    const goToHistory = (path: string) =>
    {
       navigate(path);
@@ -159,20 +157,12 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
             options={history}
             autoHighlight
             blurOnSelect
-            style={{width: "16rem"}}
+            style={{width: "200px"}}
             onOpen={handleHistoryOnOpen}
             onChange={handleAutocompleteOnChange}
             PopperComponent={CustomPopper}
             isOptionEqualToValue={(option, value) => option.id === value.id}
-            sx={recentlyViewedMenu}
-            renderInput={(params) => <TextField {...params}  label="Recently Viewed Records" InputProps={{
-               ...params.InputProps,
-               endAdornment: (
-                  <InputAdornment position="end">
-                     <Icon sx={{position: "relative", right: "-1rem"}}>keyboard_arrow_down</Icon>
-                  </InputAdornment>
-               )
-            }} />}
+            renderInput={(params) => <TextField {...params} label="Recently Viewed Records" />}
             renderOption={(props, option: HistoryEntry) => (
                <Box {...props} component="li" key={option.id} sx={{width: "auto"}}>
                   <Box sx={{width: "auto", px: "8px", whiteSpace: "overflow"}} key={option.id}>
@@ -185,6 +175,22 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
       );
    }
 
+
+   // Render the notifications menu
+   const renderMenu = () => (
+      <Menu
+         anchorEl={openMenu}
+         anchorReference={null}
+         anchorOrigin={{
+            vertical: "bottom",
+            horizontal: "left",
+         }}
+         open={Boolean(openMenu)}
+         onClose={handleCloseMenu}
+         sx={{mt: 2}}
+      />
+   );
+
    // Styles for the navbar icons
    const iconsStyle = ({
       palette: {dark, white, text},
@@ -234,22 +240,26 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
       >
          <Toolbar sx={navbarContainer}>
             <Box color="inherit" mb={{xs: 1, md: 0}} sx={(theme) => navbarRow(theme, {isMini})}>
-               <IconButton
-                  size="small"
-                  disableRipple
-                  color="inherit"
-                  sx={navbarMobileMenu}
-                  onClick={handleMiniSidenav}
-               >
-                  <Icon sx={iconsStyle} fontSize="large">menu</Icon>
-               </IconButton>
                <QBreadcrumbs icon="home" title={breadcrumbTitle} route={route} light={light} />
             </Box>
             {isMini ? null : (
                <Box sx={(theme) => navbarRow(theme, {isMini})}>
-                  <Box pr={0} mr={-2} mt={-4}>
+                  <Box pr={1}>
                      {renderHistory()}
                   </Box>
+                  <Box color={light ? "white" : "inherit"}>
+                     <IconButton
+                        size="small"
+                        color="inherit"
+                        sx={navbarIconButton}
+                        onClick={handleOpenMenu}
+                     >
+                        <Badge badgeContent={0} color="error" variant="dot">
+                           <Icon sx={iconsStyle}>notifications</Icon>
+                        </Badge>
+                     </IconButton>
+                     {renderMenu()}
+                  </Box>
                </Box>
             )}
          </Toolbar>

src/qqq/components/horseshoe/Styles.ts

@@ -20,7 +20,6 @@
  */
 
 import {Theme} from "@mui/material/styles";
-import colors from "qqq/assets/theme/base/colors";
 
 function navbar(theme: Theme | any, ownerState: any)
 {
@@ -111,10 +110,11 @@ const navbarContainer = ({breakpoints}: Theme): any => ({
 const navbarRow = ({breakpoints}: Theme, {isMini}: any) => ({
    display: "flex",
    alignItems: "center",
+   justifyContent: "space-between",
    width: "100%",
 
    [breakpoints.up("md")]: {
-      justifyContent: "stretch",
+      justifyContent: isMini ? "space-between" : "stretch",
       width: isMini ? "100%" : "max-content",
    },
 
@@ -146,37 +146,12 @@ const navbarDesktopMenu = ({breakpoints}: Theme) => ({
    display: "none !important",
    cursor: "pointer",
 
-   [breakpoints.down("sm")]: {
+   [breakpoints.up("xl")]: {
       display: "inline-block !important",
    },
 });
 
-const recentlyViewedMenu = ({breakpoints}: Theme) => ({
-   "& .MuiInputLabel-root": {
-      color: colors.gray.main,
-      fontWeight: "500",
-      fontSize: "1rem"
-   },
-   "& .MuiInputAdornment-root": {
-      marginTop: "0.5rem",
-      color: colors.gray.main,
-      fontSize: "1rem"
-   },
-   "& .MuiOutlinedInput-root": {
-      borderRadius: "0",
-      padding: "0"
-   },
-   "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
-      border: "0"
-   },
-   display: "block",
-   [breakpoints.down("md")]: {
-      display: "none !important",
-   },
-});
-
 const navbarMobileMenu = ({breakpoints}: Theme) => ({
-   left: "-0.75rem",
    display: "inline-block",
    lineHeight: 0,
 
@@ -192,5 +167,4 @@ export {
    navbarIconButton,
    navbarDesktopMenu,
    navbarMobileMenu,
-   recentlyViewedMenu
 };

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

@@ -27,7 +27,7 @@ export default styled(Drawer)(({theme, ownerState}: { theme?: Theme | any; owner
    const {palette, boxShadows, transitions, breakpoints, functions} = theme;
    const {transparentSidenav, whiteSidenav, miniSidenav, darkMode} = ownerState;
 
-   const sidebarWidth = 245;
+   const sidebarWidth = 250;
    const {transparent, gradients, white, background} = palette;
    const {xxl} = boxShadows;
    const {pxToRem, linearGradient} = functions;
@@ -94,9 +94,6 @@ export default styled(Drawer)(({theme, ownerState}: { theme?: Theme | any; owner
       "& .MuiDrawer-paper": {
          boxShadow: xxl,
          border: "none",
-         margin: "0",
-         borderRadius: "0",
-         height: "100%",
 
          ...(miniSidenav ? drawerCloseStyles() : drawerOpenStyles()),
       },

src/qqq/components/horseshoe/sidenav/styles/SideNavCollapse.ts

@@ -64,8 +64,7 @@ function collapseItem(theme: Theme, ownerState: any)
       borderRadius: borderRadius.md,
       cursor: "pointer",
       userSelect: "none",
-      whiteSpace: "wrap",
-      overflow: "hidden",
+      whiteSpace: "nowrap",
       boxShadow: active && !whiteSidenav && !darkMode && !transparentSidenav ? md : "none",
       [breakpoints.up("xl")]: {
          transition: transitions.create(["box-shadow", "background-color"], {
@@ -74,10 +73,6 @@ function collapseItem(theme: Theme, ownerState: any)
          }),
       },
 
-      "& .MuiListItemText-primary": {
-         lineHeight: "revert"
-      },
-
       "&:hover, &:focus": {
          backgroundColor:
         transparentSidenav && !darkMode

src/qqq/components/legacy/MDInput/MDInputRoot.tsx

@@ -69,15 +69,7 @@ export default styled(TextField)(({theme, ownerState}: { theme?: Theme; ownerSta
    });
 
    return {
-      "& .MuiInputBase-root": {
-         backgroundColor: disabled ? `${grey[200]} !important` : transparent.main,
-         borderRadius: "0.75rem",
-      },
-      "& input": {
-         backgroundColor: `${transparent.main}!important`,
-         padding: "0.5rem",
-         fontSize: "1rem",
-      },
+      backgroundColor: disabled ? `${grey[200]} !important` : transparent.main,
       pointerEvents: disabled ? "none" : "auto",
       ...(error && errorStyles()),
       ...(success && successStyles()),

src/qqq/components/legacy/Theme/base/typography.ts

@@ -149,7 +149,7 @@ interface Types {
 }
 
 const baseProperties = {
-  fontFamily: '"SF Pro Display", "Roboto", "Helvetica", "Arial", sans-serif',
+  fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
   fontWeightLighter: 100,
   fontWeightLight: 300,
   fontWeightRegular: 400,

src/qqq/components/legacy/typography.ts

@@ -153,7 +153,7 @@ interface Types
 }
 
 const baseProperties = {
-   fontFamily: "\"SF Pro Display\", \"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
+   fontFamily: "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
    fontWeightLighter: 100,
    fontWeightLight: 300,
    fontWeightRegular: 400,

src/qqq/components/misc/FieldAutoComplete.tsx

@@ -1,158 +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 {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
-import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-import Autocomplete, {AutocompleteRenderOptionState} from "@mui/material/Autocomplete";
-import TextField from "@mui/material/TextField";
-import React, {ReactNode} from "react";
-
-interface FieldAutoCompleteProps
-{
-   id: string;
-   metaData: QInstance;
-   tableMetaData: QTableMetaData;
-   handleFieldChange: (event: any, newValue: any, reason: string) => void;
-   defaultValue?: {field: QFieldMetaData, table: QTableMetaData, fieldName: string};
-   autoFocus?: boolean;
-   forceOpen?: boolean;
-   hiddenFieldNames?: string[];
-}
-
-FieldAutoComplete.defaultProps =
-   {
-      defaultValue: null,
-      autoFocus: false,
-      forceOpen: null,
-      hiddenFieldNames: []
-   };
-
-function makeFieldOptionsForTable(tableMetaData: QTableMetaData, fieldOptions: any[], isJoinTable: boolean, hiddenFieldNames: string[])
-{
-   const sortedFields = [...tableMetaData.fields.values()].sort((a, b) => a.label.localeCompare(b.label));
-   for (let i = 0; i < sortedFields.length; i++)
-   {
-      const fieldName = isJoinTable ? `${tableMetaData.name}.${sortedFields[i].name}` : sortedFields[i].name;
-
-      if(hiddenFieldNames && hiddenFieldNames.indexOf(fieldName) > -1)
-      {
-         continue;
-      }
-
-      fieldOptions.push({field: sortedFields[i], table: tableMetaData, fieldName: fieldName});
-   }
-}
-
-export default function FieldAutoComplete({id, metaData, tableMetaData, handleFieldChange, defaultValue, autoFocus, forceOpen, hiddenFieldNames}: FieldAutoCompleteProps): JSX.Element
-{
-   const fieldOptions: any[] = [];
-   makeFieldOptionsForTable(tableMetaData, fieldOptions, false, hiddenFieldNames);
-   let fieldsGroupBy = null;
-
-   if (tableMetaData.exposedJoins && tableMetaData.exposedJoins.length > 0)
-   {
-      for (let i = 0; i < tableMetaData.exposedJoins.length; i++)
-      {
-         const exposedJoin = tableMetaData.exposedJoins[i];
-         if (metaData.tables.has(exposedJoin.joinTable.name))
-         {
-            fieldsGroupBy = (option: any) => `${option.table.label} fields`;
-            makeFieldOptionsForTable(exposedJoin.joinTable, fieldOptions, true, hiddenFieldNames);
-         }
-      }
-   }
-
-
-   function getFieldOptionLabel(option: any)
-   {
-      /////////////////////////////////////////////////////////////////////////////////////////
-      // note - we're using renderFieldOption below for the actual select-box options, which //
-      // are always jut field label (as they are under groupings that show their table name) //
-      /////////////////////////////////////////////////////////////////////////////////////////
-      if (option && option.field && option.table)
-      {
-         if (option.table.name == tableMetaData.name)
-         {
-            return (option.field.label);
-         }
-         else
-         {
-            return (option.table.label + ": " + option.field.label);
-         }
-      }
-
-      return ("");
-   }
-
-
-   //////////////////////////////////////////////////////////////////////////////////////////////
-   // for options, we only want the field label (contrast with what we show in the input box,  //
-   // which comes out of getFieldOptionLabel, which is the table-label prefix for join fields) //
-   //////////////////////////////////////////////////////////////////////////////////////////////
-   function renderFieldOption(props: React.HTMLAttributes<HTMLLIElement>, option: any, state: AutocompleteRenderOptionState): ReactNode
-   {
-      let label = "";
-      if (option && option.field)
-      {
-         label = (option.field.label);
-      }
-
-      return (<li {...props}>{label}</li>);
-   }
-
-
-   function isFieldOptionEqual(option: any, value: any)
-   {
-      return option.fieldName === value.fieldName;
-   }
-
-   ///////////////////////////////////////////////////////////////////////////////////////////////////////
-   // seems like, if we always add the open attribute, then if its false or null, then the autocomplete //
-   // doesn't open at all... so, only add the attribute at all, if forceOpen is true                    //
-   ///////////////////////////////////////////////////////////////////////////////////////////////////////
-   const alsoOpen: {[key: string]: any} = {}
-   if(forceOpen)
-   {
-      alsoOpen["open"] = forceOpen;
-   }
-
-   return (
-      <Autocomplete
-         id={id}
-         renderInput={(params) => (<TextField {...params} autoFocus={autoFocus} label={"Field"} variant="standard" autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
-         // @ts-ignore
-         defaultValue={defaultValue}
-         options={fieldOptions}
-         onChange={handleFieldChange}
-         isOptionEqualToValue={(option, value) => isFieldOptionEqual(option, value)}
-         groupBy={fieldsGroupBy}
-         getOptionLabel={(option) => getFieldOptionLabel(option)}
-         renderOption={(props, option, state) => renderFieldOption(props, option, state)}
-         autoSelect={true}
-         autoHighlight={true}
-         slotProps={{popper: {className: "filterCriteriaRowColumnPopper", style: {padding: 0, width: "250px"}}}}
-         {...alsoOpen}
-      />
-
-   );
-}

src/qqq/components/misc/GotoRecordDialog.tsx

@@ -34,6 +34,7 @@ import DialogContent from "@mui/material/DialogContent";
 import DialogTitle from "@mui/material/DialogTitle";
 import Grid from "@mui/material/Grid";
 import Icon from "@mui/material/Icon";
+import IconButton from "@mui/material/IconButton";
 import TextField from "@mui/material/TextField";
 import React, {useState} from "react";
 import {useNavigate} from "react-router-dom";
@@ -195,8 +196,17 @@ function GotoRecordDialog(props: Props): JSX.Element
 
    return (
       <Dialog open={props.isOpen} onClose={() => closeRequested} onKeyPress={(e) => keyPressed(e)} fullWidth maxWidth={"sm"}>
-         <DialogTitle>Go To...</DialogTitle>
-
+         <DialogTitle sx={{display: "flex"}}>
+            <Box sx={{display: "flex", flexGrow: 1}}>
+               Go To...
+            </Box>
+            <Box sx={{display: "flex"}}>
+               <IconButton onClick={() =>
+               {
+                  document.location.href = "/";
+               }}><Icon sx={{align: "right"}} fontSize="small">close</Icon></IconButton>
+            </Box>
+         </DialogTitle>
          <DialogContent>
             {props.subHeader}
             {

src/qqq/components/misc/HelpContent.tsx

@@ -1,139 +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 {QHelpContent} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QHelpContent";
-import Box from "@mui/material/Box";
-import parse from "html-react-parser";
-import React, {useContext} from "react";
-import Markdown from "react-markdown";
-import QContext from "QContext";
-
-interface Props
-{
-   helpContents: QHelpContent[];
-   roles: string[];
-   heading?: string;
-   helpContentKey?: string;
-}
-
-HelpContent.defaultProps = {};
-
-
-/*******************************************************************************
- ** format some content - meaning, change it from string to JSX element(s) or string.
- ** does a parse() for HTML, and a <Markdown> for markdown, else just text.
- *******************************************************************************/
-const formatHelpContent = (content: string, format: string): string | JSX.Element | JSX.Element[] =>
-{
-   if (format == "HTML")
-   {
-      return parse(content);
-   }
-   else if (format == "MARKDOWN")
-   {
-      return (<Markdown>{content}</Markdown>)
-   }
-
-   return content;
-}
-
-
-/*******************************************************************************
- ** return the first help content from the list that matches the first role
- ** in the roles list.
- *******************************************************************************/
-const getMatchingHelpContent = (helpContents: QHelpContent[], roles: string[]): QHelpContent =>
-{
-   if (helpContents)
-   {
-      if (helpContents.length == 1 && helpContents[0].roles.size == 0)
-      {
-         //////////////////////////////////////////////////////////////////////////////////////////////////
-         // if there's only 1 entry, and it has no roles, then assume user wanted it globally and use it //
-         //////////////////////////////////////////////////////////////////////////////////////////////////
-         return (helpContents[0]);
-      }
-      else
-      {
-         for (let i = 0; i < roles.length; i++)
-         {
-            for (let j = 0; j < helpContents.length; j++)
-            {
-               if (helpContents[j].roles.has(roles[i]))
-               {
-                  return(helpContents[j])
-               }
-            }
-         }
-      }
-   }
-
-   return (null);
-}
-
-
-/*******************************************************************************
- ** test if a list of help contents would find any matches from a list of roles.
- *******************************************************************************/
-export const hasHelpContent = (helpContents: QHelpContent[], roles: string[]) =>
-{
-   return getMatchingHelpContent(helpContents, roles) != null;
-}
-
-
-/*******************************************************************************
- ** component that renders a box of formatted help content, from a list of
- ** helpContents (from meta-data), and for a list of roles (based on what screen
- *******************************************************************************/
-function HelpContent({helpContents, roles, heading, helpContentKey}: Props): JSX.Element
-{
-   const {helpHelpActive} = useContext(QContext);
-   let selectedHelpContent = getMatchingHelpContent(helpContents, roles);
-
-   let content = null;
-   if (helpHelpActive)
-   {
-      if (!selectedHelpContent)
-      {
-         selectedHelpContent = new QHelpContent({content: ""});
-      }
-      content = selectedHelpContent.content + ` [${helpContentKey ?? "?"}]`;
-   }
-   else if(selectedHelpContent)
-   {
-      content = selectedHelpContent.content;
-   }
-
-   ///////////////////////////////////////////////////
-   // if content was found, format it and return it //
-   ///////////////////////////////////////////////////
-   if (content)
-   {
-      return <Box display="inline" className="helpContent">
-         {heading && <span className="header">{heading}</span>}
-         {formatHelpContent(content, selectedHelpContent.format)}
-      </Box>;
-   }
-
-   return (null);
-}
-
-export default HelpContent;

src/qqq/components/misc/RecordSidebar.tsx

@@ -76,7 +76,7 @@ function QRecordSidebar({tableSections, widgetMetaDataList, light, stickyTop}: P
 
 
    return (
-      <Card sx={{borderRadius: "0.75rem", position: "sticky", top: stickyTop, overflow: "auto", maxHeight: "calc(100vh - 200px)"}}>
+      <Card sx={{borderRadius: ({borders: {borderRadius}}) => borderRadius.lg, position: "sticky", top: stickyTop}}>
          <Box component="ul" display="flex" flexDirection="column" p={2} m={0} sx={{listStyle: "none"}}>
             {
                sidebarEntries ? sidebarEntries.map((entry: SidebarEntry, key: number) => (

src/qqq/components/misc/TabPanel.tsx

@@ -28,12 +28,11 @@ interface TabPanelProps
    children?: React.ReactNode;
    index: number;
    value: number;
-   style?: any;
 }
 
 export default function TabPanel(props: TabPanelProps)
 {
-   const {children, value, index, style, ...other} = props;
+   const {children, value, index, ...other} = props;
 
    return (
       <div
@@ -41,7 +40,6 @@ export default function TabPanel(props: TabPanelProps)
          hidden={value !== index}
          id={`simple-tabpanel-${index}`}
          aria-labelledby={`simple-tab-${index}`}
-         style={style}
          {...other}
       >
          {value === index && (

src/qqq/components/processes/ValidationReview.tsx

@@ -155,7 +155,7 @@ function ValidationReview({
                            "false",
                            "Skip Validation.  Submit the records for immediate processing", (
                               <div>
-                                 If you choose this option, the input records will immediately be processed.
+                                 If you choose this option, the records input records will immediately be processed.
                                  You will be told how many records were successfully processed, and which ones had issues after the processing is completed.
                                  <br />
                                  <br />

src/qqq/components/query/BasicAndAdvancedQueryControls.tsx

@@ -1,664 +0,0 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2024.  Kingsrook, LLC
- * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
- * contact@kingsrook.com
- * https://github.com/Kingsrook/
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-
-import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
-import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
-import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
-import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-import {QTableSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableSection";
-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 {Badge, ToggleButton, ToggleButtonGroup, Typography} from "@mui/material";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import Dialog from "@mui/material/Dialog";
-import DialogActions from "@mui/material/DialogActions";
-import DialogContent from "@mui/material/DialogContent";
-import DialogContentText from "@mui/material/DialogContentText";
-import DialogTitle from "@mui/material/DialogTitle";
-import Icon from "@mui/material/Icon";
-import Menu from "@mui/material/Menu";
-import Tooltip from "@mui/material/Tooltip";
-import {GridFilterModel} from "@mui/x-data-grid-pro";
-import {GridApiPro} from "@mui/x-data-grid-pro/models/gridApiPro";
-import React, {forwardRef, useImperativeHandle, useReducer, useState} from "react";
-import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
-import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
-import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
-import QuickFilter from "qqq/components/query/QuickFilter";
-import FilterUtils from "qqq/utils/qqq/FilterUtils";
-import TableUtils from "qqq/utils/qqq/TableUtils";
-
-interface BasicAndAdvancedQueryControlsProps
-{
-   metaData: QInstance;
-   tableMetaData: QTableMetaData;
-   queryFilter: QQueryFilter;
-   gridApiRef: React.MutableRefObject<GridApiPro>
-
-   setQueryFilter: (queryFilter: QQueryFilter) => void;
-   handleFilterChange: (filterModel: GridFilterModel, doSetQueryFilter?: boolean, isChangeFromDataGrid?: boolean) => void;
-
-   /////////////////////////////////////////////////////////////////////////////////////////////
-   // this prop is used as a way to recognize changes in the query filter internal structure, //
-   // since the queryFilter object (reference) doesn't get updated                            //
-   /////////////////////////////////////////////////////////////////////////////////////////////
-   queryFilterJSON: string;
-
-   mode: string;
-   setMode: (mode: string) => void;
-}
-
-let debounceTimeout: string | number | NodeJS.Timeout;
-
-/*******************************************************************************
- ** Component to provide the basic & advanced query-filter controls for the
- ** RecordQuery screen.
- **
- ** Done as a forwardRef, so RecordQuery can call some functions, e.g., when user
- ** does things on that screen, that we need to know about in here.
- *******************************************************************************/
-const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryControlsProps, ref) =>
-{
-   const {metaData, tableMetaData, queryFilter, gridApiRef, setQueryFilter, handleFilterChange, queryFilterJSON, mode, setMode} = props
-
-   /////////////////////////////////////////////////////////
-   // get the quick-filter-field-names from local storage //
-   /////////////////////////////////////////////////////////
-   const QUICK_FILTER_FIELD_NAMES_LOCAL_STORAGE_KEY_ROOT = "qqq.quickFilterFieldNames";
-   const quickFilterFieldNamesLocalStorageKey = `${QUICK_FILTER_FIELD_NAMES_LOCAL_STORAGE_KEY_ROOT}.${tableMetaData.name}`;
-   let defaultQuickFilterFieldNames: Set<string> = new Set<string>();
-   if (localStorage.getItem(quickFilterFieldNamesLocalStorageKey))
-   {
-      defaultQuickFilterFieldNames = new Set<string>(JSON.parse(localStorage.getItem(quickFilterFieldNamesLocalStorageKey)));
-   }
-
-   /////////////////////
-   // state variables //
-   /////////////////////
-   const [quickFilterFieldNames, setQuickFilterFieldNames] = useState(defaultQuickFilterFieldNames);
-   const [addQuickFilterMenu, setAddQuickFilterMenu] = useState(null)
-   const [addQuickFilterOpenCounter, setAddQuickFilterOpenCounter] = useState(0);
-   const [showClearFiltersWarning, setShowClearFiltersWarning] = useState(false);
-   const [, forceUpdate] = useReducer((x) => x + 1, 0);
-
-   //////////////////////////////////////////////////////////////////////////////////
-   // make some functions available to our parent - so it can tell us to do things //
-   //////////////////////////////////////////////////////////////////////////////////
-   useImperativeHandle(ref, () =>
-   {
-      return {
-         ensureAllFilterCriteriaAreActiveQuickFilters(currentFilter: QQueryFilter, reason: string)
-         {
-            ensureAllFilterCriteriaAreActiveQuickFilters(tableMetaData, currentFilter, reason);
-         },
-         addField(fieldName: string)
-         {
-            addQuickFilterField({fieldName: fieldName}, "columnMenu");
-         }
-      }
-   });
-
-
-   /*******************************************************************************
-    ** for a given field, set its default operator for quick-filter dropdowns.
-    *******************************************************************************/
-   function getDefaultOperatorForField(field: QFieldMetaData)
-   {
-      // 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 || field?.type == QFieldType.DATE)
-      {
-         defaultOperator = QCriteriaOperator.GREATER_THAN;
-      }
-      else if (field?.type == QFieldType.BOOLEAN)
-      {
-         /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-         // for booleans, if we set a default, since none of them have values, then they are ALWAYS selected, which isn't what we want. //
-         /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-         defaultOperator = null;
-      }
-      return defaultOperator;
-   }
-
-
-   /*******************************************************************************
-    ** Callback passed into the QuickFilter component, to update the criteria
-    ** after user makes changes to it or to clear it out.
-    *******************************************************************************/
-   const updateQuickCriteria = (newCriteria: QFilterCriteria, needDebounce = false, doClearCriteria = false) =>
-   {
-      let found = false;
-      let foundIndex = null;
-      for (let i = 0; i < queryFilter?.criteria?.length; i++)
-      {
-         if(queryFilter.criteria[i].fieldName == newCriteria.fieldName)
-         {
-            queryFilter.criteria[i] = newCriteria;
-            found = true;
-            foundIndex = i;
-            break;
-         }
-      }
-
-      if(doClearCriteria)
-      {
-         if(found)
-         {
-            queryFilter.criteria.splice(foundIndex, 1);
-            setQueryFilter(queryFilter);
-            const gridFilterModel = FilterUtils.buildGridFilterFromQFilter(tableMetaData, queryFilter);
-            handleFilterChange(gridFilterModel, false);
-         }
-         return;
-      }
-
-      if(!found)
-      {
-         if(!queryFilter.criteria)
-         {
-            queryFilter.criteria = [];
-         }
-         queryFilter.criteria.push(newCriteria);
-         found = true;
-      }
-
-      if(found)
-      {
-         clearTimeout(debounceTimeout)
-         debounceTimeout = setTimeout(() =>
-         {
-            setQueryFilter(queryFilter);
-            const gridFilterModel = FilterUtils.buildGridFilterFromQFilter(tableMetaData, queryFilter);
-            handleFilterChange(gridFilterModel, false);
-         }, needDebounce ? 500 : 1);
-
-         forceUpdate();
-      }
-   };
-
-
-   /*******************************************************************************
-    ** Get the QFilterCriteriaWithId object to pass in to the QuickFilter component
-    ** for a given field name.
-    *******************************************************************************/
-   const getQuickCriteriaParam = (fieldName: string): QFilterCriteriaWithId | null | "tooComplex" =>
-   {
-      const matches: QFilterCriteriaWithId[] = [];
-      for (let i = 0; i < queryFilter?.criteria?.length; i++)
-      {
-         if(queryFilter.criteria[i].fieldName == fieldName)
-         {
-            matches.push(queryFilter.criteria[i] as QFilterCriteriaWithId);
-         }
-      }
-
-      if(matches.length == 0)
-      {
-         return (null);
-      }
-      else if(matches.length == 1)
-      {
-         return (matches[0]);
-      }
-      else
-      {
-         return "tooComplex";
-      }
-   };
-
-
-   /*******************************************************************************
-    ** set the quick-filter field names state variable and local-storage
-    *******************************************************************************/
-   const storeQuickFilterFieldNames = () =>
-   {
-      setQuickFilterFieldNames(new Set<string>([...quickFilterFieldNames.values()]));
-      localStorage.setItem(quickFilterFieldNamesLocalStorageKey, JSON.stringify([...quickFilterFieldNames.values()]));
-   }
-
-
-   /*******************************************************************************
-    ** Event handler for QuickFilter component, to remove a quick filter field from
-    ** the screen.
-    *******************************************************************************/
-   const handleRemoveQuickFilterField = (fieldName: string): void =>
-   {
-      if(quickFilterFieldNames.has(fieldName))
-      {
-         //////////////////////////////////////
-         // remove this field from the query //
-         //////////////////////////////////////
-         const criteria = new QFilterCriteria(fieldName, null, []);
-         updateQuickCriteria(criteria, false, true);
-
-         quickFilterFieldNames.delete(fieldName);
-         storeQuickFilterFieldNames();
-      }
-   };
-
-
-   /*******************************************************************************
-    ** Event handler for button that opens the add-quick-filter menu
-    *******************************************************************************/
-   const openAddQuickFilterMenu = (event: any) =>
-   {
-      setAddQuickFilterMenu(event.currentTarget);
-      setAddQuickFilterOpenCounter(addQuickFilterOpenCounter + 1);
-   }
-
-
-   /*******************************************************************************
-    ** Handle closing the add-quick-filter menu
-    *******************************************************************************/
-   const closeAddQuickFilterMenu = () =>
-   {
-      setAddQuickFilterMenu(null);
-   }
-
-
-   /*******************************************************************************
-    ** Add a quick-filter field to the screen, from either the user selecting one,
-    ** or from a new query being activated, etc.
-    *******************************************************************************/
-   const addQuickFilterField = (newValue: any, reason: "blur" | "modeToggleClicked" | "defaultFilterLoaded" | "savedFilterSelected" | "columnMenu" | string) =>
-   {
-      console.log(`Adding quick filter field as: ${JSON.stringify(newValue)}`);
-      if (reason == "blur")
-      {
-         //////////////////////////////////////////////////////////////////
-         // this keeps a click out of the menu from selecting the option //
-         //////////////////////////////////////////////////////////////////
-         return;
-      }
-
-      const fieldName = newValue ? newValue.fieldName : null;
-      if (fieldName)
-      {
-         if (!quickFilterFieldNames.has(fieldName))
-         {
-            /////////////////////////////////
-            // add the field if we need to //
-            /////////////////////////////////
-            quickFilterFieldNames.add(fieldName);
-            storeQuickFilterFieldNames();
-
-            ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-            // only do this when user has added the field (e.g., not when adding it because of a selected view or filter-in-url) //
-            ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-            if(reason != "modeToggleClicked" && reason != "defaultFilterLoaded" && reason != "savedFilterSelected")
-            {
-               setTimeout(() => document.getElementById(`quickFilter.${fieldName}`)?.click(), 5);
-            }
-         }
-         else if(reason == "columnMenu")
-         {
-            //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-            // if field was already on-screen, but user clicked an option from the columnMenu, then open the quick-filter field //
-            //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-            setTimeout(() => document.getElementById(`quickFilter.${fieldName}`)?.click(), 5);
-         }
-
-         closeAddQuickFilterMenu();
-      }
-   };
-
-
-   /*******************************************************************************
-    ** event handler for the Filter Buidler button - e.g., opens the parent's grid's
-    ** filter panel
-    *******************************************************************************/
-   const openFilterBuilder = (e: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>) =>
-   {
-      gridApiRef.current.showFilterPanel();
-   };
-
-
-   /*******************************************************************************
-    ** event handler for the clear-filters modal
-    *******************************************************************************/
-   const handleClearFiltersAction = (event: React.KeyboardEvent<HTMLDivElement>, isYesButton: boolean = false) =>
-   {
-      if (isYesButton || event.key == "Enter")
-      {
-         setShowClearFiltersWarning(false);
-         handleFilterChange({items: []} as GridFilterModel);
-      }
-   };
-
-
-   /*******************************************************************************
-    ** format the current query as a string for showing on-screen as a preview.
-    *******************************************************************************/
-   const queryToAdvancedString = () =>
-   {
-      if(queryFilter == null || !queryFilter.criteria)
-      {
-         return (<span></span>);
-      }
-
-      let counter = 0;
-
-      return (
-         <span>
-            {queryFilter.criteria.map((criteria, i) =>
-            {
-               if(criteria && criteria.fieldName && criteria.operator)
-               {
-                  const [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, criteria.fieldName);
-                  const valuesString = FilterUtils.getValuesString(field, criteria);
-                  counter++;
-
-                  return (
-                     <span key={i}>
-                        {counter > 1 ? <span>{queryFilter.booleanOperator}&nbsp;</span> : <span/>}
-                        <b>{field.label}</b> {criteria.operator} <span style={{color: "blue"}}>{valuesString}</span>&nbsp;
-                     </span>
-                  );
-               }
-               else
-               {
-                  return (<span />);
-               }
-            })}
-         </span>
-      );
-   };
-
-
-   /*******************************************************************************
-    ** event handler for toggling between modes - basic & advanced.
-    *******************************************************************************/
-   const modeToggleClicked = (newValue: string | null) =>
-   {
-      if (newValue)
-      {
-         if(newValue == "basic")
-         {
-            ////////////////////////////////////////////////////////////////////////////////
-            // we're always allowed to go to advanced -                                   //
-            // but if we're trying to go to basic, make sure the filter isn't too complex //
-            ////////////////////////////////////////////////////////////////////////////////
-            const {canFilterWorkAsBasic} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
-            if (!canFilterWorkAsBasic)
-            {
-               console.log("Query cannot work as basic - so - not allowing toggle to basic.")
-               return;
-            }
-
-            ////////////////////////////////////////////////////////////////////////////////////////////////
-            // when going to basic, make sure all fields in the current query are active as quick-filters //
-            ////////////////////////////////////////////////////////////////////////////////////////////////
-            if (queryFilter && queryFilter.criteria)
-            {
-               ensureAllFilterCriteriaAreActiveQuickFilters(tableMetaData, queryFilter, "modeToggleClicked");
-            }
-         }
-
-         //////////////////////////////////////////////////////////////////////////////////////
-         // note - this is a callback to the parent - as it is responsible for this state... //
-         //////////////////////////////////////////////////////////////////////////////////////
-         setMode(newValue);
-      }
-   };
-
-
-   /*******************************************************************************
-    ** make sure that all fields in the current query are on-screen as quick-filters
-    ** (that is, if the query can be basic)
-    *******************************************************************************/
-   const ensureAllFilterCriteriaAreActiveQuickFilters = (tableMetaData: QTableMetaData, queryFilter: QQueryFilter, reason: "modeToggleClicked" | "defaultFilterLoaded" | "savedFilterSelected" | string) =>
-   {
-      if(!tableMetaData || !queryFilter)
-      {
-         return;
-      }
-
-      const {canFilterWorkAsBasic} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
-      if (!canFilterWorkAsBasic)
-      {
-         console.log("query is too complex for basic - so - switching to advanced");
-         modeToggleClicked("advanced");
-         forceUpdate();
-         return;
-      }
-
-      for (let i = 0; i < queryFilter?.criteria?.length; i++)
-      {
-         const criteria = queryFilter.criteria[i];
-         if (criteria && criteria.fieldName)
-         {
-            addQuickFilterField(criteria, reason);
-         }
-      }
-   }
-
-
-   //////////////////////////////////////////////////////////////////////////////
-   // if there aren't any quick-filters turned on, get defaults from the table //
-   // only run this block upon a first-render                                  //
-   //////////////////////////////////////////////////////////////////////////////
-   const [firstRender, setFirstRender] = useState(true);
-   if(firstRender)
-   {
-      setFirstRender(false);
-
-      if (defaultQuickFilterFieldNames == null || defaultQuickFilterFieldNames.size == 0)
-      {
-         defaultQuickFilterFieldNames = new Set<string>();
-
-         //////////////////////////////////////////////////////////////////////////////////////////////////
-         // check if there's materialDashboard tableMetaData, and if it has defaultQuickFilterFieldNames //
-         //////////////////////////////////////////////////////////////////////////////////////////////////
-         const mdbMetaData = tableMetaData?.supplementalTableMetaData?.get("materialDashboard");
-         if (mdbMetaData)
-         {
-            if (mdbMetaData?.defaultQuickFilterFieldNames?.length)
-            {
-               for (let i = 0; i < mdbMetaData.defaultQuickFilterFieldNames.length; i++)
-               {
-                  defaultQuickFilterFieldNames.add(mdbMetaData.defaultQuickFilterFieldNames[i]);
-               }
-            }
-         }
-
-         /////////////////////////////////////////////
-         // if still none, then look for T1 section //
-         /////////////////////////////////////////////
-         if (defaultQuickFilterFieldNames.size == 0)
-         {
-            if (tableMetaData.sections)
-            {
-               const t1Sections = tableMetaData.sections.filter((s: QTableSection) => s.tier == "T1");
-               if (t1Sections.length)
-               {
-                  for (let i = 0; i < t1Sections.length; i++)
-                  {
-                     if (t1Sections[i].fieldNames)
-                     {
-                        for (let j = 0; j < t1Sections[i].fieldNames.length; j++)
-                        {
-                           defaultQuickFilterFieldNames.add(t1Sections[i].fieldNames[j]);
-                        }
-                     }
-                  }
-               }
-            }
-         }
-
-         setQuickFilterFieldNames(defaultQuickFilterFieldNames);
-      }
-   }
-
-   ////////////////////////////////////////////////////////////////////////////////////////////////////////////
-   // this is being used as a version of like forcing that we get re-rendered if the query filter changes... //
-   ////////////////////////////////////////////////////////////////////////////////////////////////////////////
-   const [lastIndex, setLastIndex] = useState(queryFilterJSON);
-   if(queryFilterJSON != lastIndex)
-   {
-      ensureAllFilterCriteriaAreActiveQuickFilters(tableMetaData, queryFilter, "defaultFilterLoaded");
-      setLastIndex(queryFilterJSON);
-   }
-
-   ///////////////////////////////////////////////////
-   // set some status flags based on current filter //
-   ///////////////////////////////////////////////////
-   const hasValidFilters = queryFilter && queryFilter.criteria && queryFilter.criteria.length > 0; // todo - should be better (e.g., see if operator & values are set)
-   const {canFilterWorkAsBasic, reasonsWhyItCannot} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
-   let reasonWhyBasicIsDisabled = null;
-   if(reasonsWhyItCannot && reasonsWhyItCannot.length > 0)
-   {
-      reasonWhyBasicIsDisabled = <>
-         Your current Filter cannot be managed using BASIC mode because:
-         <ul style={{marginLeft: "1rem"}}>
-            {reasonsWhyItCannot.map((reason, i) => <li key={i}>{reason}</li>)}
-         </ul>
-      </>
-   }
-
-   return (
-      <Box display="flex" alignItems="flex-start" justifyContent="space-between" flexWrap="wrap" position="relative" top={"-0.5rem"} left={"0.5rem"} minHeight="2.5rem">
-         <Box display="flex" alignItems="center" flexShrink={1} flexGrow={1}>
-            {
-               mode == "basic" &&
-               <Box width="100px" flexShrink={1} flexGrow={1}>
-                  {
-                     tableMetaData &&
-                     [...quickFilterFieldNames.values()].map((fieldName) =>
-                     {
-                        const [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
-                        let defaultOperator = getDefaultOperatorForField(field);
-
-                        return (
-                           field && <QuickFilter
-                              key={fieldName}
-                              fullFieldName={fieldName}
-                              tableMetaData={tableMetaData}
-                              updateCriteria={updateQuickCriteria}
-                              criteriaParam={getQuickCriteriaParam(fieldName)}
-                              fieldMetaData={field}
-                              defaultOperator={defaultOperator}
-                              handleRemoveQuickFilterField={handleRemoveQuickFilterField} />
-                        );
-                     })
-                  }
-                  {
-                     tableMetaData &&
-                     <>
-                        <Tooltip enterDelay={500} title="Add a Quick Filter field" placement="top">
-                           <Button onClick={(e) => openAddQuickFilterMenu(e)} startIcon={<Icon>add_circle_outline</Icon>} sx={{border: "1px solid gray", whiteSpace: "nowrap", minWidth: "120px"}}>
-                              Add Field
-                           </Button>
-                        </Tooltip>
-                        <Menu
-                           anchorEl={addQuickFilterMenu}
-                           anchorOrigin={{vertical: "bottom", horizontal: "left"}}
-                           transformOrigin={{vertical: "top", horizontal: "left"}}
-                           transitionDuration={0}
-                           open={Boolean(addQuickFilterMenu)}
-                           onClose={closeAddQuickFilterMenu}
-                           keepMounted
-                        >
-                           <Box width="250px">
-                              <FieldAutoComplete
-                                 key={addQuickFilterOpenCounter} // use a unique key each time we open it, because we don't want the user's last selection to stick.
-                                 id={"add-quick-filter-field"}
-                                 metaData={metaData}
-                                 tableMetaData={tableMetaData}
-                                 defaultValue={null}
-                                 handleFieldChange={(e, newValue, reason) => addQuickFilterField(newValue, reason)}
-                                 autoFocus={true}
-                                 forceOpen={Boolean(addQuickFilterMenu)}
-                                 hiddenFieldNames={[...quickFilterFieldNames.values()]}
-                              />
-                           </Box>
-                        </Menu>
-                     </>
-                  }
-               </Box>
-            }
-            {
-               metaData && tableMetaData && mode == "advanced" &&
-               <>
-                  <Tooltip enterDelay={500} title="Build an advanced Filter" placement="top">
-                     <Button onClick={(e) => openFilterBuilder(e)} startIcon={<Badge badgeContent={queryFilter?.criteria?.length} color="warning" sx={{"& .MuiBadge-badge": {color: "#FFFFFF"}}} anchorOrigin={{vertical: "top", horizontal: "left"}}><Icon>filter_list</Icon></Badge>} sx={{width: "180px", minWidth: "180px", border: "1px solid gray"}}>
-                        Filter Builder
-                     </Button>
-                  </Tooltip>
-                  <div id="clearFiltersButton" style={{display: "inline-block", position: "relative", top: "2px", left: "-1.5rem", width: "1rem"}}>
-                     {
-                        hasValidFilters && (
-                           <>
-                              <Tooltip title="Clear Filter">
-                                 <Icon sx={{cursor: "pointer"}} onClick={() => setShowClearFiltersWarning(true)}>clear</Icon>
-                              </Tooltip>
-                              <Dialog open={showClearFiltersWarning} onClose={() => setShowClearFiltersWarning(true)} onKeyPress={(e) => handleClearFiltersAction(e)}>
-                                 <DialogTitle id="alert-dialog-title">Confirm</DialogTitle>
-                                 <DialogContent>
-                                    <DialogContentText>Are you sure you want to remove all conditions from the current filter?</DialogContentText>
-                                 </DialogContent>
-                                 <DialogActions>
-                                    <QCancelButton label="No" disabled={false} onClickHandler={() => setShowClearFiltersWarning(true)} />
-                                    <QSaveButton label="Yes" iconName="check" disabled={false} onClickHandler={() => handleClearFiltersAction(null, true)} />
-                                 </DialogActions>
-                              </Dialog>
-                           </>
-                        )
-                     }
-                  </div>
-                  <Box sx={{fontSize: "1rem"}} whiteSpace="nowrap" display="flex" ml={0.25} flexShrink={1} flexGrow={1} alignItems="center">
-                     Current Filter:
-                     {
-                        <Box display="inline-block" border="1px solid gray" borderRadius="0.5rem" whiteSpace="nowrap" overflow="hidden" textOverflow="ellipsis" width="100px" flexShrink={1} flexGrow={1} sx={{fontSize: "1rem"}} minHeight={"2rem"} p={0.25} ml={0.5}>
-                           {queryToAdvancedString()}
-                        </Box>
-                     }
-                  </Box>
-               </>
-            }
-         </Box>
-         <Box display="flex" alignItems="center">
-            {
-               metaData && tableMetaData &&
-               <Box px={1} display="flex" alignItems="center">
-                  <Typography display="inline" sx={{fontSize: "1rem"}}>Mode:</Typography>
-                  <Tooltip title={reasonWhyBasicIsDisabled}>
-                     <ToggleButtonGroup
-                        value={mode}
-                        exclusive
-                        onChange={(event, newValue) => modeToggleClicked(newValue)}
-                        size="small"
-                        sx={{pl: 0.5}}
-                     >
-                        <ToggleButton value="basic" disabled={!canFilterWorkAsBasic}>Basic</ToggleButton>
-                        <ToggleButton value="advanced">Advanced</ToggleButton>
-                     </ToggleButtonGroup>
-                  </Tooltip>
-               </Box>
-            }
-         </Box>
-      </Box>
-   );
-});
-
-export default BasicAndAdvancedQueryControls;

src/qqq/components/query/ExportMenuItem.tsx

@@ -1,131 +0,0 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2024.  Kingsrook, LLC
- * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
- * contact@kingsrook.com
- * https://github.com/Kingsrook/
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
-import MenuItem from "@mui/material/MenuItem";
-import {GridColDef, GridExportMenuItemProps} from "@mui/x-data-grid-pro";
-import React from "react";
-import ValueUtils from "qqq/utils/qqq/ValueUtils";
-
-interface QExportMenuItemProps extends GridExportMenuItemProps<{}>
-{
-   tableMetaData: QTableMetaData;
-   totalRecords: number
-   columnsModel: GridColDef[];
-   columnVisibilityModel: { [index: string]: boolean };
-   queryFilter: QQueryFilter;
-   format: string;
-}
-
-/*******************************************************************************
- ** Component to serve as an item in the Export menu
- *******************************************************************************/
-export default function ExportMenuItem(props: QExportMenuItemProps)
-{
-   const {format, tableMetaData, totalRecords, columnsModel, columnVisibilityModel, queryFilter, hideMenu} = props;
-
-   return (
-      <MenuItem
-         disabled={totalRecords === 0}
-         onClick={() =>
-         {
-            ///////////////////////////////////////////////////////////////////////////////
-            // 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     //
-            // so just doing them to match columns (which were pKey, then sorted)        //
-            ///////////////////////////////////////////////////////////////////////////////
-            const visibleFields: string[] = [];
-            columnsModel.forEach((gridColumn) =>
-            {
-               const fieldName = gridColumn.field;
-               if (columnVisibilityModel[fieldName] !== false)
-               {
-                  visibleFields.push(fieldName);
-               }
-            });
-
-            //////////////////////////////////////
-            // construct the url for the export //
-            //////////////////////////////////////
-            const dateString = ValueUtils.formatDateTimeForFileName(new Date());
-            const filename = `${tableMetaData.label} Export ${dateString}.${format}`;
-            const url = `/data/${tableMetaData.name}/export/${filename}`;
-
-            const encodedFilterJSON = encodeURIComponent(JSON.stringify(queryFilter));
-
-            //////////////////////////////////////////////////////////////////////////////////////
-            // open a window (tab) with a little page that says the file is being generated.    //
-            // then have that page load the url for the export.                                 //
-            // If there's an error, it'll appear in that window.  else, the file will download. //
-            //////////////////////////////////////////////////////////////////////////////////////
-            const exportWindow = window.open("", "_blank");
-            exportWindow.document.write(`<html lang="en">
-                  <head>
-                     <style>
-                        * { font-family: "SF Pro Display","Roboto","Helvetica","Arial",sans-serif; }
-                     </style>
-                     <title>${filename}</title>
-                     <script>
-                        setTimeout(() =>
-                        {
-                           //////////////////////////////////////////////////////////////////////////////////////////////////
-                           // need to encode and decode this value, so set it in the form here, instead of literally below //
-                           //////////////////////////////////////////////////////////////////////////////////////////////////
-                           document.getElementById("filter").value = decodeURIComponent("${encodedFilterJSON}");
-                           
-                           document.getElementById("exportForm").submit();
-                        }, 1);
-                     </script>
-                  </head>
-                  <body>
-                     Generating file <u>${filename}</u>${totalRecords ? " with " + totalRecords.toLocaleString() + " record" + (totalRecords == 1 ? "" : "s") : ""}...
-                     <form id="exportForm" method="post" action="${url}" >
-                        <input type="hidden" name="fields" value="${visibleFields.join(",")}">
-                        <input type="hidden" name="filter" id="filter">
-                     </form>
-                  </body>
-               </html>`);
-
-            /*
-            // todo - probably better - generate the report in an iframe...
-            // only open question is, giving user immediate feedback, and knowing when the stream has started and/or stopped
-            // maybe a busy-loop that would check iframe's url (e.g., after posting should change, maybe?)
-            const iframe = document.getElementById("exportIFrame");
-            const form = iframe.querySelector("form");
-            form.action = url;
-            form.target = "exportIFrame";
-            (iframe.querySelector("#authorizationInput") as HTMLInputElement).value = qController.getAuthorizationHeaderValue();
-            form.submit();
-            */
-
-            ///////////////////////////////////////////
-            // Hide the export menu after the export //
-            ///////////////////////////////////////////
-            hideMenu?.();
-         }}
-      >
-         Export
-         {` ${format.toUpperCase()}`}
-      </MenuItem>
-   );
-}
-

src/qqq/components/query/FilterCriteriaRow.tsx

@@ -34,7 +34,6 @@ import Select, {SelectChangeEvent} from "@mui/material/Select/Select";
 import TextField from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
 import React, {ReactNode, SyntheticEvent, useState} from "react";
-import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
 import FilterCriteriaRowValues from "qqq/components/query/FilterCriteriaRowValues";
 import FilterUtils from "qqq/utils/qqq/FilterUtils";
 
@@ -178,74 +177,16 @@ interface FilterCriteriaRowProps
    updateBooleanOperator: (newValue: string) => void;
 }
 
-FilterCriteriaRow.defaultProps =
-   {
-   };
+FilterCriteriaRow.defaultProps = {};
 
-export function validateCriteria(criteria: QFilterCriteria, operatorSelectedValue: OperatorOption)
+function makeFieldOptionsForTable(tableMetaData: QTableMetaData, fieldOptions: any[], isJoinTable: boolean)
 {
-   let criteriaIsValid = true;
-   let criteriaStatusTooltip = "This condition is fully defined and is part of your filter.";
-
-   function isNotSet(value: any)
+   const sortedFields = [...tableMetaData.fields.values()].sort((a, b) => a.label.localeCompare(b.label));
+   for (let i = 0; i < sortedFields.length; i++)
    {
-      return (value === null || value == undefined || String(value).trim() === "");
+      const fieldName = isJoinTable ? `${tableMetaData.name}.${sortedFields[i].name}` : sortedFields[i].name;
+      fieldOptions.push({field: sortedFields[i], table: tableMetaData, fieldName: fieldName});
    }
-
-   if(!criteria)
-   {
-      criteriaIsValid = false;
-      criteriaStatusTooltip = "This condition is not defined.";
-      return {criteriaIsValid, criteriaStatusTooltip};
-   }
-
-   if (!criteria.fieldName)
-   {
-      criteriaIsValid = false;
-      criteriaStatusTooltip = "You must select a field to begin to define this condition.";
-   }
-   else if (!criteria.operator)
-   {
-      criteriaIsValid = false;
-      criteriaStatusTooltip = "You must select an operator to continue to define this condition.";
-   }
-   else
-   {
-      if (operatorSelectedValue)
-      {
-         if (operatorSelectedValue.valueMode == ValueMode.NONE || operatorSelectedValue.implicitValues)
-         {
-            //////////////////////////////////
-            // don't need to look at values //
-            //////////////////////////////////
-         }
-         else if (operatorSelectedValue.valueMode == ValueMode.DOUBLE || operatorSelectedValue.valueMode == ValueMode.DOUBLE_DATE || operatorSelectedValue.valueMode == ValueMode.DOUBLE_DATE_TIME)
-         {
-            if (criteria.values.length < 2 || isNotSet(criteria.values[0]) || isNotSet(criteria.values[1]))
-            {
-               criteriaIsValid = false;
-               criteriaStatusTooltip = "You must enter two values to complete the definition of this condition.";
-            }
-         }
-         else if (operatorSelectedValue.valueMode == ValueMode.MULTI || operatorSelectedValue.valueMode == ValueMode.PVS_MULTI)
-         {
-            if (criteria.values.length < 1 || isNotSet(criteria.values[0]))
-            {
-               criteriaIsValid = false;
-               criteriaStatusTooltip = "You must enter one or more values complete the definition of this condition.";
-            }
-         }
-         else
-         {
-            if (!criteria.values || isNotSet(criteria.values[0]))
-            {
-               criteriaIsValid = false;
-               criteriaStatusTooltip = "You must enter a value to complete the definition of this condition.";
-            }
-         }
-      }
-   }
-   return {criteriaIsValid, criteriaStatusTooltip};
 }
 
 export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria, booleanOperator, updateCriteria, removeCriteria, updateBooleanOperator}: FilterCriteriaRowProps): JSX.Element
@@ -254,6 +195,27 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
    const [operatorSelectedValue, setOperatorSelectedValue] = useState(null as OperatorOption);
    const [operatorInputValue, setOperatorInputValue] = useState("");
 
+   ///////////////////////////////////////////////////////////////
+   // set up the array of options for the fields Autocomplete   //
+   // also, a groupBy function, in case there are exposed joins //
+   ///////////////////////////////////////////////////////////////
+   const fieldOptions: any[] = [];
+   makeFieldOptionsForTable(tableMetaData, fieldOptions, false);
+   let fieldsGroupBy = null;
+
+   if (tableMetaData.exposedJoins && tableMetaData.exposedJoins.length > 0)
+   {
+      for (let i = 0; i < tableMetaData.exposedJoins.length; i++)
+      {
+         const exposedJoin = tableMetaData.exposedJoins[i];
+         if (metaData.tables.has(exposedJoin.joinTable.name))
+         {
+            fieldsGroupBy = (option: any) => `${option.table.label} fields`;
+            makeFieldOptionsForTable(exposedJoin.joinTable, fieldOptions, true);
+         }
+      }
+   }
+
    ////////////////////////////////////////////////////////////
    // set up array of options for operator dropdown          //
    // only call the function to do it if we have a field set //
@@ -421,19 +383,111 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
       return (false);
    };
 
+   function isFieldOptionEqual(option: any, value: any)
+   {
+      return option.fieldName === value.fieldName;
+   }
+
+   function getFieldOptionLabel(option: any)
+   {
+      /////////////////////////////////////////////////////////////////////////////////////////
+      // note - we're using renderFieldOption below for the actual select-box options, which //
+      // are always jut field label (as they are under groupings that show their table name) //
+      /////////////////////////////////////////////////////////////////////////////////////////
+      if(option && option.field && option.table)
+      {
+         if(option.table.name == tableMetaData.name)
+         {
+            return (option.field.label);
+         }
+         else
+         {
+            return (option.table.label + ": " + option.field.label);
+         }
+      }
+
+      return ("");
+   }
+
+   //////////////////////////////////////////////////////////////////////////////////////////////
+   // for options, we only want the field label (contrast with what we show in the input box,  //
+   // which comes out of getFieldOptionLabel, which is the table-label prefix for join fields) //
+   //////////////////////////////////////////////////////////////////////////////////////////////
+   function renderFieldOption(props: React.HTMLAttributes<HTMLLIElement>, option: any, state: AutocompleteRenderOptionState): ReactNode
+   {
+      let label = ""
+      if(option && option.field)
+      {
+         label = (option.field.label);
+      }
+
+      return (<li {...props}>{label}</li>);
+   }
+
    function isOperatorOptionEqual(option: OperatorOption, value: OperatorOption)
    {
       return (option?.value == value?.value && JSON.stringify(option?.implicitValues) == JSON.stringify(value?.implicitValues));
    }
 
-   const {criteriaIsValid, criteriaStatusTooltip} = validateCriteria(criteria, operatorSelectedValue);
+   let criteriaIsValid = true;
+   let criteriaStatusTooltip = "This condition is fully defined and is part of your filter.";
 
-   const tooltipEnterDelay = 750;
+   function isNotSet(value: any)
+   {
+      return (value === null || value == undefined || String(value).trim() === "");
+   }
+
+   if(!criteria.fieldName)
+   {
+      criteriaIsValid = false;
+      criteriaStatusTooltip = "You must select a field to begin to define this condition.";
+   }
+   else if(!criteria.operator)
+   {
+      criteriaIsValid = false;
+      criteriaStatusTooltip = "You must select an operator to continue to define this condition.";
+   }
+   else
+   {
+      if(operatorSelectedValue)
+      {
+         if (operatorSelectedValue.valueMode == ValueMode.NONE || operatorSelectedValue.implicitValues)
+         {
+            //////////////////////////////////
+            // don't need to look at values //
+            //////////////////////////////////
+         }
+         else if(operatorSelectedValue.valueMode == ValueMode.DOUBLE || operatorSelectedValue.valueMode == ValueMode.DOUBLE_DATE || operatorSelectedValue.valueMode == ValueMode.DOUBLE_DATE_TIME)
+         {
+            if(criteria.values.length < 2 || isNotSet(criteria.values[0]) || isNotSet(criteria.values[1]))
+            {
+               criteriaIsValid = false;
+               criteriaStatusTooltip = "You must enter two values to complete the definition of this condition.";
+            }
+         }
+         else if(operatorSelectedValue.valueMode == ValueMode.MULTI || operatorSelectedValue.valueMode == ValueMode.PVS_MULTI)
+         {
+            if(criteria.values.length < 1 || isNotSet(criteria.values[0]))
+            {
+               criteriaIsValid = false;
+               criteriaStatusTooltip = "You must enter one or more values complete the definition of this condition.";
+            }
+         }
+         else
+         {
+            if(!criteria.values || isNotSet(criteria.values[0]))
+            {
+               criteriaIsValid = false;
+               criteriaStatusTooltip = "You must enter a value to complete the definition of this condition.";
+            }
+         }
+      }
+   }
 
    return (
-      <Box className="filterCriteriaRow" pt={0.5} display="flex" alignItems="flex-end" pr={0.5}>
+      <Box className="filterCriteriaRow" pt={0.5} display="flex" alignItems="flex-end">
          <Box display="inline-block">
-            <Tooltip title="Remove this condition from your filter" enterDelay={tooltipEnterDelay} placement="left">
+            <Tooltip title="Remove this condition from your filter" enterDelay={750} placement="left">
                <IconButton onClick={removeCriteria}><Icon fontSize="small">close</Icon></IconButton>
             </Tooltip>
          </Box>
@@ -448,10 +502,24 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
                : <span />}
          </Box>
          <Box display="inline-block" width={250} className="fieldColumn">
-            <FieldAutoComplete id={`field-${id}`} metaData={metaData} tableMetaData={tableMetaData} defaultValue={defaultFieldValue} handleFieldChange={handleFieldChange} />
+            <Autocomplete
+               id={`field-${id}`}
+               renderInput={(params) => (<TextField {...params} label={"Field"} variant="standard" autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
+               // @ts-ignore
+               defaultValue={defaultFieldValue}
+               options={fieldOptions}
+               onChange={handleFieldChange}
+               isOptionEqualToValue={(option, value) => isFieldOptionEqual(option, value)}
+               groupBy={fieldsGroupBy}
+               getOptionLabel={(option) => getFieldOptionLabel(option)}
+               renderOption={(props, option, state) => renderFieldOption(props, option, state)}
+               autoSelect={true}
+               autoHighlight={true}
+               slotProps={{popper: {className: "filterCriteriaRowColumnPopper", style: {padding: 0, width: "250px"}}}}
+            />
          </Box>
          <Box display="inline-block" width={200} className="operatorColumn">
-            <Tooltip title={criteria.fieldName == null ? "You must select a field before you can select an operator" : null} enterDelay={tooltipEnterDelay}>
+            <Tooltip title={criteria.fieldName == null ? "You must select a field before you can select an operator" : null} enterDelay={750}>
                <Autocomplete
                   id={"criteriaOperator"}
                   renderInput={(params) => (<TextField {...params} label={"Operator"} variant="standard" autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
@@ -478,8 +546,8 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
                valueChangeHandler={(event, valueIndex, newValue) => handleValueChange(event, valueIndex, newValue)}
             />
          </Box>
-         <Box display="inline-block">
-            <Tooltip title={criteriaStatusTooltip} enterDelay={tooltipEnterDelay} placement="bottom">
+         <Box display="inline-block" pl={0.5} pr={1}>
+            <Tooltip title={criteriaStatusTooltip} enterDelay={750} placement="right">
                {
                   criteriaIsValid
                      ? <Icon color="success">check</Icon>

src/qqq/components/query/FilterCriteriaRowValues.tsx

@@ -44,13 +44,9 @@ interface Props
    field: QFieldMetaData;
    table: QTableMetaData;
    valueChangeHandler: (event: React.ChangeEvent | SyntheticEvent, valueIndex?: number | "all", newValue?: any) => void;
-   initiallyOpenMultiValuePvs?: boolean
 }
 
-FilterCriteriaRowValues.defaultProps =
-   {
-      initiallyOpenMultiValuePvs: false
-   };
+FilterCriteriaRowValues.defaultProps = {};
 
 export const getTypeForTextField = (field: QFieldMetaData): string =>
 {
@@ -114,17 +110,16 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
       InputLabelProps={inputLabelProps}
       InputProps={inputProps}
       fullWidth
-      autoFocus={true}
    />;
 };
 
-function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueChangeHandler, initiallyOpenMultiValuePvs}: Props): JSX.Element
+function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueChangeHandler}: Props): JSX.Element
 {
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
    if (!operatorOption)
    {
-      return null;
+      return <br />;
    }
 
    function saveNewPasterValues(newValues: any[])
@@ -153,7 +148,7 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
    switch (operatorOption.valueMode)
    {
       case ValueMode.NONE:
-         return null;
+         return <br />;
       case ValueMode.SINGLE:
          return makeTextField(field, criteria, valueChangeHandler);
       case ValueMode.SINGLE_DATE:
@@ -220,7 +215,6 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
                initialDisplayValue={selectedPossibleValue?.label}
                inForm={false}
                onChange={(value: any) => valueChangeHandler(null, 0, value)}
-               variant="standard"
             />
          </Box>;
       case ValueMode.PVS_MULTI:
@@ -246,10 +240,8 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
                isMultiple
                fieldLabel="Values"
                initialValues={initialValues}
-               initiallyOpen={false /*initiallyOpenMultiValuePvs*/}
                inForm={false}
                onChange={(value: any) => valueChangeHandler(null, "all", value)}
-               variant="standard"
             />
          </Box>;
    }

src/qqq/components/query/QuickFilter.tsx

@@ -1,444 +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 {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
-import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QCriteriaOperator";
-import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
-import {Badge, 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 Menu from "@mui/material/Menu";
-import TextField from "@mui/material/TextField";
-import React, {SyntheticEvent, useState} from "react";
-import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
-import {getDefaultCriteriaValue, getOperatorOptions, OperatorOption, validateCriteria} from "qqq/components/query/FilterCriteriaRow";
-import FilterCriteriaRowValues from "qqq/components/query/FilterCriteriaRowValues";
-import FilterUtils from "qqq/utils/qqq/FilterUtils";
-import TableUtils from "qqq/utils/qqq/TableUtils";
-
-export type CriteriaParamType = QFilterCriteriaWithId | null | "tooComplex";
-
-interface QuickFilterProps
-{
-   tableMetaData: QTableMetaData;
-   fullFieldName: string;
-   fieldMetaData: QFieldMetaData;
-   criteriaParam: CriteriaParamType;
-   updateCriteria: (newCriteria: QFilterCriteria, needDebounce: boolean, doRemoveCriteria: boolean) => void;
-   defaultOperator?: QCriteriaOperator;
-   handleRemoveQuickFilterField?: (fieldName: string) => void;
-}
-
-QuickFilter.defaultProps =
-   {
-      defaultOperator: QCriteriaOperator.EQUALS,
-      handleRemoveQuickFilterField: null
-   };
-
-let seedId = new Date().getTime() % 173237;
-
-/*******************************************************************************
- ** Test if a CriteriaParamType represents an actual query criteria - or, if it's
- ** null or the "tooComplex" placeholder.
- *******************************************************************************/
-const criteriaParamIsCriteria = (param: CriteriaParamType): boolean =>
-{
-   return (param != null && param != "tooComplex");
-};
-
-/*******************************************************************************
- ** Test of an OperatorOption equals a query Criteria - that is - that the
- ** operators within them are equal - AND - if the OperatorOption has implicit
- ** values (e.g., the booleans), then those options equal the criteria's options.
- *******************************************************************************/
-const doesOperatorOptionEqualCriteria = (operatorOption: OperatorOption, criteria: QFilterCriteriaWithId): boolean =>
-{
-   if(operatorOption.value == criteria.operator)
-   {
-      if(operatorOption.implicitValues)
-      {
-         if(JSON.stringify(operatorOption.implicitValues) == JSON.stringify(criteria.values))
-         {
-            return (true);
-         }
-         else
-         {
-            return (false);
-         }
-      }
-
-      return (true);
-   }
-
-   return (false);
-}
-
-
-/*******************************************************************************
- ** Get the object to use as the selected OperatorOption (e.g., value for that
- ** 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): OperatorOption =>
-{
-   if(criteria)
-   {
-      const filteredOptions = operatorOptions.filter(o => doesOperatorOptionEqualCriteria(o, criteria));
-      if(filteredOptions.length > 0)
-      {
-         return (filteredOptions[0]);
-      }
-   }
-
-   const filteredOptions = operatorOptions.filter(o => o.value == defaultOperator);
-   if(filteredOptions.length > 0)
-   {
-      return (filteredOptions[0]);
-   }
-
-   return (null);
-}
-
-/*******************************************************************************
- ** Component to render a QuickFilter - that is - a button, with a Menu under it,
- ** with Operator and Value controls.
- *******************************************************************************/
-export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData, criteriaParam, updateCriteria, defaultOperator, handleRemoveQuickFilterField}: QuickFilterProps): JSX.Element
-{
-   const operatorOptions = fieldMetaData ? getOperatorOptions(tableMetaData, fullFieldName) : [];
-   const [_, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fullFieldName);
-
-   const [isOpen, setIsOpen] = useState(false);
-   const [anchorEl, setAnchorEl] = useState(null);
-
-   const [criteria, setCriteria] = useState(criteriaParamIsCriteria(criteriaParam) ? criteriaParam as QFilterCriteriaWithId : null);
-   const [id, setId] = useState(criteriaParamIsCriteria(criteriaParam) ? (criteriaParam as QFilterCriteriaWithId).id : ++seedId);
-
-   const [operatorSelectedValue, setOperatorSelectedValue] = useState(getOperatorSelectedValue(operatorOptions, criteria, defaultOperator));
-   const [operatorInputValue, setOperatorInputValue] = useState(operatorSelectedValue?.label);
-
-   const [startIconName, setStartIconName] = useState("filter_alt");
-
-   const {criteriaIsValid, criteriaStatusTooltip} = validateCriteria(criteria, operatorSelectedValue);
-
-   //////////////////////////////////////////////////////////////////////////////////////////////////////////////
-   // handle a change to the criteria from outside this component (e.g., the prop isn't the same as the state) //
-   //////////////////////////////////////////////////////////////////////////////////////////////////////////////
-   if (criteriaParamIsCriteria(criteriaParam) && JSON.stringify(criteriaParam) !== JSON.stringify(criteria))
-   {
-      const newCriteria = criteriaParam as QFilterCriteriaWithId;
-      setCriteria(newCriteria);
-      const operatorOption = operatorOptions.filter(o => o.value == newCriteria.operator)[0];
-      console.log(`B: setOperatorSelectedValue [${JSON.stringify(operatorOption)}]`);
-      setOperatorSelectedValue(operatorOption);
-      setOperatorInputValue(operatorOption.label);
-   }
-
-   /*******************************************************************************
-    ** Test if we need to construct a new criteria object
-    *******************************************************************************/
-   const criteriaNeedsReset = (): boolean =>
-   {
-      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()))
-         {
-            return (true);
-         }
-      }
-
-      return (false);
-   }
-
-   /*******************************************************************************
-    ** Construct a new criteria object - resetting the values tied to the oprator
-    ** autocomplete at the same time.
-    *******************************************************************************/
-   const makeNewCriteria = (): QFilterCriteria =>
-   {
-      const operatorOption = operatorOptions.filter(o => o.value == defaultOperator)[0];
-      const criteria = new QFilterCriteriaWithId(fullFieldName, operatorOption?.value, getDefaultCriteriaValue());
-      criteria.id = id;
-      console.log(`C: setOperatorSelectedValue [${JSON.stringify(operatorOption)}]`);
-      setOperatorSelectedValue(operatorOption);
-      setOperatorInputValue(operatorOption?.label);
-      setCriteria(criteria);
-      return(criteria);
-   }
-
-   /*******************************************************************************
-    ** event handler to open the menu in response to the button being clicked.
-    *******************************************************************************/
-   const handleOpenMenu = (event: any) =>
-   {
-      setIsOpen(!isOpen);
-      setAnchorEl(event.currentTarget);
-   };
-
-   /*******************************************************************************
-    ** handler for the Menu when being closed
-    *******************************************************************************/
-   const closeMenu = () =>
-   {
-      setIsOpen(false);
-      setAnchorEl(null);
-   };
-
-   /*******************************************************************************
-    ** event handler for operator Autocomplete having its value changed
-    *******************************************************************************/
-   const handleOperatorChange = (event: any, newValue: any, reason: string) =>
-   {
-      criteria.operator = newValue ? newValue.value : null;
-
-      if (newValue)
-      {
-         console.log(`D: setOperatorSelectedValue [${JSON.stringify(newValue)}]`);
-         setOperatorSelectedValue(newValue);
-         setOperatorInputValue(newValue.label);
-
-         if (newValue.implicitValues)
-         {
-            criteria.values = newValue.implicitValues;
-         }
-      }
-      else
-      {
-         console.log("E: setOperatorSelectedValue [null]");
-         setOperatorSelectedValue(null);
-         setOperatorInputValue("");
-      }
-
-      updateCriteria(criteria, false, false);
-   };
-
-   /*******************************************************************************
-    ** implementation of isOptionEqualToValue for Autocomplete - compares both the
-    ** value (e.g., what operator it is) and the implicitValues within the option
-    *******************************************************************************/
-   function isOperatorOptionEqual(option: OperatorOption, value: OperatorOption)
-   {
-      return (option?.value == value?.value && JSON.stringify(option?.implicitValues) == JSON.stringify(value?.implicitValues));
-   }
-
-   /*******************************************************************************
-    ** event handler for the value field (of all types), when it changes
-    *******************************************************************************/
-   const handleValueChange = (event: React.ChangeEvent | SyntheticEvent, valueIndex: number | "all" = 0, newValue?: any) =>
-   {
-      // @ts-ignore
-      const value = newValue !== undefined ? newValue : event ? event.target.value : null;
-
-      if (!criteria.values)
-      {
-         criteria.values = [];
-      }
-
-      if (valueIndex == "all")
-      {
-         criteria.values = value;
-      }
-      else
-      {
-         criteria.values[valueIndex] = value;
-      }
-
-      updateCriteria(criteria, true, false);
-   };
-
-   /*******************************************************************************
-    ** a noop event handler, e.g., for a too-complex
-    *******************************************************************************/
-   const noop = () =>
-   {
-   };
-
-   /*******************************************************************************
-    ** event handler that responds to 'x' button that removes the criteria from the
-    ** quick-filter, resetting it to a new filter.
-    *******************************************************************************/
-   const resetCriteria = (e: React.MouseEvent<HTMLSpanElement>) =>
-   {
-      if(criteriaIsValid)
-      {
-         e.stopPropagation();
-         const newCriteria = makeNewCriteria();
-         updateCriteria(newCriteria, false, true);
-         setStartIconName("filter_alt");
-      }
-   }
-
-   /*******************************************************************************
-    ** event handler for mouse-over on the filter icon - that changes to an 'x'
-    ** if there's a valid criteria in the quick-filter
-    *******************************************************************************/
-   const startIconMouseOver = () =>
-   {
-      if(criteriaIsValid)
-      {
-         setStartIconName("clear");
-      }
-   }
-
-   /*******************************************************************************
-    ** event handler for mouse-out on the filter icon - always resets it.
-    *******************************************************************************/
-   const startIconMouseOut = () =>
-   {
-      setStartIconName("filter_alt");
-   }
-
-   /*******************************************************************************
-    ** event handler for clicking the (x) icon that turns off this quick filter field.
-    ** hands off control to the function that was passed in (e.g., from RecordQuery).
-    *******************************************************************************/
-   const handleTurningOffQuickFilterField = () =>
-   {
-      closeMenu()
-      handleRemoveQuickFilterField(criteria?.fieldName);
-   }
-
-   ////////////////////////////////////////////////////////////////////////////////////
-   // if no field was input (e.g., record-query is still loading), return null early //
-   ////////////////////////////////////////////////////////////////////////////////////
-   if(!fieldMetaData)
-   {
-      return (null);
-   }
-
-   //////////////////////////////////////////////////////////////////////////////////////////
-   // if there should be a selected value in the operator autocomplete, and it's different //
-   // 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))
-   {
-      console.log(`A: setOperatorSelectedValue [${JSON.stringify(maybeNewOperatorSelectedValue)}]`);
-      setOperatorSelectedValue(maybeNewOperatorSelectedValue)
-      setOperatorInputValue(maybeNewOperatorSelectedValue?.label)
-   }
-
-   /////////////////////////////////////////////////////////////////////////////////////
-   // if there wasn't a criteria, or we need to reset it (make a new one), then do so //
-   /////////////////////////////////////////////////////////////////////////////////////
-   if (criteria == null || criteriaNeedsReset())
-   {
-      makeNewCriteria();
-   }
-
-   /////////////////////////
-   // build up the button //
-   /////////////////////////
-   const tooComplex = criteriaParam == "tooComplex";
-   const tooltipEnterDelay = 500;
-   let startIcon = <Badge badgeContent={criteriaIsValid && !tooComplex ? 1 : 0} color="warning" variant="dot" onMouseOver={startIconMouseOver} onMouseOut={startIconMouseOut} onClick={resetCriteria}><Icon>{startIconName}</Icon></Badge>
-   if(criteriaIsValid)
-   {
-      startIcon = <Tooltip title={"Remove this condition from your filter"} enterDelay={tooltipEnterDelay}>{startIcon}</Tooltip>
-   }
-
-   let buttonContent = <span>{tableForField?.name != tableMetaData.name ? `${tableForField.label}: ` : ""}{fieldMetaData.label}</span>
-   if (criteriaIsValid)
-   {
-      buttonContent = (
-         <Tooltip title={`${operatorSelectedValue.label} ${FilterUtils.getValuesString(fieldMetaData, criteria)}`} enterDelay={tooltipEnterDelay}>
-            {buttonContent}
-         </Tooltip>
-      );
-   }
-
-   let button = fieldMetaData && <Button
-      id={`quickFilter.${fullFieldName}`}
-      sx={{mr: "0.25rem", px: "1rem", border: isOpen ? "1px solid gray" : "1px solid transparent"}}
-      startIcon={startIcon}
-      onClick={tooComplex ? noop : handleOpenMenu}
-      disabled={tooComplex}
-   >{buttonContent}</Button>;
-
-   ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-   // if the criteria on this field is the "tooComplex" sentinel, then wrap the button in a tooltip stating such, and return early. //
-   // note this was part of original design on this widget, but later deprecated...                                                 //
-   ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-   if (tooComplex)
-   {
-      ////////////////////////////////////////////////////////////////////////////
-      // wrap button in span, so disabled button doesn't cause disabled tooltip //
-      ////////////////////////////////////////////////////////////////////////////
-      return (
-         <Tooltip title={`Your current filter is too complex to do a Quick Filter on ${fieldMetaData.label}.  Use the Filter button to edit.`} enterDelay={tooltipEnterDelay} slotProps={{popper: {sx: {top: "-0.75rem!important"}}}}>
-            <span>{button}</span>
-         </Tooltip>
-      );
-   }
-
-   //////////////////////////////
-   // return the button & menu //
-   //////////////////////////////
-   const widthAndMaxWidth = 250
-   return (
-      <>
-         {button}
-         {
-            isOpen && <Menu open={Boolean(anchorEl)} anchorEl={anchorEl} onClose={closeMenu} sx={{overflow: "visible"}}>
-               {
-                  handleRemoveQuickFilterField &&
-                  <Tooltip title={"Remove this field from Quick Filters"} placement="right">
-                     <IconButton size="small" sx={{position: "absolute", top: "-8px", right: "-8px", zIndex: 1}} onClick={handleTurningOffQuickFilterField}><Icon color="secondary">highlight_off</Icon></IconButton>
-                  </Tooltip>
-               }
-               <Box display="inline-block" width={widthAndMaxWidth} maxWidth={widthAndMaxWidth} className="operatorColumn">
-                  <Autocomplete
-                     id={"criteriaOperator"}
-                     renderInput={(params) => (<TextField {...params} label={"Operator"} variant="standard" autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
-                     options={operatorOptions}
-                     value={operatorSelectedValue as any}
-                     inputValue={operatorInputValue}
-                     onChange={handleOperatorChange}
-                     onInputChange={(e, value) => setOperatorInputValue(value)}
-                     isOptionEqualToValue={(option, value) => isOperatorOptionEqual(option, value)}
-                     getOptionLabel={(option: any) => option.label}
-                     autoSelect={true}
-                     autoHighlight={true}
-                     disableClearable
-                     slotProps={{popper: {style: {padding: 0, maxHeight: "unset", width: "250px"}}}}
-                  />
-               </Box>
-               <Box width={widthAndMaxWidth} maxWidth={widthAndMaxWidth} className="quickFilter filterValuesColumn">
-                  <FilterCriteriaRowValues
-                     operatorOption={operatorSelectedValue}
-                     criteria={criteria}
-                     field={fieldMetaData}
-                     table={tableMetaData} // todo - joins?
-                     valueChangeHandler={(event, valueIndex, newValue) => handleValueChange(event, valueIndex, newValue)}
-                     initiallyOpenMultiValuePvs={true} // todo - maybe not?
-                  />
-               </Box>
-            </Menu>
-         }
-      </>
-   );
-}

src/qqq/components/query/SelectionSubsetDialog.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 Dialog from "@mui/material/Dialog";
-import DialogActions from "@mui/material/DialogActions";
-import DialogContent from "@mui/material/DialogContent";
-import DialogContentText from "@mui/material/DialogContentText";
-import DialogTitle from "@mui/material/DialogTitle";
-import TextField from "@mui/material/TextField";
-import React, {useState} from "react";
-import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
-
-
-/*******************************************************************************
- ** Component that is the dialog for the user to enter the selection-subset
- *******************************************************************************/
-export default function SelectionSubsetDialog(props: { isOpen: boolean; initialValue: number; closeHandler: (value?: number) => void })
-{
-   const [value, setValue] = useState(props.initialValue);
-
-   const handleChange = (newValue: string) =>
-   {
-      setValue(parseInt(newValue));
-   };
-
-   const keyPressed = (e: React.KeyboardEvent<HTMLDivElement>) =>
-   {
-      if (e.key == "Enter" && value)
-      {
-         props.closeHandler(value);
-      }
-   };
-
-   return (
-      <Dialog open={props.isOpen} onClose={() => props.closeHandler()} onKeyPress={(e) => keyPressed(e)}>
-         <DialogTitle>Subset of the Query Result</DialogTitle>
-         <DialogContent>
-            <DialogContentText>How many records do you want to select?</DialogContentText>
-            <TextField
-               autoFocus
-               name="selection-subset-size"
-               inputProps={{width: "100%", type: "number", min: 1}}
-               onChange={(e) => handleChange(e.target.value)}
-               value={value}
-               sx={{width: "100%"}}
-               onFocus={event => event.target.select()}
-            />
-         </DialogContent>
-         <DialogActions>
-            <QCancelButton disabled={false} onClickHandler={() => props.closeHandler()} />
-            <QSaveButton label="OK" iconName="check" disabled={value == undefined || isNaN(value)} onClickHandler={() => props.closeHandler(value)} />
-         </DialogActions>
-      </Dialog>
-   );
-}
-

src/qqq/components/query/TableVariantDialog.tsx

@@ -1,122 +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 {QTableVariant} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableVariant";
-import Autocomplete from "@mui/material/Autocomplete";
-import Dialog from "@mui/material/Dialog";
-import DialogContent from "@mui/material/DialogContent";
-import DialogContentText from "@mui/material/DialogContentText";
-import DialogTitle from "@mui/material/DialogTitle";
-import TextField from "@mui/material/TextField";
-import React, {useEffect, useState} from "react";
-import {TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT} from "qqq/pages/records/query/RecordQuery";
-import Client from "qqq/utils/qqq/Client";
-
-const qController = Client.getInstance();
-
-/*******************************************************************************
- ** Component that is the dialog for the user to select a variant on tables with variant backends //
- *******************************************************************************/
-export default function TableVariantDialog(props: { isOpen: boolean; table: QTableMetaData; closeHandler: (value?: QTableVariant) => void })
-{
-   const [value, setValue] = useState(null);
-   const [dropDownOpen, setDropDownOpen] = useState(false);
-   const [variants, setVariants] = useState(null);
-
-   const handleVariantChange = (event: React.SyntheticEvent, value: any | any[], reason: string, details?: string) =>
-   {
-      const tableVariantLocalStorageKey = `${TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT}.${props.table.name}`;
-      if (value != null)
-      {
-         localStorage.setItem(tableVariantLocalStorageKey, JSON.stringify(value));
-      }
-      else
-      {
-         localStorage.removeItem(tableVariantLocalStorageKey);
-      }
-      props.closeHandler(value);
-   };
-
-   const keyPressed = (e: React.KeyboardEvent<HTMLDivElement>) =>
-   {
-      if (e.key == "Enter" && value)
-      {
-         props.closeHandler(value);
-      }
-   };
-
-   useEffect(() =>
-   {
-      console.log("queryVariants");
-      try
-      {
-         (async () =>
-         {
-            const variants = await qController.tableVariants(props.table.name);
-            console.log(JSON.stringify(variants));
-            setVariants(variants);
-         })();
-      }
-      catch (e)
-      {
-         console.log(e);
-      }
-   }, []);
-
-
-   return variants && (
-      <Dialog open={props.isOpen} onKeyPress={(e) => keyPressed(e)}>
-         <DialogTitle>{props.table.variantTableLabel}</DialogTitle>
-         <DialogContent>
-            <DialogContentText>Select the {props.table.variantTableLabel} to be used on this table:</DialogContentText>
-            <Autocomplete
-               id="tableVariantId"
-               sx={{width: "400px", marginTop: "10px"}}
-               open={dropDownOpen}
-               size="small"
-               onOpen={() =>
-               {
-                  setDropDownOpen(true);
-               }}
-               onClose={() =>
-               {
-                  setDropDownOpen(false);
-               }}
-               // @ts-ignore
-               onChange={handleVariantChange}
-               isOptionEqualToValue={(option, value) => option.id === value.id}
-               options={variants}
-               renderInput={(params) => <TextField {...params} label={props.table.variantTableLabel} />}
-               getOptionLabel={(option) =>
-               {
-                  if (typeof option == "object")
-                  {
-                     return (option as QTableVariant).name;
-                  }
-                  return option;
-               }}
-            />
-         </DialogContent>
-      </Dialog>
-   );
-}
-

src/qqq/components/widgets/DashboardWidgets.tsx

@@ -22,13 +22,11 @@ import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/Q
 import {Skeleton} from "@mui/material";
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
-import Tab from "@mui/material/Tab";
-import Tabs from "@mui/material/Tabs";
 import parse from "html-react-parser";
 import React, {useContext, useEffect, useReducer, useState} from "react";
+import {useLocation} from "react-router-dom";
 import QContext from "QContext";
 import MDTypography from "qqq/components/legacy/MDTypography";
-import TabPanel from "qqq/components/misc/TabPanel";
 import BarChart from "qqq/components/widgets/charts/barchart/BarChart";
 import HorizontalBarChart from "qqq/components/widgets/charts/barchart/HorizontalBarChart";
 import DefaultLineChart from "qqq/components/widgets/charts/linechart/DefaultLineChart";
@@ -46,7 +44,7 @@ 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, WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT, LabelComponent} from "qqq/components/widgets/Widget";
+import Widget, {WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT} from "qqq/components/widgets/Widget";
 import ProcessRun from "qqq/pages/processes/ProcessRun";
 import Client from "qqq/utils/qqq/Client";
 import TableWidget from "./tables/TableWidget";
@@ -60,10 +58,9 @@ interface Props
    tableName?: string;
    entityPrimaryKey?: string;
    omitWrappingGridContainer: boolean;
-   areChildren?: boolean;
-   childUrlParams?: string;
-   parentWidgetMetaData?: QWidgetMetaData;
-   wrapWidgetsInTabPanels: boolean;
+   areChildren?: boolean
+   childUrlParams?: string
+   parentWidgetMetaData?: QWidgetMetaData
 }
 
 DashboardWidgets.defaultProps = {
@@ -73,12 +70,12 @@ DashboardWidgets.defaultProps = {
    omitWrappingGridContainer: false,
    areChildren: false,
    childUrlParams: "",
-   parentWidgetMetaData: null,
-   wrapWidgetsInTabPanels: false,
+   parentWidgetMetaData: null
 };
 
-function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omitWrappingGridContainer, areChildren, childUrlParams, parentWidgetMetaData, wrapWidgetsInTabPanels}: Props): JSX.Element
+function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omitWrappingGridContainer, areChildren, childUrlParams, parentWidgetMetaData}: Props): JSX.Element
 {
+   const location = useLocation();
    const [widgetData, setWidgetData] = useState([] as any[]);
    const [widgetCounter, setWidgetCounter] = useState(0);
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
@@ -87,24 +84,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
    const [haveLoadedParams, setHaveLoadedParams] = useState(false);
    const {accentColor} = useContext(QContext);
 
-   let initialSelectedTab = 0;
-   let selectedTabKey: string = null;
-   if(parentWidgetMetaData && wrapWidgetsInTabPanels)
-   {
-      selectedTabKey = `qqq.widgets.selectedTabs.${parentWidgetMetaData.name}`
-      if (localStorage.getItem(selectedTabKey))
-      {
-         initialSelectedTab = Number(localStorage.getItem(selectedTabKey));
-      }
-   }
-   const [selectedTab, setSelectedTab] = useState(initialSelectedTab);
-
-   const changeTab = (newValue: number) =>
-   {
-      setSelectedTab(newValue);
-      localStorage.setItem(selectedTabKey, String(newValue));
-   };
-
    useEffect(() =>
    {
       setWidgetData([]);
@@ -123,15 +102,15 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                widgetData[i] = await qController.widget(widgetMetaData.name, urlParams);
                setWidgetData(widgetData);
                setWidgetCounter(widgetCounter + 1);
-               if (widgetData[i])
+               if(widgetData[i])
                {
                   widgetData[i]["errorLoading"] = false;
                }
             }
-            catch (e)
+            catch(e)
             {
                console.error(e);
-               if (widgetData[i])
+               if(widgetData[i])
                {
                   widgetData[i]["errorLoading"] = true;
                }
@@ -144,7 +123,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
 
    const reloadWidget = async (index: number, data: string) =>
    {
-      (async () =>
+      (async() =>
       {
          const urlParams = getQueryParams(widgetMetaDataList[index], data);
          setCurrentUrlParams(urlParams);
@@ -161,7 +140,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                widgetData[index]["errorLoading"] = false;
             }
          }
-         catch (e)
+         catch(e)
          {
             console.error(e);
             if (widgetData[index])
@@ -172,7 +151,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
 
          forceUpdate();
       })();
-   };
+   }
 
    function getQueryParams(widgetMetaData: QWidgetMetaData, extraParams: string): string
    {
@@ -199,36 +178,36 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
          }
       }
 
-      if (entityPrimaryKey)
+      if(entityPrimaryKey)
       {
          paramMap.set("id", entityPrimaryKey);
       }
 
-      if (tableName)
+      if(tableName)
       {
          paramMap.set("tableName", tableName);
       }
 
-      if (extraParams)
+      if(extraParams)
       {
          let pairs = extraParams.split("&");
          for (let i = 0; i < pairs.length; i++)
          {
             let nameValue = pairs[i].split("=");
-            if (nameValue.length == 2)
+            if(nameValue.length == 2)
             {
                paramMap.set(nameValue[0], nameValue[1]);
             }
          }
       }
 
-      if (childUrlParams)
+      if(childUrlParams)
       {
          let pairs = childUrlParams.split("&");
          for (let i = 0; i < pairs.length; i++)
          {
             let nameValue = pairs[i].split("=");
-            if (nameValue.length == 2)
+            if(nameValue.length == 2)
             {
                paramMap.set(nameValue[0], nameValue[1]);
             }
@@ -248,16 +227,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
 
    const renderWidget = (widgetMetaData: QWidgetMetaData, i: number): JSX.Element =>
    {
-      const labelAdditionalComponentsRight: LabelComponent[] = [];
-      if (widgetMetaData && widgetMetaData.icons)
-      {
-         const topRightInsideCardIcon = widgetMetaData.icons.get("topRightInsideCard");
-         if (topRightInsideCardIcon)
-         {
-            labelAdditionalComponentsRight.push(new HeaderIcon(topRightInsideCardIcon.name, topRightInsideCardIcon.path, topRightInsideCardIcon.color));
-         }
-      }
-
       return (
          <Box key={`${widgetMetaData.name}-${i}`} sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px", width: "100%", height: "100%"}}>
             {
@@ -269,7 +238,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      widgetIndex={i}
                      widgetMetaData={widgetMetaData}
                      data={widgetData[i]}
-                     reloadWidgetCallback={(data) => reloadWidget(i, data)}
+                     reloadWidgetCallback={reloadWidget}
                      storeDropdownSelections={widgetMetaData.storeDropdownSelections}
                   />
                )
@@ -301,9 +270,8 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      widgetData={widgetData[i]}
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      isChild={areChildren}
-                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
                   >
-                     <StackedBarChart data={widgetData[i]?.chartData} chartSubheaderData={widgetData[i]?.chartSubheaderData} />
+                     <StackedBarChart data={widgetData[i]?.chartData}/>
                   </Widget>
                )
             }
@@ -343,7 +311,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      widgetData={widgetData[i]}
                   >
-                     <Box>
+                     <Box px={3} pt={0} pb={2}>
                         <MDTypography component="div" variant="button" color="text" fontWeight="light">
                            {
                               widgetData && widgetData[i] && widgetData[i].html ? (
@@ -413,12 +381,10 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      widgetData={widgetData[i]}
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      isChild={areChildren}
-                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
                   >
                      <div>
                         <PieChart
                            chartData={widgetData[i]?.chartData}
-                           chartSubheaderData={widgetData[i]?.chartSubheaderData}
                            description={widgetData[i]?.description}
                         />
                      </div>
@@ -470,11 +436,11 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
             {
                widgetMetaData.type === "fieldValueList" && (
                   widgetData && widgetData[i] &&
-                  <FieldValueListWidget
-                     widgetMetaData={widgetMetaData}
-                     data={widgetData[i]}
-                     reloadWidgetCallback={(data) => reloadWidget(i, data)}
-                  />
+                     <FieldValueListWidget
+                        widgetMetaData={widgetMetaData}
+                        data={widgetData[i]}
+                        reloadWidgetCallback={(data) => reloadWidget(i, data)}
+                     />
                )
             }
             {
@@ -495,76 +461,32 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
             }
          </Box>
       );
-   };
-
-   if(wrapWidgetsInTabPanels)
-   {
-      omitWrappingGridContainer = true;
    }
 
    const body: JSX.Element =
       (
          <>
             {
-               widgetMetaDataList.map((widgetMetaData, i) =>
-               {
-                  let renderedWidget = widgetMetaData ? renderWidget(widgetMetaData, i) : (<></>);
-
-                  if (!omitWrappingGridContainer)
-                  {
-                     // @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>);
-                  }
-
-                  if (wrapWidgetsInTabPanels)
-                  {
-                     renderedWidget = (<TabPanel index={i} value={selectedTab} style={{
-                        padding: 0,
-                        margin: "-1rem",
-                        marginBottom: "-3.5rem",
-                        width: "calc(100% + 2rem)"
-                     }}>
-                        {renderedWidget}
-                     </TabPanel>);
-                  }
-
-                  return (<React.Fragment key={`${widgetMetaData.name}-${i}`}>{renderedWidget}</React.Fragment>)
-               })
+               widgetMetaDataList.map((widgetMetaData, i) => (
+                  omitWrappingGridContainer
+                     ? widgetMetaData && renderWidget(widgetMetaData, i)
+                     :
+                     widgetMetaData && <Grid id={widgetMetaData.name} key={`${widgetMetaData.name}-${i}`} item lg={widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12} xs={12} sx={{display: "flex", alignItems: "stretch", scrollMarginTop: "100px"}}>
+                        {renderWidget(widgetMetaData, i)}
+                     </Grid>
+               ))
             }
          </>
       );
 
-   const tabs = widgetMetaDataList && wrapWidgetsInTabPanels ?
-      <Tabs
-         sx={{m: 0, mb: 1.5, ml: -2, mr: -2, mt: -3,
-            "& .MuiTabs-scroller": {
-               ml: 0
-            }
-         }}
-         value={selectedTab}
-         onChange={(event, newValue) => changeTab(newValue)}
-         variant="standard"
-      >
-         {widgetMetaDataList.map((widgetMetaData, i) => (
-            <Tab key={widgetMetaData.name} label={widgetMetaData.label} />
-         ))}
-      </Tabs>
-      : <></>
-
    return (
       widgetCount > 0 ? (
-         <>
-            {tabs}
-            {
-               omitWrappingGridContainer ? body : (
-                  <Grid container spacing={2.5}>
-                     {body}
-                  </Grid>
-               )
-            }
-         </>
+         omitWrappingGridContainer ? body :
+            (
+               <Grid container spacing={3} pb={4}>
+                  {body}
+               </Grid>
+            )
       ) : null
    );
 }

src/qqq/components/widgets/ParentWidget.tsx

@@ -43,7 +43,6 @@ export interface ParentWidgetData
    dropdownNeedsSelectedText?: string;
    storeDropdownSelections?: boolean;
    icon?: string;
-   layoutType: string;
 }
 
 
@@ -56,7 +55,7 @@ interface Props
    widgetMetaData?: QWidgetMetaData;
    widgetIndex: number;
    data: ParentWidgetData;
-   reloadWidgetCallback?: (params: string) => void;
+   reloadWidgetCallback?: (widgetIndex: number, params: string) => void;
    entityPrimaryKey?: string;
    tableName?: string;
    storeDropdownSelections?: boolean;
@@ -92,29 +91,18 @@ function ParentWidget({urlParams, widgetMetaData, widgetIndex, data, reloadWidge
       }
    }, [qInstance, data, childUrlParams]);
 
-   useEffect(() =>
-   {
-      setChildUrlParams(urlParams)
-   }, [urlParams]);
-
    const parentReloadWidgetCallback = (data: string) =>
    {
       setChildUrlParams(data);
-      reloadWidgetCallback(data);
+      reloadWidgetCallback(widgetIndex, data);
    }
 
    ///////////////////////////////////////////////////////////////////////////////////////////
    // if this parent widget is in card form, and its children are too, then we need some px //
    ///////////////////////////////////////////////////////////////////////////////////////////
-   const parentIsCard = widgetMetaData && widgetMetaData.isCard;
-   const childrenAreCards = widgetMetaData && widgets && widgets[0] && widgets[0].isCard;
-   const px = (parentIsCard && childrenAreCards) ? 3 : 0;
-
-   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-   // if this is a parent, which is not a card, then we need to omit the padding, i think, on the Widget that ultimately gets rendered //
-   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-   const omitPadding = !parentIsCard;
+   const px = (widgetMetaData && widgetMetaData.isCard && widgets && widgets[0] && widgets[0].isCard) ? 3 : 0;
 
+   // @ts-ignore
    return (
       qInstance && data ? (
          <Widget
@@ -122,10 +110,9 @@ function ParentWidget({urlParams, widgetMetaData, widgetIndex, data, reloadWidge
             widgetData={data}
             storeDropdownSelections={storeDropdownSelections}
             reloadWidgetCallback={parentReloadWidgetCallback}
-            omitPadding={omitPadding}
          >
             <Box sx={{height: "100%", width: "100%"}} px={px}>
-               <DashboardWidgets widgetMetaDataList={widgets} entityPrimaryKey={entityPrimaryKey} tableName={tableName} childUrlParams={childUrlParams} areChildren={true} parentWidgetMetaData={widgetMetaData} wrapWidgetsInTabPanels={data.layoutType == "TABS"}/>
+               <DashboardWidgets widgetMetaDataList={widgets} entityPrimaryKey={entityPrimaryKey} tableName={tableName} childUrlParams={childUrlParams} areChildren={true} parentWidgetMetaData={widgetMetaData}/>
             </Box>
          </Widget>
       ) : null

src/qqq/components/widgets/Widget.tsx

@@ -25,13 +25,14 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
 import Icon from "@mui/material/Icon";
+import LinearProgress from "@mui/material/LinearProgress";
 import Tooltip from "@mui/material/Tooltip/Tooltip";
 import Typography from "@mui/material/Typography";
 import parse from "html-react-parser";
 import React, {useEffect, useState} from "react";
-import {NavigateFunction, useNavigate} from "react-router-dom";
-import colors from "qqq/assets/theme/base/colors";
-import WidgetDropdownMenu, {DropdownOption} from "qqq/components/widgets/components/WidgetDropdownMenu";
+import {Link, NavigateFunction, useNavigate} from "react-router-dom";
+import colors from "qqq/components/legacy/colors";
+import DropdownMenu, {DropdownOption} from "qqq/components/widgets/components/DropdownMenu";
 
 export interface WidgetData
 {
@@ -42,11 +43,9 @@ export interface WidgetData
       id: string,
       label: string
    }[][];
-   dropdownDefaultValueList?: string[];
    dropdownNeedsSelectedText?: string;
    hasPermission?: boolean;
    errorLoading?: boolean;
-
    [other: string]: any;
 }
 
@@ -54,9 +53,7 @@ export interface WidgetData
 interface Props
 {
    labelAdditionalComponentsLeft: LabelComponent[];
-   labelAdditionalElementsLeft: JSX.Element[];
    labelAdditionalComponentsRight: LabelComponent[];
-   labelBoxAdditionalSx?: any;
    widgetMetaData?: QWidgetMetaData;
    widgetData?: WidgetData;
    children: JSX.Element;
@@ -65,7 +62,6 @@ interface Props
    isChild?: boolean;
    footerHTML?: string;
    storeDropdownSelections?: boolean;
-   omitPadding: boolean;
 }
 
 Widget.defaultProps = {
@@ -74,10 +70,7 @@ Widget.defaultProps = {
    widgetMetaData: {},
    widgetData: {},
    labelAdditionalComponentsLeft: [],
-   labelAdditionalElementsLeft: [],
    labelAdditionalComponentsRight: [],
-   labelBoxAdditionalSx: {},
-   omitPadding: false,
 };
 
 
@@ -95,56 +88,34 @@ export class LabelComponent
 {
    render = (args: LabelComponentRenderArgs): JSX.Element =>
    {
-      return (<div>Unsupported component type</div>);
-   };
+      return (<div>Unsupported component type</div>)
+   }
 }
 
 
 /*******************************************************************************
  **
  *******************************************************************************/
-export class HeaderIcon extends LabelComponent
+export class HeaderLink extends LabelComponent
 {
-   iconName: string;
-   iconPath: string;
-   color: string;
-   coloredBG: boolean;
+   label: string;
+   to: string
 
-   iconColor: string;
-   bgColor: string;
-
-   constructor(iconName: string, iconPath: string, color: string, coloredBG: boolean = true)
+   constructor(label: string, to: string)
    {
       super();
-      this.iconName = iconName;
-      this.iconPath = iconPath;
-      this.color = color;
-      this.coloredBG = coloredBG;
-
-      this.iconColor = this.coloredBG ? "#FFFFFF" : this.color;
-      this.bgColor = this.coloredBG ? this.color : "none";
+      this.label = label;
+      this.to = to;
    }
 
-
    render = (args: LabelComponentRenderArgs): JSX.Element =>
    {
-      const styles = {
-         width: "1.75rem",
-         height: "1.75rem",
-         color: this.iconColor,
-         backgroundColor: this.bgColor,
-         borderRadius: "0.25rem"
-      };
-
-      if (this.iconPath)
-      {
-         return (<Box sx={{textAlign: "center", ...styles}}><img src={this.iconPath} width="16" height="16" /></Box>);
-      }
-      else
-      {
-         return (<Icon sx={{padding: "0.25rem", ...styles}} fontSize="small">{this.iconName}</Icon>);
-      }
-   };
+      return (
+         <Typography variant="body2" p={2} display="inline" fontSize=".875rem" pt="0" position="relative" top="-0.25rem">
+            {this.to ? <Link to={this.to}>{this.label}</Link> : null}
+         </Typography>
+      );
+   }
 }
 
 
@@ -170,17 +141,45 @@ export class AddNewRecordButton extends LabelComponent
 
    openEditForm = (navigate: any, table: QTableMetaData, id: any = null, defaultValues: any, disabledFields: any) =>
    {
-      navigate(`#/createChild=${table.name}/defaultValues=${JSON.stringify(defaultValues)}/disabledFields=${JSON.stringify(disabledFields)}`);
-   };
+      navigate(`#/createChild=${table.name}/defaultValues=${JSON.stringify(defaultValues)}/disabledFields=${JSON.stringify(disabledFields)}`)
+   }
 
    render = (args: LabelComponentRenderArgs): JSX.Element =>
    {
       return (
-         <Typography variant="body2" p={2} pr={0} display="inline" position="relative" top="-0.5rem">
+         <Typography variant="body2" p={2} pr={0} display="inline" position="relative" top="0.25rem">
             <Button sx={{mt: 0.75}} onClick={() => this.openEditForm(args.navigate, this.table, null, this.defaultValues, this.disabledFields)}>{this.label}</Button>
          </Typography>
       );
-   };
+   }
+}
+
+
+/*******************************************************************************
+ **
+ *******************************************************************************/
+export class ExportDataButton extends LabelComponent
+{
+   callbackToExport: any;
+   tooltipTitle: string;
+   isDisabled: boolean;
+
+   constructor(callbackToExport: any, isDisabled = false, tooltipTitle: string = "Export")
+   {
+      super();
+      this.callbackToExport = callbackToExport;
+      this.isDisabled = isDisabled;
+      this.tooltipTitle = tooltipTitle;
+   }
+
+   render = (args: LabelComponentRenderArgs): JSX.Element =>
+   {
+      return (
+         <Typography variant="body2" py={2} px={0} display="inline" position="relative" top="-0.375rem">
+            <Tooltip title={this.tooltipTitle}><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={() => this.callbackToExport()} disabled={this.isDisabled}><Icon>save_alt</Icon></Button></Tooltip>
+         </Typography>
+      );
+   }
 }
 
 
@@ -190,115 +189,45 @@ export class AddNewRecordButton extends LabelComponent
 export class Dropdown extends LabelComponent
 {
    label: string;
-   dropdownMetaData: any;
    options: DropdownOption[];
-   dropdownDefaultValue?: string;
    dropdownName: string;
    onChangeCallback: any;
 
-   constructor(label: string, dropdownMetaData: any, options: DropdownOption[], dropdownDefaultValue: string, dropdownName: string, onChangeCallback: any)
+   constructor(label: string, options: DropdownOption[], dropdownName: string, onChangeCallback: any)
    {
       super();
       this.label = label;
-      this.dropdownMetaData = dropdownMetaData;
       this.options = options;
-      this.dropdownDefaultValue = dropdownDefaultValue;
       this.dropdownName = dropdownName;
       this.onChangeCallback = onChangeCallback;
    }
 
    render = (args: LabelComponentRenderArgs): JSX.Element =>
    {
-      const label = `Select ${this.label}`;
       let defaultValue = null;
       const localStorageKey = `${WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT}.${args.widgetProps.widgetMetaData.name}.${this.dropdownName}`;
       if (args.widgetProps.storeDropdownSelections)
       {
-         ////////////////////////////////////////////////////////////////////////////////////////////
-         // see if an existing value is stored in local storage, and if so set it in dropdown      //
-         // originally we used the full object from localStorage - but - in case the label         //
-         // changed since it was stored, we'll instead just find the option by id (or in case that //
-         // option isn't available anymore, then we'll select nothing instead of a missing value   //
-         ////////////////////////////////////////////////////////////////////////////////////////////
-         try
-         {
-            const localStorageOption = JSON.parse(localStorage.getItem(localStorageKey));
-            if(localStorageOption)
-            {
-               const id = localStorageOption.id;
-               for (let i = 0; i < this.options.length; i++)
-               {
-                  if (this.options[i].id == id)
-                  {
-                     defaultValue = this.options[i]
-                     args.dropdownData[args.componentIndex] = defaultValue?.id;
-                  }
-               }
-            }
-         }
-         catch(e)
-         {
-            console.log(`Error getting default value for dropdown [${this.dropdownName}] from local storage`, e)
-         }
-      }
-
-      /////////////////////////////////////////////////////////////////////////////////////////////
-      // if there wasn't a value selected, but there is a default from the backend, then use it. //
-      /////////////////////////////////////////////////////////////////////////////////////////////
-      if (defaultValue == null && this.dropdownDefaultValue != null)
-      {
-         for (let i = 0; i < this.options.length; i++)
-         {
-            if(this.options[i].id == this.dropdownDefaultValue)
-            {
-               defaultValue = this.options[i];
-               args.dropdownData[args.componentIndex] = defaultValue?.id;
-
-               if (args.widgetProps.storeDropdownSelections)
-               {
-                  localStorage.setItem(localStorageKey, JSON.stringify(defaultValue));
-               }
-
-               this.onChangeCallback(label, defaultValue);
-               break;
-            }
-         }
-      }
-
-      /////////////////////////////////////////////////////////////////////////////
-      // if there's a 'label for null value' (and no default from the backend),  //
-      // then add that as an option (and select it if nothing else was selected) //
-      /////////////////////////////////////////////////////////////////////////////
-      let options = this.options;
-      if (this.dropdownMetaData.labelForNullValue && !this.dropdownDefaultValue)
-      {
-         const nullOption = {id: null as string, label: this.dropdownMetaData.labelForNullValue};
-         options = [nullOption, ...this.options];
-
-         if (!defaultValue)
-         {
-            defaultValue = nullOption;
-         }
+         ///////////////////////////////////////////////////////////////////////////////////////
+         // see if an existing value is stored in local storage, and if so set it in dropdown //
+         ///////////////////////////////////////////////////////////////////////////////////////
+         defaultValue = JSON.parse(localStorage.getItem(localStorageKey));
+         args.dropdownData[args.componentIndex] = defaultValue?.id;
       }
 
       return (
-         <Box mb={2} sx={{float: "right"}}>
-            <WidgetDropdownMenu
+         <Box my={2} sx={{float: "right"}}>
+            <DropdownMenu
                name={this.dropdownName}
                defaultValue={defaultValue}
-               sx={{marginLeft: "1rem"}}
-               label={label}
-               startIcon={this.dropdownMetaData.startIconName}
-               allowBackAndForth={this.dropdownMetaData.allowBackAndForth}
-               backAndForthInverted={this.dropdownMetaData.backAndForthInverted}
-               disableClearable={this.dropdownMetaData.disableClearable}
-               dropdownOptions={options}
+               sx={{width: 200, marginLeft: "15px"}}
+               label={`Select ${this.label}`}
+               dropdownOptions={this.options}
                onChangeCallback={this.onChangeCallback}
-               width={this.dropdownMetaData.width ?? 225}
             />
          </Box>
       );
-   };
+   }
 }
 
 
@@ -318,11 +247,11 @@ export class ReloadControl extends LabelComponent
    render = (args: LabelComponentRenderArgs): JSX.Element =>
    {
       return (
-         <Typography variant="body2" py={2} px={0} display="inline" position="relative" top="-0.175rem">
-            <Tooltip title="Refresh"><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={() => this.callback()}><Icon sx={{color: colors.gray.main, fontSize: 1.125}}>refresh</Icon></Button></Tooltip>
+         <Typography variant="body2" py={2} px={0} display="inline" position="relative" top="-0.375rem">
+            <Tooltip title="Refresh"><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={() => this.callback()}><Icon>refresh</Icon></Button></Tooltip>
          </Typography>
       );
-   };
+   }
 }
 
 
@@ -404,12 +333,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
          props.widgetData.dropdownDataList?.map((dropdownData: any, index: number) =>
          {
             // console.log(`${props.widgetMetaData.name} building a Dropdown, data is: ${dropdownData}`);
-            let defaultValue = null;
-            if(props.widgetData.dropdownDefaultValueList && props.widgetData.dropdownDefaultValueList.length >= index)
-            {
-               defaultValue = props.widgetData.dropdownDefaultValueList[index];
-            }
-            updatedStateLabelComponentsRight.push(new Dropdown(props.widgetData.dropdownLabelList[index], props.widgetMetaData.dropdowns[index], dropdownData, defaultValue, props.widgetData.dropdownNameList[index], handleDataChange));
+            updatedStateLabelComponentsRight.push(new Dropdown(props.widgetData.dropdownLabelList[index], dropdownData, props.widgetData.dropdownNameList[index], handleDataChange));
          });
          setLabelComponentsRight(updatedStateLabelComponentsRight);
       }
@@ -448,7 +372,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
 
          if (index < 0)
          {
-            throw (`Could not find table name for label ${tableName}`);
+            throw(`Could not find table name for label ${tableName}`);
          }
 
          dropdownData[index] = (changedData) ? changedData.id : null;
@@ -470,7 +394,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
             }
          }
 
-         reloadWidget(dropdownData);
+         reloadWidget(dropdownData)
       }
    }
 
@@ -498,7 +422,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
       {
          console.log(`No reload widget callback in ${props.widgetMetaData.label}`);
       }
-   };
+   }
 
    const toggleFullScreenWidget = () =>
    {
@@ -510,14 +434,14 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
       {
          setFullScreenWidgetClassName("fullScreenWidget");
       }
-   };
+   }
 
    const hasPermission = props.widgetData?.hasPermission === undefined || props.widgetData?.hasPermission === true;
 
    const isSet = (v: any): boolean =>
    {
       return (v !== null && v !== undefined);
-   };
+   }
 
    /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // to avoid taking up the space of the Box with the label and icon and label-components (since it has a height), only output that box if we need any of the components //
@@ -526,50 +450,36 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
    if (hasPermission)
    {
       needLabelBox ||= (labelComponentsLeft && labelComponentsLeft.length > 0);
-      needLabelBox ||= (props.labelAdditionalElementsLeft && props.labelAdditionalElementsLeft.length > 0);
       needLabelBox ||= (labelComponentsRight && labelComponentsRight.length > 0);
       needLabelBox ||= isSet(props.widgetMetaData?.icon);
       needLabelBox ||= isSet(props.widgetData?.label);
       needLabelBox ||= isSet(props.widgetMetaData?.label);
    }
 
-   //////////////////////////////////////////////////////////////////////////////////////////
-   // first look for a label in the widget data, which would override that in the metadata //
-   // note - previously this had a ?: and one was pl={2}, the other was pl={3}...          //
-   //////////////////////////////////////////////////////////////////////////////////////////
-   const labelToUse = props.widgetData?.label ?? props.widgetMetaData?.label;
-   let labelElement = (
-      <Typography sx={{cursor: "default", pl: "auto", pt: props.widgetMetaData.type == "parentWidget" ? "1rem" : "auto", fontWeight: 600}} variant="h6" display="inline">
-         {labelToUse}
-      </Typography>
-   );
-
-   if (props.widgetMetaData.tooltip)
-   {
-      labelElement = <Tooltip title={props.widgetMetaData.tooltip} arrow={false} followCursor={true} placement="bottom-start">{labelElement}</Tooltip>;
-   }
-
    const errorLoading = props.widgetData?.errorLoading !== undefined && props.widgetData?.errorLoading === true;
    const widgetContent =
       <Box sx={{width: "100%", height: "100%", minHeight: props.widgetMetaData?.minHeight ? props.widgetMetaData?.minHeight : "initial"}}>
          {
             needLabelBox &&
-            <Box display="flex" justifyContent="space-between" alignItems="flex-start" sx={{width: "100%", ...props.labelBoxAdditionalSx}} minHeight={"2.5rem"}>
-               <Box>
+            <Box pr={2} display="flex" justifyContent="space-between" alignItems="flex-start" sx={{width: "100%"}} height={"3.5rem"}>
+               <Box pt={2} pb={1}>
                   {
                      hasPermission ?
                         props.widgetMetaData?.icon && (
-                           <Box ml={1} mr={2} mt={-4} sx={{
-                              display: "flex",
-                              justifyContent: "center",
-                              alignItems: "center",
-                              width: "64px",
-                              height: "64px",
-                              borderRadius: "8px",
-                              background: colors.info.main,
-                              color: "#ffffff",
-                              float: "left"
-                           }}
+                           <Box
+                              ml={3}
+                              mt={-4}
+                              sx={{
+                                 display: "flex",
+                                 justifyContent: "center",
+                                 alignItems: "center",
+                                 width: "64px",
+                                 height: "64px",
+                                 borderRadius: "8px",
+                                 background: colors.info.main,
+                                 color: "#ffffff",
+                                 float: "left"
+                              }}
                            >
                               <Icon fontSize="medium" color="inherit">
                                  {props.widgetMetaData.icon}
@@ -577,24 +487,40 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
                            </Box>
                         ) :
                         (
-                           <Box ml={3} mt={-4} sx={{
-                              display: "flex",
-                              justifyContent: "center",
-                              alignItems: "center",
-                              width: "64px",
-                              height: "64px",
-                              borderRadius: "8px",
-                              background: colors.info.main,
-                              color: "#ffffff",
-                              float: "left"
-                           }}
+                           <Box
+                              ml={3}
+                              mt={-4}
+                              sx={{
+                                 display: "flex",
+                                 justifyContent: "center",
+                                 alignItems: "center",
+                                 width: "64px",
+                                 height: "64px",
+                                 borderRadius: "8px",
+                                 background: colors.info.main,
+                                 color: "#ffffff",
+                                 float: "left"
+                              }}
                            >
                               <Icon fontSize="medium" color="inherit">lock</Icon>
                            </Box>
                         )
                   }
                   {
-                     hasPermission && labelToUse && (labelElement)
+                     //////////////////////////////////////////////////////////////////////////////////////////
+                     // first look for a label in the widget data, which would override that in the metadata //
+                     //////////////////////////////////////////////////////////////////////////////////////////
+                     hasPermission && props.widgetData?.label ? (
+                        <Typography sx={{position: "relative", top: -4}} variant="h6" fontWeight="medium" pl={2} display="inline-block">
+                           {props.widgetData.label}
+                        </Typography>
+                     ) : (
+                        hasPermission && props.widgetMetaData?.label && (
+                           <Typography sx={{position: "relative", top: -4}} variant="h6" fontWeight="medium" pl={3} display="inline-block">
+                              {props.widgetMetaData.label}
+                           </Typography>
+                        )
+                     )
                   }
                   {
                      hasPermission && (
@@ -604,7 +530,6 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
                         })
                      )
                   }
-                  {props.labelAdditionalElementsLeft}
                </Box>
                <Box>
                   {
@@ -619,12 +544,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
             </Box>
          }
          {
-            ///////////////////////////////////////////////////////////////////
-            // turning this off... for now.  maybe make a property in future //
-            ///////////////////////////////////////////////////////////////////
-            /*
-            props.widgetMetaData?.isCard && (reloading ? <LinearProgress color="info" sx={{overflow: "hidden", borderRadius: "0", mx:-2}} /> : <Box height="0.375rem" />)
-            */
+            props.widgetMetaData?.isCard && (reloading ? <LinearProgress color="info" sx={{overflow: "hidden", borderRadius: "0"}} /> : <Box height="0.375rem" />)
          }
          {
             errorLoading ? (
@@ -634,7 +554,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
                </Box>
             ) : (
                hasPermission && props.widgetData?.dropdownNeedsSelectedText ? (
-                  <Box pb={3} sx={{width: "100%", textAlign: "right"}}>
+                  <Box pb={3} pr={3} sx={{width: "100%", textAlign: "right"}}>
                      <Typography variant="body2">
                         {props.widgetData?.dropdownNeedsSelectedText}
                      </Typography>
@@ -655,12 +575,11 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
          }
       </Box>;
 
-   const padding = props.omitPadding ? "auto" : "24px 16px";
    return props.widgetMetaData?.isCard
-      ? <Card sx={{marginTop: props.widgetMetaData?.icon ? 2 : 0, width: "100%", p: padding}} className={fullScreenWidgetClassName}>
+      ? <Card sx={{marginTop: props.widgetMetaData?.icon ? 2 : 0, width: "100%"}} className={fullScreenWidgetClassName}>
          {widgetContent}
       </Card>
-      : <span style={{width: "100%", padding: padding}}>{widgetContent}</span>;
+      : widgetContent;
 }
 
 export default Widget;

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

@@ -28,7 +28,6 @@ import {Bar} from "react-chartjs-2";
 import {useNavigate} from "react-router-dom";
 import colors from "qqq/assets/theme/base/colors";
 import {chartColors, DefaultChartData} from "qqq/components/widgets/charts/DefaultChartData";
-import ChartSubheaderWithData, {ChartSubheaderData} from "qqq/components/widgets/components/ChartSubheaderWithData";
 
 ChartJS.register(
    CategoryScale,
@@ -40,61 +39,18 @@ ChartJS.register(
 );
 
 export const options = {
-   maintainAspectRatio: false,
    responsive: true,
    animation: {
       duration: 0
    },
-   elements: {
-      bar: {
-         borderRadius: 4
-      }
-   },
-   plugins: {
-      tooltip: {
-         // todo - some configs around this
-         callbacks: {
-            title: function(context: any)
-            {
-               return ("");
-            },
-            label: function(context: any)
-            {
-               if(context.dataset.label.startsWith(context.label))
-               {
-                  return `${context.label}: ${context.formattedValue}`;
-               }
-               else
-               {
-                  return ("");
-               }
-            }
-         }
-      },
-      legend: {
-         position: "bottom",
-         labels: {
-            usePointStyle: true,
-            pointStyle: "circle",
-            boxHeight: 6,
-            boxWidth: 6,
-            padding: 12,
-            font: {
-               size: 14
-            }
-         }
-      }
-   },
    scales: {
       x: {
          stacked: true,
-         grid: {display: false},
+         grid: {offset: false},
          ticks: {autoSkip: false, maxRotation: 90}
       },
       y: {
          stacked: true,
-         position: "right",
-         ticks: {precision: 0}
       },
    },
 };
@@ -102,12 +58,10 @@ export const options = {
 interface Props
 {
    data: DefaultChartData;
-   chartSubheaderData?: ChartSubheaderData;
 }
 
 const {gradients} = colors;
-
-function StackedBarChart({data, chartSubheaderData}: Props): JSX.Element
+function StackedBarChart({data}: Props): JSX.Element
 {
    const navigate = useNavigate();
 
@@ -116,30 +70,23 @@ function StackedBarChart({data, chartSubheaderData}: Props): JSX.Element
 
    const handleClick = (e: Array<{}>) =>
    {
-      if (e && e.length > 0 && data?.urls && data?.urls.length)
+      if(e && e.length > 0 && data?.urls && data?.urls.length)
       {
          // @ts-ignore
          navigate(data.urls[e[0]["index"]]);
       }
       console.log(e);
-   };
+   }
 
    useEffect(() =>
    {
-      if (data)
+      if(data)
       {
          data?.datasets.forEach((dataset: any, index: number) =>
          {
             if (!dataset.backgroundColor)
             {
-               if (gradients[chartColors[index]])
-               {
-                  dataset.backgroundColor = gradients[chartColors[index]].state;
-               }
-               else
-               {
-                  dataset.backgroundColor = chartColors[index];
-               }
+               dataset.backgroundColor = gradients[chartColors[index]].state;
             }
          });
          setStateData(stateData);
@@ -148,13 +95,8 @@ function StackedBarChart({data, chartSubheaderData}: Props): JSX.Element
 
 
    return data ? (
-      <Box>
-         {chartSubheaderData && (<ChartSubheaderWithData chartSubheaderData={chartSubheaderData} />)}
-         <Box width="100%" height="300px">
-            <Bar data={data} options={options} getElementsAtEvent={handleClick} />
-         </Box>
-      </Box>
-   ) : <Skeleton sx={{marginLeft: "20px", marginRight: "20px", height: "200px"}} />;
+      <Box p={3}><Bar data={data} options={options} getElementsAtEvent={handleClick} /></Box>
+   ) : <Skeleton sx={{marginLeft: "20px", marginRight: "20px", height: "200px"}} /> ;
 }
 
 export default StackedBarChart;

src/qqq/components/widgets/charts/barchart/BarChart.tsx

@@ -63,7 +63,7 @@ const options = {
             font: {
                size: 14,
                weight: 300,
-               family: "SF Pro Display,Roboto",
+               family: "Roboto",
                style: "normal",
                lineHeight: 2,
             },
@@ -86,7 +86,7 @@ const options = {
             font: {
                size: 14,
                weight: 300,
-               family: "SF Pro Display,Roboto",
+               family: "Roboto",
                style: "normal",
                lineHeight: 2,
             },

src/qqq/components/widgets/charts/barchart/HorizontalBarChart.tsx

@@ -67,7 +67,7 @@ const options = {
             font: {
                size: 14,
                weight: 300,
-               family: "SF Pro Display,Roboto",
+               family: "Roboto",
                style: "normal",
                lineHeight: 2,
             },
@@ -88,7 +88,7 @@ const options = {
             font: {
                size: 14,
                weight: 300,
-               family: "SF Pro Display,Roboto",
+               family: "Roboto",
                style: "normal",
                lineHeight: 2,
             },

src/qqq/components/widgets/charts/linechart/DefaultLineChart.tsx

@@ -81,7 +81,7 @@ const options = {
             font: {
                size: 14,
                weight: 300,
-               family: "SF Pro Display,Roboto",
+               family: "Roboto",
                style: "normal",
                lineHeight: 2,
             },
@@ -107,7 +107,7 @@ const options = {
             font: {
                size: 14,
                weight: 300,
-               family: "SF Pro Display,Roboto",
+               family: "Roboto",
                style: "normal",
                lineHeight: 2,
             },

src/qqq/components/widgets/charts/linechart/LineChartConfigs.ts

@@ -69,7 +69,7 @@ function configs(labels: any, datasets: any)
                   font: {
                      size: 14,
                      weight: 300,
-                     family: "SF Pro Display,Roboto",
+                     family: "Roboto",
                      style: "normal",
                      lineHeight: 2,
                   },
@@ -90,7 +90,7 @@ function configs(labels: any, datasets: any)
                   font: {
                      size: 14,
                      weight: 300,
-                     family: "SF Pro Display,Roboto",
+                     family: "Roboto",
                      style: "normal",
                      lineHeight: 2,
                   },

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

@@ -30,7 +30,6 @@ import {useNavigate} from "react-router-dom";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import {chartColors} from "qqq/components/widgets/charts/DefaultChartData";
 import configs from "qqq/components/widgets/charts/piechart/PieChartConfigs";
-import ChartSubheaderWithData, {ChartSubheaderData} from "qqq/components/widgets/components/ChartSubheaderWithData";
 
 //////////////////////////////////////////
 // structure of expected bar chart data //
@@ -52,29 +51,25 @@ interface Props
 {
    description?: string;
    chartData: PieChartData;
-   chartSubheaderData?: ChartSubheaderData;
 
    [key: string]: any;
 }
 
 
-function PieChart({description, chartData, chartSubheaderData}: Props): JSX.Element
+function PieChart({description, chartData}: Props): JSX.Element
 {
    const navigate = useNavigate();
    const [dataLoaded, setDataLoaded] = useState(false);
 
    if (chartData && chartData.dataset)
    {
-      if(!chartData.dataset.backgroundColors)
-      {
-         chartData.dataset.backgroundColors = chartColors;
-      }
+      chartData.dataset.backgroundColors = chartColors;
    }
    const {data, options} = configs(chartData?.labels || [], chartData?.dataset || {});
 
    useEffect(() =>
    {
-      if (chartData)
+      if(chartData)
       {
          setDataLoaded(true);
       }
@@ -82,51 +77,53 @@ function PieChart({description, chartData, chartSubheaderData}: Props): JSX.Elem
 
    const handleClick = (e: Array<{}>) =>
    {
-      if (e && e.length > 0 && chartData?.dataset?.urls && chartData?.dataset?.urls.length)
+      if(e && e.length > 0 && chartData?.dataset?.urls && chartData?.dataset?.urls.length)
       {
          // @ts-ignore
          navigate(chartData.dataset.urls[e[0]["index"]]);
       }
-   };
+   }
 
    return (
-      <Card sx={{boxShadow: "none", height: "100%", width: "100%", display: "flex", flexGrow: 1, border: 0}}>
-         <Box>
-            <Box>
-               {chartSubheaderData && (<ChartSubheaderWithData chartSubheaderData={chartSubheaderData} />)}
-            </Box>
-            <Box width="100%" height="300px">
-               {useMemo(
-                  () => (
-                     <Pie data={data} options={options} getElementsAtEvent={handleClick} />
-                  ),
-                  [chartData]
-               )}
-            </Box>
-            {
-               !chartData && (
-                  <Box sx={{
-                     position: "absolute",
-                     top: "40%",
-                     left: "50%",
-                     transform: "translate(-50%, -50%)",
-                     display: "flex",
-                     justifyContent: "center"
-                  }}>
-                     <Skeleton sx={{width: "150px", height: "150px"}} variant="circular" />
+      <Card sx={{minHeight: "400px", boxShadow: "none", height: "100%", width: "100%", display: "flex", flexGrow: 1}}>
+         <Box mt={3}>
+            <Grid container alignItems="center">
+               <Grid item xs={12} justifyContent="center">
+                  <Box width="100%" height="80%" py={2} pr={2} pl={2}>
+                     {useMemo(
+                        () => (
+                           <Pie data={data} options={options} getElementsAtEvent={handleClick} />
+                        ),
+                        [chartData]
+                     )}
                   </Box>
-               )
-            }
+                  {
+                     ! chartData && (
+                        <Box sx={{
+                           position: "absolute",
+                           top: "40%",
+                           left: "50%",
+                           transform: "translate(-50%, -50%)",
+                           display: "flex",
+                           justifyContent: "center"}}>
+                           <Skeleton sx={{width: "150px", height: "150px"}} variant="circular"/>
+                        </Box>
+                     )
+                  }
+               </Grid>
+            </Grid>
+            <Divider />
             {
                description && (
-                  <>
-                     <Divider />
-                     <Box display="flex" flexDirection={{xs: "column", sm: "row"}} mt="auto">
-                        <MDTypography variant="button" color="text" fontWeight="light">
-                           {parse(description)}
-                        </MDTypography>
-                     </Box>
-                  </>
+                  <Grid container>
+                     <Grid item xs={12}>
+                        <Box pb={2} px={2} display="flex" flexDirection={{xs: "column", sm: "row"}} mt="auto">
+                           <MDTypography variant="button" color="text" fontWeight="light">
+                              {parse(description)}
+                           </MDTypography>
+                        </Box>
+                     </Grid>
+                  </Grid>
                )
             }
          </Box>

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

@@ -30,16 +30,10 @@ function configs(labels: any, datasets: any)
    if (datasets.backgroundColors)
    {
       datasets.backgroundColors.forEach((color: string) =>
-      {
-         if (gradients[color])
-         {
-            backgroundColors.push(gradients[color].state);
-         }
-         else
-         {
-            backgroundColors.push(color);
-         }
-      });
+         gradients[color]
+            ? backgroundColors.push(gradients[color].state)
+            : backgroundColors.push(dark.main)
+      );
    }
    else
    {
@@ -64,49 +58,12 @@ function configs(labels: any, datasets: any)
          ],
       },
       options: {
-         maintainAspectRatio: false,
+         maintainAspectRatio: true,
          responsive: true,
+         aspectRatio: 2,
          plugins: {
-            tooltip: {
-               callbacks: {
-                  label: function(context: any)
-                  {
-                     let percentSuffix = "";
-                     try
-                     {
-                        //////////////////////////////////////////////////////////////////////////
-                        // make percent by dividing this slice's value by the sum of all values //
-                        //////////////////////////////////////////////////////////////////////////
-                        const thisSlice = context.dataset.data[context.dataIndex];
-                        const sum = context.dataset.data.reduce((acc: number, val: number) => acc + val, 0);
-                        percentSuffix = " (" + Number(100 * thisSlice / sum).toFixed(1) + "%)";
-                     }
-                     catch(e)
-                     {
-                        // leave percentSuffix empty
-                     }
-
-                     ////////////////////////////////////////////////////////////////////////////////
-                     // our labels already have the value in them - so just use the label in the   //
-                     // tooltip (lib by default puts label + value, so we were duplicating value!) //
-                     // oh, and we add percent if we can                                           //
-                     ////////////////////////////////////////////////////////////////////////////////
-                     return context.label + percentSuffix;
-                  }
-               }
-            },
             legend: {
                position: "bottom",
-               labels: {
-                  usePointStyle: true,
-                  pointStyle: "circle",
-                  padding: 12,
-                  boxHeight: 8,
-                  boxWidth: 8,
-                  font: {
-                     size: 14
-                  }
-               }
             },
          },
          scales: {

src/qqq/components/widgets/components/ChartSubheaderWithData.tsx

@@ -1,105 +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 {Skeleton} from "@mui/material";
-import Box from "@mui/material/Box";
-import Icon from "@mui/material/Icon";
-import Typography from "@mui/material/Typography";
-import React from "react";
-import {Link} from "react-router-dom";
-import colors from "qqq/assets/theme/base/colors";
-import ValueUtils from "qqq/utils/qqq/ValueUtils";
-
-export interface ChartSubheaderData
-{
-   mainNumber: number;
-   vsPreviousPercent: number;
-   vsPreviousNumber: number;
-   isUpVsPrevious: boolean;
-   isGoodVsPrevious: boolean;
-   vsDescription: string;
-   mainNumberUrl: string;
-   previousNumberUrl: string;
-}
-
-interface Props
-{
-   chartSubheaderData: ChartSubheaderData;
-}
-
-const GOOD_COLOR = colors.success.main;
-const BAD_COLOR = colors.error.main;
-const UP_ICON = "arrow_drop_up";
-const DOWN_ICON = "arrow_drop_down";
-
-function StackedBarChart({chartSubheaderData}: Props): JSX.Element
-{
-   let color = "black";
-   if (chartSubheaderData && chartSubheaderData.isGoodVsPrevious != null)
-   {
-      color = chartSubheaderData.isGoodVsPrevious ? GOOD_COLOR : BAD_COLOR;
-   }
-
-   let iconName: string = null;
-   if (chartSubheaderData && chartSubheaderData.isUpVsPrevious != null)
-   {
-      iconName = chartSubheaderData.isUpVsPrevious ? UP_ICON : DOWN_ICON;
-   }
-
-   let mainNumberElement = <Typography variant="h3" display="inline">{ValueUtils.getFormattedNumber(chartSubheaderData.mainNumber)}</Typography>;
-   if(chartSubheaderData.mainNumberUrl)
-   {
-      mainNumberElement = <Link to={chartSubheaderData.mainNumberUrl}>{mainNumberElement}</Link>
-   }
-   mainNumberElement = <Box pr={1}>{mainNumberElement}</Box>
-
-   let previousNumberElement = (
-      <>
-         <Typography display="block" variant="body2" sx={{color: colors.gray.main, fontSize: ".875rem", fontWeight: 500}}>
-            &nbsp;{chartSubheaderData.vsDescription}
-            {chartSubheaderData.vsPreviousNumber && (<>&nbsp;({ValueUtils.getFormattedNumber(chartSubheaderData.vsPreviousNumber)})</>)}
-         </Typography>
-      </>
-   )
-
-   if(chartSubheaderData.previousNumberUrl)
-   {
-      previousNumberElement = <Link to={chartSubheaderData.previousNumberUrl}>{previousNumberElement}</Link>
-   }
-
-   return chartSubheaderData ? (
-      <Box display="inline-flex" alignItems="flex-end" flexWrap="wrap">
-         {mainNumberElement}
-         {
-            chartSubheaderData.vsPreviousPercent != null && iconName != null && (
-               <Box display="inline-flex" alignItems="baseline" pb={0.5} ml={-0.5}>
-                  <Icon fontSize="medium" sx={{color: color, alignSelf: "flex-end"}}>{iconName}</Icon>
-                  <Typography display="inline" variant="body2" sx={{color: color, fontSize: ".875rem", fontWeight: 500}}>{chartSubheaderData.vsPreviousPercent}%</Typography>
-                  {previousNumberElement}
-               </Box>
-            )
-         }
-      </Box>
-   ) : <Skeleton sx={{marginLeft: "20px", marginRight: "20px", height: "12px"}} />;
-}
-
-export default StackedBarChart;

src/qqq/components/widgets/components/DropdownMenu.tsx

@@ -0,0 +1,179 @@
+/*
+ * 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 {Collapse, Theme} from "@mui/material";
+import Autocomplete from "@mui/material/Autocomplete";
+import Box from "@mui/material/Box";
+import TextField from "@mui/material/TextField";
+import {SxProps} from "@mui/system";
+import {Field, Form, Formik} from "formik";
+import React, {useState} from "react";
+import MDInput from "qqq/components/legacy/MDInput";
+import FilterUtils from "qqq/utils/qqq/FilterUtils";
+import ValueUtils from "qqq/utils/qqq/ValueUtils";
+
+
+export interface DropdownOption
+{
+   id: string;
+   label: string;
+}
+
+/////////////////////////
+// inputs and defaults //
+/////////////////////////
+interface Props
+{
+   name: string;
+   defaultValue?: any;
+   label?: string;
+   dropdownOptions?: DropdownOption[];
+   onChangeCallback?: (dropdownLabel: string, data: any) => void;
+   sx?: SxProps<Theme>;
+}
+
+interface StartAndEndDate
+{
+   startDate?: string,
+   endDate?: string
+}
+
+function parseCustomTimeValuesFromDefaultValue(defaultValue: any): StartAndEndDate
+{
+   const customTimeValues: StartAndEndDate = {};
+   if(defaultValue && defaultValue.id)
+   {
+      var parts = defaultValue.id.split(",");
+      if(parts.length >= 2)
+      {
+         customTimeValues["startDate"] = ValueUtils.formatDateTimeValueForForm(parts[1]);
+      }
+      if(parts.length >= 3)
+      {
+         customTimeValues["endDate"] = ValueUtils.formatDateTimeValueForForm(parts[2]);
+      }
+   }
+
+   return (customTimeValues);
+}
+
+function makeBackendValuesFromFrontendValues(frontendDefaultValues: StartAndEndDate): StartAndEndDate
+{
+   const backendTimeValues: StartAndEndDate = {};
+   if(frontendDefaultValues && frontendDefaultValues.startDate)
+   {
+      backendTimeValues.startDate = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(frontendDefaultValues.startDate);
+   }
+   if(frontendDefaultValues && frontendDefaultValues.endDate)
+   {
+      backendTimeValues.endDate = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(frontendDefaultValues.endDate);
+   }
+   return (backendTimeValues);
+}
+
+function DropdownMenu({name, defaultValue, label, dropdownOptions, onChangeCallback, sx}: Props): JSX.Element
+{
+   const [customTimesVisible, setCustomTimesVisible] = useState(defaultValue && defaultValue.id && defaultValue.id.startsWith("custom,"));
+   const [customTimeValuesFrontend, setCustomTimeValuesFrontend] = useState(parseCustomTimeValuesFromDefaultValue(defaultValue) as StartAndEndDate);
+   const [customTimeValuesBackend, setCustomTimeValuesBackend] = useState(makeBackendValuesFromFrontendValues(customTimeValuesFrontend) as StartAndEndDate);
+   const [debounceTimeout, setDebounceTimeout] = useState(null as any);
+
+   const handleOnChange = (event: any, newValue: any, reason: string) =>
+   {
+      const isTimeframeCustom = name == "timeframe" && newValue && newValue.id == "custom"
+      setCustomTimesVisible(isTimeframeCustom);
+
+      if(isTimeframeCustom)
+      {
+         callOnChangeCallbackIfCustomTimeframeHasDateValues();
+      }
+      else
+      {
+         onChangeCallback(label, newValue);
+      }
+   };
+
+   const callOnChangeCallbackIfCustomTimeframeHasDateValues = () =>
+   {
+      if(customTimeValuesBackend["startDate"] && customTimeValuesBackend["endDate"])
+      {
+         onChangeCallback(label, {id: `custom,${customTimeValuesBackend["startDate"]},${customTimeValuesBackend["endDate"]}`, label: "Custom"});
+      }
+   }
+
+   let customTimes = <></>;
+   if (name == "timeframe")
+   {
+      const handleSubmit = async (values: any, actions: any) =>
+      {
+      };
+
+      const dateChanged = (fieldName: "startDate" | "endDate", event: any) =>
+      {
+         customTimeValuesFrontend[fieldName] = event.target.value;
+         customTimeValuesBackend[fieldName] = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(event.target.value);
+
+         clearTimeout(debounceTimeout);
+         const newDebounceTimeout = setTimeout(() =>
+         {
+            callOnChangeCallbackIfCustomTimeframeHasDateValues();
+         }, 500);
+         setDebounceTimeout(newDebounceTimeout);
+      };
+
+      customTimes = <Box sx={{display: "inline-block", position: "relative", top: "-7px"}}>
+         <Collapse orientation="horizontal" in={customTimesVisible}>
+            <Formik initialValues={customTimeValuesFrontend} onSubmit={handleSubmit}>
+               {({}) => (
+                  <Form id="timeframe-form" autoComplete="off">
+                     <Field name="startDate" type="datetime-local" as={MDInput} variant="standard" label="Custom Timeframe Start" InputLabelProps={{shrink: true}} InputProps={{size: "small"}} sx={{ml: 2, width: 198}} onChange={(event: any) => dateChanged("startDate", event)} />
+                     <Field name="endDate" type="datetime-local" as={MDInput} variant="standard" label="Custom Timeframe End" InputLabelProps={{shrink: true}} InputProps={{size: "small"}} sx={{ml: 2, width: 198}} onChange={(event: any) => dateChanged("endDate", event)} />
+                  </Form>
+               )}
+            </Formik>
+         </Collapse>
+      </Box>;
+   }
+
+   return (
+      dropdownOptions ? (
+         <span style={{whiteSpace: "nowrap", display: "flex"}} className="dashboardDropdownMenu">
+            <Autocomplete
+               defaultValue={defaultValue}
+               size="small"
+               disablePortal
+               id={`${label}-combo-box`}
+               options={dropdownOptions}
+               sx={{...sx, cursor: "pointer", display: "inline-block"}}
+               onChange={handleOnChange}
+               isOptionEqualToValue={(option, value) => option.id === value.id}
+               renderInput={(params: any) => <TextField {...params} label={label} />}
+               renderOption={(props, option: DropdownOption) => (
+                  <li {...props} style={{whiteSpace: "normal"}}>{option.label}</li>
+               )}
+            />
+            {customTimes}
+         </span>
+      ) : null
+   );
+}
+
+export default DropdownMenu;

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

@@ -1,335 +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 {Collapse, Theme, InputAdornment} from "@mui/material";
-import Autocomplete from "@mui/material/Autocomplete";
-import Box from "@mui/material/Box";
-import Icon from "@mui/material/Icon";
-import IconButton from "@mui/material/IconButton";
-import TextField from "@mui/material/TextField";
-import {SxProps} from "@mui/system";
-import {Field, Form, Formik} from "formik";
-import React, {useState} from "react";
-import colors from "qqq/assets/theme/base/colors";
-import MDInput from "qqq/components/legacy/MDInput";
-import ValueUtils from "qqq/utils/qqq/ValueUtils";
-
-
-export interface DropdownOption
-{
-   id: string;
-   label: string;
-}
-
-/////////////////////////
-// inputs and defaults //
-/////////////////////////
-interface Props
-{
-   name: string;
-   defaultValue?: any;
-   label?: string;
-   startIcon?: string;
-   width?: number;
-   disableClearable?: boolean;
-   allowBackAndForth?: boolean;
-   backAndForthInverted?: boolean;
-   dropdownOptions?: DropdownOption[];
-   onChangeCallback?: (dropdownLabel: string, data: any) => void;
-   sx?: SxProps<Theme>;
-}
-
-interface StartAndEndDate
-{
-   startDate?: string,
-   endDate?: string
-}
-
-function parseCustomTimeValuesFromDefaultValue(defaultValue: any): StartAndEndDate
-{
-   const customTimeValues: StartAndEndDate = {};
-   if (defaultValue && defaultValue.id)
-   {
-      var parts = defaultValue.id.split(",");
-      if (parts.length >= 2)
-      {
-         customTimeValues["startDate"] = ValueUtils.formatDateTimeValueForForm(parts[1]);
-      }
-      if (parts.length >= 3)
-      {
-         customTimeValues["endDate"] = ValueUtils.formatDateTimeValueForForm(parts[2]);
-      }
-   }
-
-   return (customTimeValues);
-}
-
-function makeBackendValuesFromFrontendValues(frontendDefaultValues: StartAndEndDate): StartAndEndDate
-{
-   const backendTimeValues: StartAndEndDate = {};
-   if (frontendDefaultValues && frontendDefaultValues.startDate)
-   {
-      backendTimeValues.startDate = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(frontendDefaultValues.startDate);
-   }
-   if (frontendDefaultValues && frontendDefaultValues.endDate)
-   {
-      backendTimeValues.endDate = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(frontendDefaultValues.endDate);
-   }
-   return (backendTimeValues);
-}
-
-function WidgetDropdownMenu({name, defaultValue, label, startIcon, width, disableClearable, allowBackAndForth, backAndForthInverted, dropdownOptions, onChangeCallback, sx}: Props): JSX.Element
-{
-   const [customTimesVisible, setCustomTimesVisible] = useState(defaultValue && defaultValue.id && defaultValue.id.startsWith("custom,"));
-   const [customTimeValuesFrontend, setCustomTimeValuesFrontend] = useState(parseCustomTimeValuesFromDefaultValue(defaultValue) as StartAndEndDate);
-   const [customTimeValuesBackend, setCustomTimeValuesBackend] = useState(makeBackendValuesFromFrontendValues(customTimeValuesFrontend) as StartAndEndDate);
-   const [debounceTimeout, setDebounceTimeout] = useState(null as any);
-
-   const [isOpen, setIsOpen] = useState(false);
-   const [value, setValue] = useState(defaultValue);
-   const [inputValue, setInputValue] = useState("");
-
-   const [backDisabled, setBackDisabled] = useState(false);
-   const [forthDisabled, setForthDisabled] = useState(false);
-
-   const doForceOpen = (event: React.MouseEvent<HTMLDivElement>) =>
-   {
-      setIsOpen(true);
-   };
-
-   function getSelectedIndex(value: DropdownOption)
-   {
-      let currentIndex = null;
-      for (let i = 0; i < dropdownOptions.length; i++)
-      {
-         if (value && dropdownOptions[i].id == value.id)
-         {
-            currentIndex = i;
-            break;
-         }
-      }
-      return currentIndex;
-   }
-
-   const navigateBackAndForth = (event: React.MouseEvent, direction: -1 | 1) =>
-   {
-      event.stopPropagation();
-      let currentIndex = getSelectedIndex(value);
-
-      if (currentIndex == null)
-      {
-         console.log("No current value.... TODO");
-         return;
-      }
-
-      if (currentIndex == 0 && direction == -1)
-      {
-         console.log("Can't go -1");
-         return;
-      }
-
-      if (currentIndex == dropdownOptions.length - 1 && direction == 1)
-      {
-         console.log("Can't go +1");
-         return;
-      }
-
-      handleOnChange(event, dropdownOptions[currentIndex + direction], "navigatedBackAndForth");
-   };
-
-
-   const handleOnChange = (event: any, newValue: any, reason: string) =>
-   {
-      setValue(newValue);
-
-      const isTimeframeCustom = name == "timeframe" && newValue && newValue.id == "custom";
-      setCustomTimesVisible(isTimeframeCustom);
-
-      if (isTimeframeCustom)
-      {
-         callOnChangeCallbackIfCustomTimeframeHasDateValues();
-      }
-      else
-      {
-         onChangeCallback(label, newValue);
-      }
-
-      /* this had bugs (seemed to not take immediate effect?), so don't use for now.
-      let currentIndex = getSelectedIndex(value);
-      if(currentIndex == 0)
-      {
-         backAndForthInverted ? setForthDisabled(true) : setBackDisabled(true);
-      }
-      else
-      {
-         backAndForthInverted ? setForthDisabled(false) : setBackDisabled(false);
-      }
-
-      if (currentIndex == dropdownOptions.length - 1)
-      {
-         backAndForthInverted ? setBackDisabled(true) : setForthDisabled(true);
-      }
-      else
-      {
-         backAndForthInverted ? setBackDisabled(false) : setForthDisabled(false);
-      }
-      */
-   };
-
-   const handleOnInputChange = (event: any, newValue: any, reason: string) =>
-   {
-      setInputValue(newValue);
-   };
-
-   const callOnChangeCallbackIfCustomTimeframeHasDateValues = () =>
-   {
-      if (customTimeValuesBackend["startDate"] && customTimeValuesBackend["endDate"])
-      {
-         onChangeCallback(label, {id: `custom,${customTimeValuesBackend["startDate"]},${customTimeValuesBackend["endDate"]}`, label: "Custom"});
-      }
-   };
-
-   let customTimes = <></>;
-   if (name == "timeframe")
-   {
-      const handleSubmit = async (values: any, actions: any) =>
-      {
-      };
-
-      const dateChanged = (fieldName: "startDate" | "endDate", event: any) =>
-      {
-         customTimeValuesFrontend[fieldName] = event.target.value;
-         customTimeValuesBackend[fieldName] = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(event.target.value);
-
-         clearTimeout(debounceTimeout);
-         const newDebounceTimeout = setTimeout(() =>
-         {
-            callOnChangeCallbackIfCustomTimeframeHasDateValues();
-         }, 500);
-         setDebounceTimeout(newDebounceTimeout);
-      };
-
-      customTimes = <Box sx={{display: "inline-block", position: "relative", top: "-7px"}}>
-         <Collapse orientation="horizontal" in={customTimesVisible}>
-            <Formik initialValues={customTimeValuesFrontend} onSubmit={handleSubmit}>
-               {({}) => (
-                  <Form id="timeframe-form" autoComplete="off">
-                     <Field name="startDate" type="datetime-local" as={MDInput} variant="standard" label="Custom Timeframe Start" InputLabelProps={{shrink: true}} InputProps={{size: "small"}} sx={{ml: 2, width: 198}} onChange={(event: any) => dateChanged("startDate", event)} />
-                     <Field name="endDate" type="datetime-local" as={MDInput} variant="standard" label="Custom Timeframe End" InputLabelProps={{shrink: true}} InputProps={{size: "small"}} sx={{ml: 2, width: 198}} onChange={(event: any) => dateChanged("endDate", event)} />
-                  </Form>
-               )}
-            </Formik>
-         </Collapse>
-      </Box>;
-   }
-
-   const startAdornment = startIcon ? <Icon sx={{fontSize: "1.25rem!important", color: colors.gray.main, paddingLeft: allowBackAndForth ? "auto" : "0.25rem", width: allowBackAndForth ? "1.5rem" : "1.75rem"}}>{startIcon}</Icon> : null;
-
-   ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-   // we tried this end-adornment, for a different style of down-arrow - but by using it, we then messed something else up (i forget what), so... not used right now //
-   ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-   const endAdornment = <InputAdornment position="end" sx={{position: "absolute", right: allowBackAndForth ? "-0.5rem" : "0.5rem"}}><Icon sx={{fontSize: "1.75rem!important", color: colors.gray.main}}>keyboard_arrow_down</Icon></InputAdornment>;
-
-   const fontSize = "1rem";
-   let optionPaddingLeftRems = 0.75;
-   if(startIcon)
-   {
-      optionPaddingLeftRems += allowBackAndForth ? 1.5 : 1.75
-   }
-   if(allowBackAndForth)
-   {
-      optionPaddingLeftRems += 2.5;
-   }
-
-   return (
-      dropdownOptions ? (
-         <Box sx={{whiteSpace: "nowrap", display: "flex",
-            "& .MuiPopperUnstyled-root": {
-               border: `1px solid ${colors.grayLines.main}`,
-               borderTop: "none",
-               borderRadius: "0 0 0.75rem 0.75rem",
-               padding: 0,
-            }, "& .MuiPaper-rounded": {
-               borderRadius: "0 0 0.75rem 0.75rem",
-            }
-         }} className="dashboardDropdownMenu">
-            <Autocomplete
-               id={`${label}-combo-box`}
-
-               defaultValue={defaultValue}
-               value={value}
-               onChange={handleOnChange}
-               inputValue={inputValue}
-               onInputChange={handleOnInputChange}
-
-               isOptionEqualToValue={(option, value) => option.id === value.id}
-
-               open={isOpen}
-               onOpen={() => setIsOpen(true)}
-               onClose={() => setIsOpen(false)}
-
-               size="small"
-               disablePortal
-               disableClearable={disableClearable}
-               options={dropdownOptions}
-               sx={{
-                  ...sx,
-                  cursor: "pointer",
-                  display: "inline-block",
-                  "& .MuiOutlinedInput-notchedOutline": {
-                     border: "none"
-                  },
-               }}
-               renderInput={(params: any) =>
-                  <>
-                     <Box sx={{width: `${width}px`, background: "white", borderRadius: isOpen ? "0.75rem 0.75rem 0 0" : "0.75rem", border: `1px solid ${colors.grayLines.main}`, "& *": {cursor: "pointer"}}} display="flex" alignItems="center" onClick={(event) => doForceOpen(event)}>
-                        {allowBackAndForth && <IconButton onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? 1 : -1)} disabled={backDisabled}><Icon>navigate_before</Icon></IconButton>}
-                        <TextField {...params} placeholder={label} sx={{
-                           "& .MuiInputBase-input": {
-                              fontSize: fontSize
-                           }
-                        }} InputProps={{...params.InputProps, startAdornment: startAdornment/*, endAdornment: endAdornment*/}}
-                        />
-                        {allowBackAndForth && <IconButton onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? -1 : 1)} disabled={forthDisabled}><Icon>navigate_next</Icon></IconButton>}
-                     </Box>
-                  </>
-               }
-               renderOption={(props, option: DropdownOption) => (
-                  <li {...props} style={{whiteSpace: "normal", fontSize: fontSize, paddingLeft: `${optionPaddingLeftRems}rem`}}>{option.label}</li>
-               )}
-
-               noOptionsText={<Box fontSize={fontSize}>No options found</Box>}
-
-               slotProps={{
-                  popper: {
-                     sx: {
-                        width: `${width}px!important`
-                     }
-                  }
-               }}
-            />
-            {customTimes}
-         </Box>
-      ) : null
-   );
-}
-
-export default WidgetDropdownMenu;

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

@@ -286,15 +286,18 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
                         <Grid container spacing={3}>
                            <Grid item xs={12}>
                               <>
-                                 <Tabs
-                                    sx={{m: 0, mb: 1, mt: -3}}
-                                    value={selectedTab}
-                                    onChange={(event, newValue) => changeTab(newValue)}
-                                    variant="standard"
-                                 >
-                                    <Tab label="Raw Data" id="simple-tab-0" aria-controls="simple-tabpanel-0" />
-                                    <Tab label="Data Preview" id="simple-tab-1" aria-controls="simple-tabpanel-1" />
-                                 </Tabs>
+                                 <Box display="flex" alignItems="center" justifyContent="space-between" gap={2} mt={-6}>
+                                    <Typography variant="h5" p={2}></Typography>
+                                    <Tabs
+                                       sx={{m: 1}}
+                                       value={selectedTab}
+                                       onChange={(event, newValue) => changeTab(newValue)}
+                                       variant="standard"
+                                    >
+                                       <Tab label="Raw Data" id="simple-tab-0" aria-controls="simple-tabpanel-0" sx={{width: "150px"}} />
+                                       <Tab label="Data Preview" id="simple-tab-1" aria-controls="simple-tabpanel-1" sx={{width: "150px"}} />
+                                    </Tabs>
+                                 </Box>
 
                                  <TabPanel index={0} value={selectedTab}>
                                     <Grid container>

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

@@ -22,15 +22,10 @@
 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 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 {DataGridPro, GridCallbackDetails, GridEventListener, GridFilterModel, gridPreferencePanelStateSelector, GridRowParams, GridSelectionModel, GridToolbarColumnsButton, GridToolbarContainer, GridToolbarDensitySelector, GridToolbarExportContainer, GridToolbarFilterButton, MuiEvent, useGridApiContext, useGridApiEventHandler, useGridSelector} from "@mui/x-data-grid-pro";
-import React, {useEffect, useRef, useState} from "react";
-import {useNavigate, Link} from "react-router-dom";
-import Widget, {AddNewRecordButton, LabelComponent} from "qqq/components/widgets/Widget";
+import {DataGridPro, GridCallbackDetails, GridRowParams, MuiEvent} from "@mui/x-data-grid-pro";
+import React, {useEffect, useState} from "react";
+import {useNavigate} from "react-router-dom";
+import Widget, {AddNewRecordButton, ExportDataButton, HeaderLink, LabelComponent} from "qqq/components/widgets/Widget";
 import DataGridUtils from "qqq/utils/DataGridUtils";
 import HtmlUtils from "qqq/utils/HtmlUtils";
 import Client from "qqq/utils/qqq/Client";
@@ -48,15 +43,10 @@ const qController = Client.getInstance();
 
 function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
 {
-   const instance = useRef({timer: null});
    const [rows, setRows] = useState([]);
    const [records, setRecords] = useState([] as QRecord[])
    const [columns, setColumns] = useState([]);
    const [allColumns, setAllColumns] = useState([])
-   const [csv, setCsv] = useState(null as string);
-   const [fileName, setFileName] = useState(null as string);
-   const [gridMouseDownX, setGridMouseDownX] = useState(0);
-   const [gridMouseDownY, setGridMouseDownY] = useState(0);
    const navigate = useNavigate();
 
    useEffect(() =>
@@ -85,7 +75,6 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
          /////////////////////////////////////////////////////////////////////////////////////////////////////////////
          // capture all-columns to use for the export (before we might splice some away from the on-screen display) //
          /////////////////////////////////////////////////////////////////////////////////////////////////////////////
-         const allColumns = [... columns];
          setAllColumns(JSON.parse(JSON.stringify(columns)));
 
          ////////////////////////////////////////////////////////////////
@@ -106,42 +95,39 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
          setRows(rows);
          setRecords(records)
          setColumns(columns);
-
-         let csv = "";
-         for (let i = 0; i < allColumns.length; i++)
-         {
-            csv += `${i > 0 ? "," : ""}"${ValueUtils.cleanForCsv(allColumns[i].headerName)}"`
-         }
-         csv += "\n";
-
-         for (let i = 0; i < records.length; i++)
-         {
-            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)}"`
-            }
-            csv += "\n";
-         }
-
-         const fileName = (data?.label ?? widgetMetaData.label) + " " + ValueUtils.formatDateTimeForFileName(new Date()) + ".csv";
-
-         setCsv(csv);
-         setFileName(fileName);
       }
    }, [data]);
 
+   const exportCallback = () =>
+   {
+      let csv = "";
+      for (let i = 0; i < allColumns.length; i++)
+      {
+         csv += `${i > 0 ? "," : ""}"${ValueUtils.cleanForCsv(allColumns[i].headerName)}"`
+      }
+      csv += "\n";
+
+      for (let i = 0; i < records.length; i++)
+      {
+         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)}"`
+         }
+         csv += "\n";
+      }
+
+      const fileName = (data?.label ?? widgetMetaData.label) + " " + ValueUtils.formatDateTimeForFileName(new Date()) + ".csv";
+      HtmlUtils.download(fileName, csv);
+   }
+
    ///////////////////
    // view all link //
    ///////////////////
-   const labelAdditionalElementsLeft: JSX.Element[] = [];
+   const labelAdditionalComponentsLeft: LabelComponent[] = []
    if(data && data.viewAllLink)
    {
-      labelAdditionalElementsLeft.push(
-         <Typography variant="body2" p={2} display="inline" fontSize=".875rem" pt="0" position="relative">
-            <Link to={data.viewAllLink}>View All</Link>
-         </Typography>
-      )
+      labelAdditionalComponentsLeft.push(new HeaderLink("View All", data.viewAllLink));
    }
 
    ///////////////////
@@ -163,26 +149,7 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
       }
    }
 
-   const onExportClick = () =>
-   {
-      if(csv)
-      {
-         HtmlUtils.download(fileName, csv);
-      }
-      else
-      {
-         alert("There is no data available to export.")
-      }
-   }
-
-   if(widgetMetaData?.showExportButton)
-   {
-      labelAdditionalElementsLeft.push(
-         <Typography key={1} variant="body2" py={2} px={0} display="inline" position="relative">
-            <Tooltip title={tooltipTitle}><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={isExportDisabled}><Icon sx={{color: "#757575", fontSize: 1.25}}>save_alt</Icon></Button></Tooltip>
-         </Typography>
-      );
-   }
+   labelAdditionalComponentsLeft.push(new ExportDataButton(() => exportCallback(), isExportDisabled, tooltipTitle))
 
    ////////////////////
    // add new button //
@@ -199,102 +166,61 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
    }
 
 
-   /////////////////////////////////////////////////////////////////
-   // if a grid preference window is open, ignore and reset timer //
-   /////////////////////////////////////////////////////////////////
    const handleRowClick = (params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) =>
    {
       (async () =>
       {
          const qInstance = await qController.loadMetaData()
-         let tablePath = qInstance.getTablePathByName(data.childTableMetaData.name)
+         const tablePath = qInstance.getTablePathByName(data.childTableMetaData.name)
          if(tablePath)
          {
-            tablePath = `${tablePath}/${params.id}`;
-            DataGridUtils.handleRowClick(tablePath, event, gridMouseDownX, gridMouseDownY, navigate, instance);
+            navigate(`${tablePath}/${params.id}`);
          }
       })();
    };
 
-   /*******************************************************************************
-    ** So that we can useGridApiContext to add event handlers for mouse down and
-    ** row double-click (to make it so you don't accidentally click into records),
-    ** we have to define a grid component, so even though we don't want a custom
-    ** toolbar, that's why we have this (and why it returns empty)
-    *******************************************************************************/
-   function CustomToolbar()
-   {
-      const handleMouseDown: GridEventListener<"cellMouseDown"> = ( params, event, details ) =>
-      {
-         setGridMouseDownX(event.clientX);
-         setGridMouseDownY(event.clientY);
-         clearTimeout(instance.current.timer);
-      };
-
-      const handleDoubleClick: GridEventListener<"rowDoubleClick"> = (event: any) =>
-      {
-         clearTimeout(instance.current.timer);
-      };
-
-      const apiRef = useGridApiContext();
-      useGridApiEventHandler(apiRef, "cellMouseDown", handleMouseDown);
-      useGridApiEventHandler(apiRef, "rowDoubleClick", handleDoubleClick);
-
-      return (<GridToolbarContainer />);
-   }
-
 
    return (
       <Widget
          widgetMetaData={widgetMetaData}
          widgetData={data}
-         labelAdditionalElementsLeft={labelAdditionalElementsLeft}
+         labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
          labelAdditionalComponentsRight={labelAdditionalComponentsRight}
-         labelBoxAdditionalSx={{position: "relative", top: "-0.375rem"}}
       >
-         <Box mx={-2} mb={-3}>
-            <DataGridPro
-               autoHeight
-               sx={{
-                  borderBottom: "none",
-                  borderLeft: "none",
-                  borderRight: "none"
-               }}
-               rows={rows}
-               disableSelectionOnClick
-               columns={columns}
-               rowBuffer={10}
-               getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd")}
-               onRowClick={handleRowClick}
-               // getRowHeight={() => "auto"} // maybe nice?  wraps values in cells...
-               components={{
-                  Toolbar: CustomToolbar
-               }}
-               // pinnedColumns={pinnedColumns}
-               // onPinnedColumnsChange={handlePinnedColumnsChange}
-               // pagination
-               // paginationMode="server"
-               // rowsPerPageOptions={[20]}
-               // sortingMode="server"
-               // filterMode="server"
-               // page={pageNumber}
-               // checkboxSelection
-               rowCount={data && data.totalRows}
-               // onPageSizeChange={handleRowsPerPageChange}
-               // onStateChange={handleStateChange}
-               // density={density}
-               // loading={loading}
-               // filterModel={filterModel}
-               // onFilterModelChange={handleFilterChange}
-               // columnVisibilityModel={columnVisibilityModel}
-               // onColumnVisibilityModelChange={handleColumnVisibilityChange}
-               // onColumnOrderChange={handleColumnOrderChange}
-               // onSelectionModelChange={selectionChanged}
-               // onSortModelChange={handleSortChange}
-               // sortingOrder={[ "asc", "desc" ]}
-               // sortModel={columnSortModel}
-            />
-         </Box>
+         <DataGridPro
+            autoHeight
+            rows={rows}
+            disableSelectionOnClick
+            columns={columns}
+            rowBuffer={10}
+            getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd")}
+            onRowClick={handleRowClick}
+            // getRowHeight={() => "auto"} // maybe nice?  wraps values in cells...
+            // components={{Toolbar: CustomToolbar, Pagination: CustomPagination, LoadingOverlay: Loading}}
+            // 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}
+         />
       </Widget>
    );
 }

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

@@ -392,8 +392,14 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
       return JSON.stringify(new QQueryFilter([new QFilterCriteria("scriptRevisionId", QCriteriaOperator.EQUALS, [scriptRevisionId])]));
    }
 
+   /*
+    position: relative;
+    left: -356px;
+    width: calc(100% + 380px);
+   */
+
    return (
-      <Grid container className="scriptViewer" m={-2} pt={4} width={"calc(100% + 2rem)"}>
+      <Grid container className="scriptViewer">
          <Grid item xs={12}>
             <Box>
                {
@@ -424,17 +430,20 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
                         <Grid container spacing={3}>
                            <Grid item xs={12}>
                               <>
-                                 <Tabs
-                                    sx={{m: 0, mb: 1, mt: -3}}
-                                    value={selectedTab}
-                                    onChange={(event, newValue) => changeTab(newValue)}
-                                    variant="standard"
-                                 >
-                                    <Tab label="Code" id="simple-tab-0" aria-controls="simple-tabpanel-0" />
-                                    <Tab label="Logs" id="simple-tab-1" aria-controls="simple-tabpanel-1" />
-                                    <Tab label="Test" id="simple-tab-1" aria-controls="simple-tabpanel-2" />
-                                    <Tab label="Docs" id="simple-tab-1" aria-controls="simple-tabpanel-3" />
-                                 </Tabs>
+                                 <Box display="flex" alignItems="center" justifyContent="space-between" gap={2} mt={-6}>
+                                    <Typography variant="h5" p={2}></Typography>
+                                    <Tabs
+                                       sx={{m: 1}}
+                                       value={selectedTab}
+                                       onChange={(event, newValue) => changeTab(newValue)}
+                                       variant="standard"
+                                    >
+                                       <Tab label="Code" id="simple-tab-0" aria-controls="simple-tabpanel-0" sx={{width: "100px"}} />
+                                       <Tab label="Logs" id="simple-tab-1" aria-controls="simple-tabpanel-1" sx={{width: "100px"}} />
+                                       <Tab label="Test" id="simple-tab-1" aria-controls="simple-tabpanel-2" sx={{width: "100px"}} />
+                                       <Tab label="Docs" id="simple-tab-1" aria-controls="simple-tabpanel-3" sx={{width: "100px"}} />
+                                    </Tabs>
+                                 </Box>
 
                                  <TabPanel index={0} value={selectedTab}>
                                     <Grid container>
@@ -489,7 +498,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
                                                       editorProps={{$blockScrolling: true}}
                                                       setOptions={{useWorker: false}}
                                                       width="100%"
-                                                      height="400px"
+                                                      height="368px"
                                                       value={getSelectedFileCode()}
                                                       style={{borderTop: "1px solid lightgray", borderBottomRightRadius: "1rem"}}
                                                    />

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

@@ -30,8 +30,7 @@ import TableRow from "@mui/material/TableRow";
 import Tooltip from "@mui/material/Tooltip";
 import parse from "html-react-parser";
 import {useEffect, useMemo, useState} from "react";
-import {useAsyncDebounce, useGlobalFilter, usePagination, useSortBy, useTable, useExpanded} from "react-table";
-import colors from "qqq/assets/theme/base/colors";
+import {useAsyncDebounce, useGlobalFilter, usePagination, useSortBy, useTable} from "react-table";
 import MDInput from "qqq/components/legacy/MDInput";
 import MDPagination from "qqq/components/legacy/MDPagination";
 import MDTypography from "qqq/components/legacy/MDTypography";
@@ -48,8 +47,6 @@ interface Props
    canSearch?: boolean;
    showTotalEntries?: boolean;
    hidePaginationDropdown?: boolean;
-   fixedStickyLastRow?: boolean;
-   fixedHeight?: number;
    table: TableDataInput;
    pagination?: {
       variant: "contained" | "gradient";
@@ -59,18 +56,6 @@ interface Props
    noEndBorder?: boolean;
 }
 
-DataTable.defaultProps = {
-   entriesPerPage: 10,
-   entriesPerPageOptions: ["5", "10", "15", "20", "25"],
-   canSearch: false,
-   showTotalEntries: true,
-   fixedStickyLastRow: false,
-   fixedHeight: null,
-   pagination: {variant: "gradient", color: "info"},
-   isSorted: true,
-   noEndBorder: false,
-};
-
 const NoMaxWidthTooltip = styled(({className, ...props}: TooltipProps) => (
    <Tooltip {...props} classes={{popper: className}} />
 ))({
@@ -86,8 +71,6 @@ function DataTable({
    hidePaginationDropdown,
    canSearch,
    showTotalEntries,
-   fixedStickyLastRow,
-   fixedHeight,
    table,
    pagination,
    isSorted,
@@ -100,77 +83,8 @@ function DataTable({
    defaultValue = (entriesPerPage) ? entriesPerPage : "10";
    entries = entriesPerPageOptions ? entriesPerPageOptions : ["10", "25", "50", "100"];
 
-   let widths = [];
-   for(let i = 0; i<table.columns.length; i++)
-   {
-      const column = table.columns[i];
-      if(column.type !== "hidden")
-      {
-         widths.push(table.columns[i].width ?? "1fr");
-      }
-   }
-
-   let showExpandColumn = false;
-   if(table.rows)
-   {
-      for (let i = 0; i < table.rows.length; i++)
-      {
-         if (table.rows[i].subRows)
-         {
-            showExpandColumn = true;
-            break;
-         }
-      }
-   }
-
-   const columnsToMemo = [...table.columns];
-   if(showExpandColumn)
-   {
-      widths.push("60px");
-      columnsToMemo.push(
-         {
-            ///////////////////////////////
-            // Build our expander column //
-            ///////////////////////////////
-            id: "__expander",
-            width: 60,
-
-            ////////////////////////////////////////////////
-            // use this block if we want to do expand-all //
-            ////////////////////////////////////////////////
-            // @ts-ignore
-            // header: ({getToggleAllRowsExpandedProps, isAllRowsExpanded}) => (
-            //    <span {...getToggleAllRowsExpandedProps()}>
-            //       {isAllRowsExpanded ? "yes" : "no"}
-            //    </span>
-            // ),
-            header: () => (<span />),
-
-            // @ts-ignore
-            cell: ({row}) =>
-               /////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-               // Use the row.canExpand and row.getToggleRowExpandedProps prop getter to build the toggle for expanding a row //
-               /////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-               row.canExpand ? (
-                  <span
-                     {...row.getToggleRowExpandedProps({
-                        //////////////////////////////////////////////////////////////////////////////////////////
-                        // We could use the row.depth property and paddingLeft to indicate the depth of the row //
-                        //////////////////////////////////////////////////////////////////////////////////////////
-                        // style: {paddingLeft: `${row.depth * 2}rem`,},
-                     })}
-                  >
-                     {/* 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_right"}</Icon>
-                  </span>
-               ) : null,
-         },
-      );
-   }
-
-   const columns = useMemo<any>(() => columnsToMemo, [table]);
+   const columns = useMemo<any>(() => table.columns, [table]);
    const data = useMemo<any>(() => table.rows, [table]);
-   const gridTemplateColumns = widths.join(" ");
 
    if (!columns || !data)
    {
@@ -181,7 +95,6 @@ function DataTable({
       {columns, data, initialState: {pageIndex: 0}},
       useGlobalFilter,
       useSortBy,
-      useExpanded,
       usePagination
    );
 
@@ -200,7 +113,7 @@ function DataTable({
       previousPage,
       setPageSize,
       setGlobalFilter,
-      state: {pageIndex, pageSize, globalFilter, expanded},
+      state: {pageIndex, pageSize, globalFilter},
    }: any = tableInstance;
 
    // Set the default value for the entries per page when component mounts
@@ -280,131 +193,11 @@ function DataTable({
       entriesEnd = pageSize * (pageIndex + 1);
    }
 
-   function getTable(includeHead: boolean, rows: any, isFooter: boolean)
-   {
-      let boxStyle = {};
-      if(fixedStickyLastRow)
-      {
-         boxStyle = isFooter
-            ? {borderTop: `0.0625rem solid ${colors.grayLines.main};`, overflow: "auto", scrollbarGutter: "stable"}
-            : {height: fixedHeight ? `${fixedHeight}px` : "360px", overflowY: "scroll", scrollbarGutter: "stable", marginBottom: "-1px"};
-      }
-
-      return <Box sx={boxStyle}>
-         <Table {...getTableProps()}>
-            {
-               includeHead && (
-                  <Box component="thead" sx={{position: "sticky", top: 0, background: "white"}}>
-                     {headerGroups.map((headerGroup: any, i: number) => (
-                        <TableRow key={i} {...headerGroup.getHeaderGroupProps()} sx={{display: "grid", gridTemplateColumns: gridTemplateColumns}}>
-                           {headerGroup.headers.map((column: any) => (
-                              column.type !== "hidden" && (
-                                 <DataTableHeadCell
-                                    key={i++}
-                                    {...column.getHeaderProps(isSorted && column.getSortByToggleProps())}
-                                    align={column.align ? column.align : "left"}
-                                    sorted={setSortedValue(column)}
-                                 >
-                                    {column.render("header")}
-                                 </DataTableHeadCell>
-                              )
-                           ))}
-                        </TableRow>
-                     ))}
-                  </Box>
-               )
-            }
-            <TableBody {...getTableBodyProps()}>
-               {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)
-                  {
-                     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;
-                  }
-
-                  return (
-                     <TableRow sx={{verticalAlign: "top", display: "grid", gridTemplateColumns: gridTemplateColumns, background: (row.depth > 0 ? "#FAFAFA" : "initial")}} key={key} {...row.getRowProps()}>
-                        {row.cells.map((cell: any) => (
-                           cell.column.type !== "hidden" && (
-                              <DataTableBodyCell
-                                 key={key}
-                                 noBorder={noEndBorder || overrideNoEndBorder}
-                                 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 === "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>
-   }
-
    return (
       <TableContainer sx={{boxShadow: "none"}}>
-         {entriesPerPage && ((hidePaginationDropdown !== undefined && !hidePaginationDropdown) || canSearch) ? (
+         {entriesPerPage && ((hidePaginationDropdown !== undefined && ! hidePaginationDropdown) || canSearch) ? (
             <Box display="flex" justifyContent="space-between" alignItems="center" p={3}>
-               {entriesPerPage && (hidePaginationDropdown === undefined || !hidePaginationDropdown) && (
+               {entriesPerPage && (hidePaginationDropdown === undefined || ! hidePaginationDropdown) &&  (
                   <Box display="flex" alignItems="center">
                      <Autocomplete
                         disableClearable
@@ -412,7 +205,7 @@ function DataTable({
                         options={entries}
                         onChange={(event, newValues: any) =>
                         {
-                           if (typeof newValues === "string")
+                           if(typeof newValues === "string")
                            {
                               setEntriesPerPage(parseInt(newValues, 10));
                            }
@@ -447,15 +240,82 @@ function DataTable({
                )}
             </Box>
          ) : null}
+         <Table {...getTableProps()}>
+            <Box component="thead">
+               {headerGroups.map((headerGroup: any, i: number) => (
+                  <TableRow key={i} {...headerGroup.getHeaderGroupProps()}>
+                     {headerGroup.headers.map((column: any) => (
+                        column.type !== "hidden" && (
+                           <DataTableHeadCell
+                              key={i++}
+                              {...column.getHeaderProps(isSorted && column.getSortByToggleProps())}
+                              width={column.width ? column.width : "auto"}
+                              align={column.align ? column.align : "left"}
+                              sorted={setSortedValue(column)}
+                           >
+                              {column.render("header")}
+                           </DataTableHeadCell>
+                        )
+                     ))}
+                  </TableRow>
+               ))}
+            </Box>
+            <TableBody {...getTableBodyProps()}>
+               {page.map((row: any, key: any) =>
+               {
+                  prepareRow(row);
+                  return (
+                     <TableRow sx={{verticalAlign: "top"}} key={key} {...row.getRowProps()}>
+                        {row.cells.map((cell: any) => (
+                           cell.column.type !== "hidden" && (
+                              <DataTableBodyCell
+                                 key={key}
+                                 noBorder={noEndBorder && rows.length - 1 === key}
+                                 align={cell.column.align ? cell.column.align : "left"}
+                                 {...cell.getCellProps()}
+                              >
+                                 {
+                                    cell.column.type === "default" && (
+                                       cell.value && "number" === typeof cell.value ? (
+                                          <DefaultCell>{cell.value.toLocaleString()}</DefaultCell>
+                                       ) : (<DefaultCell>{cell.render("Cell")}</DefaultCell>)
+                                    )
+                                 }
+                                 {
+                                    cell.column.type === "htmlAndTooltip" && (
+                                       <DefaultCell>
 
-         {
-            fixedStickyLastRow ? (
-               <>
-                  {getTable(true, page.slice(0, page.length -1), false)}
-                  {getTable(false, page.slice(page.length-1), true)}
-               </>
-            ) : getTable(true, page, false)
-         }
+                                          <NoMaxWidthTooltip title={parse(row.values["tooltip"])}>
+                                             <Box>
+                                                {parse(cell.value)}
+                                             </Box>
+                                          </NoMaxWidthTooltip>
+                                       </DefaultCell>
+                                    )
+                                 }
+                                 {
+                                    cell.column.type === "html" && (
+                                       <DefaultCell>{parse(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"]} />
+                                    )
+                                 }
+                              </DataTableBodyCell>
+                           )
+                        ))}
+                     </TableRow>
+                  );
+               })}
+            </TableBody>
+         </Table>
 
          <Box
             display="flex"
@@ -508,4 +368,15 @@ function DataTable({
    );
 }
 
+// Declaring default props for DataTable
+DataTable.defaultProps = {
+   entriesPerPage: 10,
+   entriesPerPageOptions: ["5", "10", "15", "20", "25"],
+   canSearch: false,
+   showTotalEntries: true,
+   pagination: {variant: "gradient", color: "info"},
+   isSorted: true,
+   noEndBorder: false,
+};
+
 export default DataTable;

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

@@ -54,13 +54,11 @@ interface Props
    noRowsFoundHTML?: string;
    rowsPerPage?: number;
    hidePaginationDropdown?: boolean;
-   fixedStickyLastRow?: boolean;
-   fixedHeight?: number;
    data: TableDataInput;
 }
 
 const qController = Client.getInstance();
-function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown, fixedStickyLastRow, fixedHeight}: Props): JSX.Element
+function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown}: Props): JSX.Element
 {
    const [qInstance, setQInstance] = useState(null as QInstance);
 
@@ -74,17 +72,16 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown,
    }, []);
 
    return (
-      <Box py={1} mx={-2}>
+      <Box py={1}>
          {
             data && data.columns && !noRowsFoundHTML ?
                <DataTable
                   table={data}
                   entriesPerPage={rowsPerPage}
                   hidePaginationDropdown={hidePaginationDropdown}
-                  fixedStickyLastRow={fixedStickyLastRow}
-                  fixedHeight={fixedHeight}
                   showTotalEntries={false}
                   isSorted={false}
+                  noEndBorder
                />
                : noRowsFoundHTML ?
                   <Box p={3} pt={1} pb={1} sx={{textAlign: "center"}}>
@@ -117,7 +114,7 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown,
                               <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>
+                                       <DefaultCell><Skeleton /></DefaultCell>
                                     </DataTableBodyCell>
                                  )}
                               </TableRow>

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

@@ -21,16 +21,11 @@
 
 
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import Button from "@mui/material/Button";
-import Icon from "@mui/material/Icon";
-import Tooltip from "@mui/material/Tooltip/Tooltip";
-import Typography from "@mui/material/Typography";
 // @ts-ignore
 import {htmlToText} from "html-to-text";
 import React, {useEffect, useState} from "react";
-import colors from "qqq/assets/theme/base/colors";
 import TableCard from "qqq/components/widgets/tables/TableCard";
-import Widget, {WidgetData} from "qqq/components/widgets/Widget";
+import Widget, {ExportDataButton, WidgetData} from "qqq/components/widgets/Widget";
 import HtmlUtils from "qqq/utils/HtmlUtils";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
 
@@ -48,8 +43,6 @@ TableWidget.defaultProps = {
 function TableWidget(props: Props): JSX.Element
 {
    const [isExportDisabled, setIsExportDisabled] = useState(false); // hmm, would like true here, but it broke...
-   const [csv, setCsv] = useState(null as string);
-   const [fileName, setFileName] = useState(null as string);
 
    const rows = props.widgetData?.rows;
    const columns = props.widgetData?.columns;
@@ -63,8 +56,14 @@ function TableWidget(props: Props): JSX.Element
       }
       setIsExportDisabled(isExportDisabled);
 
+   }, [props.widgetMetaData, props.widgetData]);
+
+   const exportCallback = () =>
+   {
       if (props.widgetData && rows && columns)
       {
+         console.log(props.widgetData);
+
          let csv = "";
          for (let j = 0; j < columns.length; j++)
          {
@@ -86,54 +85,29 @@ function TableWidget(props: Props): JSX.Element
                }
 
                const cell = rows[i][columns[j].accessor];
-               let text = cell;
-               if(columns[j].type != "default")
-               {
-                  text = htmlToText(cell,
-                     {
-                        selectors: [
-                           {selector: "a", format: "inline"},
-                           {selector: ".MuiIcon-root", format: "skip"},
-                           {selector: ".button", format: "skip"}
-                        ]
-                     });
-               }
+               const text = htmlToText(cell,
+                  {
+                     selectors: [
+                        {selector: "a", format: "inline"},
+                        {selector: ".MuiIcon-root", format: "skip"},
+                        {selector: ".button", format: "skip"}
+                     ]
+                  });
                csv += `"${ValueUtils.cleanForCsv(text)}"`;
             }
             csv += "\n";
          }
 
-         setCsv(csv);
+         console.log(csv);
 
          const fileName = (props.widgetData.label ?? props.widgetMetaData.label) + " " + ValueUtils.formatDateTimeForFileName(new Date()) + ".csv";
-         setFileName(fileName)
-
-         console.log(`useEffect, setting fileName ${fileName}`);
-      }
-
-   }, [props.widgetMetaData, props.widgetData]);
-
-   const onExportClick = () =>
-   {
-      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.widgetMetaData?.showExportButton)
-   {
-      labelAdditionalElementsLeft.push(
-         <Typography key={1} variant="body2" py={2} px={0} display="inline" position="relative" top="-0.25rem">
-            <Tooltip title="Export"><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={false}><Icon sx={{color: colors.gray.main, fontSize: 1.125}}>save_alt</Icon></Button></Tooltip>
-         </Typography>
-      );
-   }
+   };
 
    return (
       <Widget
@@ -142,14 +116,12 @@ function TableWidget(props: Props): JSX.Element
          reloadWidgetCallback={(data) => props.reloadWidgetCallback(data)}
          footerHTML={props.widgetData?.footerHTML}
          isChild={props.isChild}
-         labelAdditionalElementsLeft={labelAdditionalElementsLeft}
+         labelAdditionalComponentsLeft={props.widgetMetaData?.showExportButton ? [new ExportDataButton(() => exportCallback(), isExportDisabled)] : []}
       >
          <TableCard
             noRowsFoundHTML={props.widgetData?.noRowsFoundHTML}
             rowsPerPage={props.widgetData?.rowsPerPage}
             hidePaginationDropdown={props.widgetData?.hidePaginationDropdown}
-            fixedStickyLastRow={props.widgetData?.fixedStickyLastRow}
-            fixedHeight={props.widgetData?.fixedHeight}
             data={{columns: props.widgetData?.columns, rows: props.widgetData?.rows}}
          />
       </Widget>

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

@@ -22,7 +22,6 @@
 import Box from "@mui/material/Box";
 import {Theme} from "@mui/material/styles";
 import {ReactNode} from "react";
-import colors from "qqq/assets/theme/base/colors";
 
 // Declaring prop types for DataTableBodyCell
 interface Props
@@ -41,26 +40,14 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
          py={1.5}
          px={3}
          sx={({palette: {light}, typography: {size}, borders: {borderWidth}}: Theme) => ({
-            borderBottom: noBorder ? "none" : `${borderWidth[1]} solid ${colors.grayLines.main}`,
-            fontSize: "0.875rem",
-            "@media (min-width: 1440px)": {
-               fontSize: "1rem"
-            },
-            "@media (max-width: 1440px)": {
-               fontSize: "0.875rem"
-            },
-            "&:nth-child(1)": {
-               paddingLeft: "1rem"
-            },
-            "&:last-child": {
-               paddingRight: "1rem"
-            }
+            fontSize: size.sm,
+            borderBottom: noBorder ? "none" : `${borderWidth[1]} solid ${light.main}`,
          })}
       >
          <Box
             display="initial"
             width="max-content"
-            color={colors.dark.main}
+            color="text"
          >
             {children}
          </Box>

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

@@ -23,7 +23,6 @@ import Box from "@mui/material/Box";
 import Icon from "@mui/material/Icon";
 import {Theme} from "@mui/material/styles";
 import {ReactNode} from "react";
-import colors from "qqq/assets/theme/base/colors";
 import {useMaterialUIController} from "qqq/context";
 
 // Declaring props types for DataTableHeadCell
@@ -47,28 +46,18 @@ function DataTableHeadCell({width, children, sorted, align, ...rest}: Props): JS
          py={1.5}
          px={3}
          sx={({palette: {light}, borders: {borderWidth}}: Theme) => ({
-            borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`,
-            "&:nth-child(1)": {
-               paddingLeft: "1rem"
-            },
-            "&:last-child": {
-               paddingRight: "1rem"
-            },
+            borderBottom: `${borderWidth[1]} solid ${light.main}`,
          })}
       >
          <Box
             {...rest}
             sx={({typography: {size, fontWeightBold}}: Theme) => ({
                position: "relative",
-               color: colors.grey[700],
+               opacity: "0.7",
                textAlign: align,
-               "@media (min-width: 1440px)": {
-                  fontSize: "1rem"
-               },
-               "@media (max-width: 1440px)": {
-                  fontSize: "0.875rem"
-               },
-               fontWeight: 600,
+               fontSize: size.xxs,
+               fontWeight: fontWeightBold,
+               textTransform: "uppercase",
                cursor: sorted && "pointer",
                userSelect: sorted && "none",
             })}

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

@@ -14,31 +14,12 @@ Coded by www.creative-tim.com
 */
 
 import {ReactNode} from "react";
-import colors from "qqq/assets/theme/base/colors";
 import MDTypography from "qqq/components/legacy/MDTypography";
 
-interface Props
-{
-   isFooter: boolean
-   children: ReactNode;
-}
-
-
-function DefaultCell({isFooter, children}: Props): JSX.Element
+function DefaultCell({children}: { children: ReactNode }): JSX.Element
 {
    return (
-      <MDTypography variant="button" color={colors.dark.main} sx={{
-         fontWeight: isFooter ? 600 : 500,
-         "@media (min-width: 1440px)": {
-            fontSize: "1rem"
-         },
-         "@media (max-width: 1440px)": {
-            fontSize: "0.875rem"
-         },
-         "& a": {
-            color: colors.blueGray.main
-         }
-      }}>
+      <MDTypography variant="button" fontWeight="regular" color="text">
          {children}
       </MDTypography>
    );

src/qqq/layouts/DashboardLayout.tsx

@@ -38,11 +38,11 @@ function DashboardLayout({children}: { children: ReactNode }): JSX.Element
    return (
       <Box
          sx={({breakpoints, transitions, functions: {pxToRem}}) => ({
-            p: "20px",
+            p: 3,
             position: "relative",
 
             [breakpoints.up("xl")]: {
-               marginLeft: miniSidenav ? pxToRem(120) : pxToRem(245),
+               marginLeft: miniSidenav ? pxToRem(120) : pxToRem(274),
                transition: transitions.create(["margin-left", "margin-right"], {
                   easing: transitions.easing.easeInOut,
                   duration: transitions.duration.standard,

src/qqq/pages/apps/Home.tsx

@@ -34,7 +34,6 @@ import Grid from "@mui/material/Grid";
 import React, {useContext, useEffect, useState} from "react";
 import {Link, useLocation} from "react-router-dom";
 import QContext from "QContext";
-import colors from "qqq/assets/theme/base/colors";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import ProcessLinkCard from "qqq/components/processes/ProcessLinkCard";
 import DashboardWidgets from "qqq/components/widgets/DashboardWidgets";
@@ -181,6 +180,9 @@ function AppHome({app}: Props): JSX.Element
       }
    }, [qInstance, location]);
 
+   const widgetCount = widgets ? widgets.length : 0;
+
+   // eslint-disable-next-line no-nested-ternary
    const tileSizeLg = 3;
 
    const hasTablePermission = (tableName: string) =>
@@ -198,66 +200,11 @@ function AppHome({app}: Props): JSX.Element
       return reports.find(r => r.name === reportName && r.hasPermission);
    };
 
-   const widgetCount = widgets ? widgets.length : 0;
-   const sectionCount = app.sections ? app.sections.length : 0;
-
-   //////////////////////////////////////////////////////////////////////////////////////////////////////
-   // if our app has no widgets or sections, but it does have child apps, then return those child apps //
-   //////////////////////////////////////////////////////////////////////////////////////////////////////
-   if(widgetCount == 0 && sectionCount == 0 && childApps && childApps.length > 0)
-   {
-      return (
-         <BaseLayout>
-            <Grid container spacing={3}>
-               <Grid item xs={12} lg={12}>
-                  <Card sx={{overflow: "visible"}}>
-                     <Box p={3} display="flex" alignItems="center" gap=".5rem">
-                        <Typography variant="h5">Apps</Typography>
-                     </Box>
-                     <Grid container spacing={3} padding={3} pt={0}>
-                        {childApps.map((childApp) => (
-                           <Grid key={childApp.name} item xs={12} lg={3}>
-                              <Link to={childApp.name}>
-                                 <Card>
-                                    <Box display="flex" alignItems="center" p={2}>
-                                       <Box
-                                          color={"#FFFFFF"}
-                                          display="flex"
-                                          justifyContent="center"
-                                          alignItems="center"
-                                          width="4rem"
-                                          height="4rem"
-                                          sx={{borderRadius: "10px", backgroundColor: colors.info.main}}
-                                       >
-                                          <Icon fontSize="medium" color="inherit">
-                                             {childApp.iconName || app.iconName}
-                                          </Icon>
-                                       </Box>
-                                       <Box textAlign="left" ml={2}>
-                                          <MDTypography variant="button" fontWeight="bold" color="text">
-                                             {childApp.label}
-                                          </MDTypography>
-                                       </Box>
-                                    </Box>
-                                 </Card>
-                              </Link>
-                           </Grid>
-                        ))}
-                     </Grid>
-                  </Card>
-               </Grid>
-            </Grid>
-         </BaseLayout>
-      )
-   }
-
    return (
       <BaseLayout>
          <Box>
-            {app.widgets && app.widgets.length > 0 && (
-               <Box pb={app.sections ? 2.375 : 0}>
-                  <DashboardWidgets widgetMetaDataList={widgets} />
-               </Box>
+            {app.widgets && (
+               <DashboardWidgets widgetMetaDataList={widgets} />
             )}
             <Grid container spacing={3}>
                {

src/qqq/pages/processes/ProcessRun.tsx

@@ -229,7 +229,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
    const download = (url: string, fileName: string) =>
    {
       /////////////////////////////////////////////////////////////////////////////////////////////
-      // todo - this could be simplified, i think?                                               //
+      // todo - this could be simplified.                                                        //
       // it was originally built like this when we had to submit full access token to backend... //
       /////////////////////////////////////////////////////////////////////////////////////////////
       let xhr = new XMLHttpRequest();
@@ -237,6 +237,12 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
       xhr.responseType = "blob";
       let formData = new FormData();
 
+      ////////////////////////////////////
+      // todo#authHeader - delete this. //
+      ////////////////////////////////////
+      const qController = Client.getInstance();
+      formData.append("Authorization", qController.getAuthorizationHeaderValue());
+
       // @ts-ignore
       xhr.send(formData);
 
@@ -323,7 +329,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
             <Grid m={3} mt={9} container>
                <Grid item xs={0} lg={3} />
                <Grid item xs={12} lg={6}>
-                  <Card>
+                  <Card elevation={5}>
                      <Box p={3}>
                         <MDTypography variant="h5" component="div">
                            Working
@@ -414,238 +420,228 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
                //////////////////////////////////////////////////
                // render all of the components for this screen //
                //////////////////////////////////////////////////
-               step.components && (step.components.map((component: QFrontendComponent, index: number) =>
-               {
-                  let helpRoles = ["PROCESS_SCREEN", "ALL_SCREENS"]
-                  if(component.type == QComponentType.BULK_EDIT_FORM)
-                  {
-                     helpRoles = ["EDIT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"]
-                  }
-
-                  return (
-                     <div key={index}>
-                        {
-                           component.type === QComponentType.HELP_TEXT && (
-                              component.values.previewText ?
-                                 <>
-                                    <Box mt={1}>
-                                       <Button onClick={toggleShowFullHelpText} startIcon={<Icon>{showFullHelpText ? "expand_less" : "expand_more"}</Icon>} sx={{pl: 1}}>
-                                          {showFullHelpText ? "Hide " : "Show "}
-                                          {component.values.previewText}
-                                       </Button>
-                                    </Box>
-                                    <Box mt={1} style={{display: showFullHelpText ? "block" : "none"}}>
-                                       <Typography variant="body2" color="info">
-                                          {ValueUtils.breakTextIntoLines(component.values.text)}
-                                       </Typography>
-                                    </Box>
-                                 </>
-                                 :
-                                 <MDTypography variant="button" color="info">
-                                    {ValueUtils.breakTextIntoLines(component.values.text)}
-                                 </MDTypography>
-                           )
-                        }
-                        {
-                           component.type === QComponentType.BULK_EDIT_FORM && (
-                              tableMetaData && localTableSections ?
-                                 <Grid container spacing={3} mt={2}>
+               step.components && (step.components.map((component: QFrontendComponent, index: number) => (
+                  <div key={index}>
+                     {
+                        component.type === QComponentType.HELP_TEXT && (
+                           component.values.previewText ?
+                              <>
+                                 <Box mt={1}>
+                                    <Button onClick={toggleShowFullHelpText} startIcon={<Icon>{showFullHelpText ? "expand_less" : "expand_more"}</Icon>} sx={{pl: 1}}>
+                                       {showFullHelpText ? "Hide " : "Show "}
+                                       {component.values.previewText}
+                                    </Button>
+                                 </Box>
+                                 <Box mt={1} style={{display: showFullHelpText ? "block" : "none"}}>
+                                    <Typography variant="body2" color="info">
+                                       {ValueUtils.breakTextIntoLines(component.values.text)}
+                                    </Typography>
+                                 </Box>
+                              </>
+                              :
+                              <MDTypography variant="button" color="info">
+                                 {ValueUtils.breakTextIntoLines(component.values.text)}
+                              </MDTypography>
+                        )
+                     }
+                     {
+                        component.type === QComponentType.BULK_EDIT_FORM && (
+                           tableMetaData && localTableSections ?
+                              <Grid container spacing={3} mt={2}>
+                                 {
+                                    localTableSections.length == 0 &&
+                                    <Grid item xs={12}>
+                                       <Alert color="error">There are no editable fields on this table.</Alert>
+                                    </Grid>
+                                 }
+                                 <Grid item xs={12} lg={3}>
                                     {
-                                       localTableSections.length == 0 &&
-                                       <Grid item xs={12}>
-                                          <Alert color="error">There are no editable fields on this table.</Alert>
-                                       </Grid>
+                                       localTableSections.length > 0 && <QRecordSidebar tableSections={localTableSections} stickyTop="20px" />
                                     }
-                                    <Grid item xs={12} lg={3}>
-                                       {
-                                          localTableSections.length > 0 && <QRecordSidebar tableSections={localTableSections} stickyTop="20px" />
-                                       }
-                                    </Grid>
-                                    <Grid item xs={12} lg={9}>
-                                       {
-                                          localTableSections.map((section: QTableSection, index: number) =>
-                                          {
-                                             const name = section.name;
-
-                                             if (section.isHidden)
-                                             {
-                                                return;
-                                             }
-
-                                             const sectionFormFields = {};
-                                             for (let i = 0; i < section.fieldNames.length; i++)
-                                             {
-                                                const fieldName = section.fieldNames[i];
-                                                if (formFields[fieldName])
-                                                {
-                                                   // @ts-ignore
-                                                   sectionFormFields[fieldName] = formFields[fieldName];
-                                                }
-                                             }
-
-                                             if (Object.keys(sectionFormFields).length > 0)
-                                             {
-                                                const sectionFormData = {
-                                                   formFields: sectionFormFields,
-                                                   values: values,
-                                                   errors: errors,
-                                                   touched: touched
-                                                };
-
-                                                return (
-                                                   <Box key={name} pb={3}>
-                                                      <Card id={name} sx={{scrollMarginTop: "20px"}} elevation={5}>
-                                                         <MDTypography variant="h5" p={3} pb={1}>
-                                                            {section.label}
-                                                         </MDTypography>
-                                                         <Box px={2}>
-                                                            <QDynamicForm formData={sectionFormData} bulkEditMode bulkEditSwitchChangeHandler={bulkEditSwitchChanged} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableMetaData?.name};`} />
-                                                         </Box>
-                                                      </Card>
-                                                   </Box>
-                                                );
-                                             }
-                                             else
-                                             {
-                                                return (<br />);
-                                             }
-                                          })
-                                       }
-                                    </Grid>
                                  </Grid>
-                                 : <QDynamicForm formData={formData} bulkEditMode bulkEditSwitchChangeHandler={bulkEditSwitchChanged} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableMetaData?.name};`} />
-                           )
-                        }
-                        {
-                           component.type === QComponentType.EDIT_FORM && (
-                              <QDynamicForm formData={formData} helpRoles={helpRoles} helpContentKeyPrefix={`process:${processName};`} />
-                           )
-                        }
-                        {
-                           component.type === QComponentType.VIEW_FORM && step.viewFields && (
-                              <div>
-                                 {step.viewFields.map((field: QFieldMetaData) => (
-                                    field.hasAdornment(AdornmentType.ERROR) ? (
-                                       processValues[field.name] && (
-                                          <Box key={field.name} display="flex" py={1} pr={2}>
-                                             <MDTypography variant="button" fontWeight="regular">
-                                                {ValueUtils.getValueForDisplay(field, processValues[field.name], undefined, "view")}
-                                             </MDTypography>
-                                          </Box>
-                                       )
-                                    ) : (
+                                 <Grid item xs={12} lg={9}>
+
+                                    {localTableSections.map((section: QTableSection, index: number) =>
+                                    {
+                                       const name = section.name;
+
+                                       if (section.isHidden)
+                                       {
+                                          return;
+                                       }
+
+                                       const sectionFormFields = {};
+                                       for (let i = 0; i < section.fieldNames.length; i++)
+                                       {
+                                          const fieldName = section.fieldNames[i];
+                                          if (formFields[fieldName])
+                                          {
+                                             // @ts-ignore
+                                             sectionFormFields[fieldName] = formFields[fieldName];
+                                          }
+                                       }
+
+                                       if (Object.keys(sectionFormFields).length > 0)
+                                       {
+                                          const sectionFormData = {
+                                             formFields: sectionFormFields,
+                                             values: values,
+                                             errors: errors,
+                                             touched: touched
+                                          };
+
+                                          return (
+                                             <Box key={name} pb={3}>
+                                                <Card id={name} sx={{scrollMarginTop: "20px"}} elevation={5}>
+                                                   <MDTypography variant="h5" p={3} pb={1}>
+                                                      {section.label}
+                                                   </MDTypography>
+                                                   <Box px={2}>
+                                                      <QDynamicForm formData={sectionFormData} bulkEditMode bulkEditSwitchChangeHandler={bulkEditSwitchChanged} />
+                                                   </Box>
+                                                </Card>
+                                             </Box>
+                                          );
+                                       }
+                                       else
+                                       {
+                                          return (<br />);
+                                       }
+                                    }
+                                    )}
+                                 </Grid>
+                              </Grid>
+                              : <QDynamicForm formData={formData} bulkEditMode bulkEditSwitchChangeHandler={bulkEditSwitchChanged} />
+                        )
+                     }
+                     {
+                        component.type === QComponentType.EDIT_FORM && (
+                           <QDynamicForm formData={formData} />
+                        )
+                     }
+                     {
+                        component.type === QComponentType.VIEW_FORM && step.viewFields && (
+                           <div>
+                              {step.viewFields.map((field: QFieldMetaData) => (
+                                 field.hasAdornment(AdornmentType.ERROR) ? (
+                                    processValues[field.name] && (
                                        <Box key={field.name} display="flex" py={1} pr={2}>
-                                          <MDTypography variant="button" fontWeight="bold">
-                                             {field.label}
-                                             : &nbsp;
-                                          </MDTypography>
-                                          <MDTypography variant="button" fontWeight="regular" color="text">
+                                          <MDTypography variant="button" fontWeight="regular">
                                              {ValueUtils.getValueForDisplay(field, processValues[field.name], undefined, "view")}
                                           </MDTypography>
                                        </Box>
-                                    )))
-                                 }
-                              </div>
-                           )
-                        }
-                        {
-                           component.type === QComponentType.DOWNLOAD_FORM && (
-                              <Grid container display="flex" justifyContent="center">
-                                 <Grid item xs={12} sm={12} xl={8} m={3} p={3} mt={6} sx={{border: "1px solid gray", borderRadius: "1rem"}}>
-                                    <Box mx={2} mt={-6} p={1} sx={{width: "fit-content", borderColor: "rgb(70%, 70%, 70%)", borderWidth: "2px", borderStyle: "solid", borderRadius: ".25em", backgroundColor: "#FFFFFF"}} width="initial" color="white">
-                                       Download
-                                    </Box>
-                                    <Box display="flex" py={1} pr={2}>
-                                       <MDTypography variant="button" fontWeight="bold" onClick={() => download(`/download/${processValues.downloadFileName}?filePath=${processValues.serverFilePath}`, processValues.downloadFileName)} sx={{cursor: "pointer"}}>
-                                          <Box display="flex" alignItems="center" gap={1} py={1} pr={2}>
-                                             <Icon fontSize="large">download_for_offline</Icon>
-                                             {processValues.downloadFileName}
-                                          </Box>
+                                    )
+                                 ) : (
+                                    <Box key={field.name} display="flex" py={1} pr={2}>
+                                       <MDTypography variant="button" fontWeight="bold">
+                                          {field.label}
+                                          : &nbsp;
+                                       </MDTypography>
+                                       <MDTypography variant="button" fontWeight="regular" color="text">
+                                          {ValueUtils.getValueForDisplay(field, processValues[field.name], undefined, "view")}
                                        </MDTypography>
                                     </Box>
-                                 </Grid>
-                              </Grid>
-                           )
-                        }
-                        {
-                           component.type === QComponentType.VALIDATION_REVIEW_SCREEN && (
-                              <ValidationReview
-                                 qInstance={qInstance}
-                                 process={processMetaData}
-                                 table={tableMetaData}
-                                 processValues={processValues}
-                                 step={step}
-                                 previewRecords={records}
-                                 formValues={formData.values}
-                                 doFullValidationRadioChangedHandler={(event: any) =>
-                                 {
-                                    const {value} = event.currentTarget;
-
-                                    //////////////////////////////////////////////////////////////
-                                    // call the formik function to set the value in this field. //
-                                    //////////////////////////////////////////////////////////////
-                                    setFieldValue("doFullValidation", value);
-
-                                    setOverrideOnLastStep(value !== "true");
-                                 }}
-                              />
-                           )
-                        }
-                        {
-                           component.type === QComponentType.PROCESS_SUMMARY_RESULTS && (
-                              <ProcessSummaryResults qInstance={qInstance} process={processMetaData} table={tableMetaData} processValues={processValues} step={step} />
-                           )
-                        }
-                        {
-                           component.type === QComponentType.GOOGLE_DRIVE_SELECT_FOLDER && (
-                              // todo - make these booleans configurable (values on the component)
-                              <GoogleDriveFolderPickerWrapper showSharedDrivesView={true} showDefaultFoldersView={false} qInstance={qInstance} />
-                           )
-                        }
-                        {
-                           component.type === QComponentType.RECORD_LIST && step.recordListFields && recordConfig.columns && (
-                              <div>
-                                 <MDTypography variant="button" fontWeight="bold">Records</MDTypography>
-                                 {" "}
-                                 <br />
-                                 <Box height="100%">
-                                    <DataGridPro
-                                       components={{Pagination: CustomPagination}}
-                                       page={recordConfig.pageNo}
-                                       disableSelectionOnClick
-                                       autoHeight
-                                       rows={recordConfig.rows}
-                                       columns={recordConfig.columns}
-                                       rowBuffer={10}
-                                       rowCount={recordConfig.totalRecords}
-                                       pageSize={recordConfig.rowsPerPage}
-                                       rowsPerPageOptions={[10, 25, 50]}
-                                       onPageSizeChange={recordConfig.handleRowsPerPageChange}
-                                       onPageChange={recordConfig.handlePageChange}
-                                       onRowClick={recordConfig.handleRowClick}
-                                       getRowId={(row) => row.__idForDataGridPro__}
-                                       paginationMode="server"
-                                       pagination
-                                       density="compact"
-                                       loading={recordConfig.loading}
-                                       disableColumnFilter
-                                    />
+                                 )))
+                              }
+                           </div>
+                        )
+                     }
+                     {
+                        component.type === QComponentType.DOWNLOAD_FORM && (
+                           <Grid container display="flex" justifyContent="center">
+                              <Grid item xs={12} sm={12} xl={8} m={3} p={3} mt={6} sx={{border: "1px solid gray", borderRadius: "1rem"}}>
+                                 <Box mx={2} mt={-6} p={1} sx={{width: "fit-content", borderColor: "rgb(70%, 70%, 70%)", borderWidth: "2px", borderStyle: "solid", borderRadius: ".25em", backgroundColor: "#FFFFFF"}} width="initial" color="white">
+                                    Download
                                  </Box>
-                              </div>
-                           )
-                        }
-                        {
-                           component.type === QComponentType.HTML && (
-                              processValues[`${step.name}.html`] &&
-                              <Box fontSize="1rem">
-                                 {parse(processValues[`${step.name}.html`])}
+                                 <Box display="flex" py={1} pr={2}>
+                                    <MDTypography variant="button" fontWeight="bold" onClick={() => download(`/download/${processValues.downloadFileName}?filePath=${processValues.serverFilePath}`, processValues.downloadFileName)} sx={{cursor: "pointer"}}>
+                                       <Box display="flex" alignItems="center" gap={1} py={1} pr={2}>
+                                          <Icon fontSize="large">download_for_offline</Icon>
+                                          {processValues.downloadFileName}
+                                       </Box>
+                                    </MDTypography>
+                                 </Box>
+                              </Grid>
+                           </Grid>
+                        )
+                     }
+                     {
+                        component.type === QComponentType.VALIDATION_REVIEW_SCREEN && (
+                           <ValidationReview
+                              qInstance={qInstance}
+                              process={processMetaData}
+                              table={tableMetaData}
+                              processValues={processValues}
+                              step={step}
+                              previewRecords={records}
+                              formValues={formData.values}
+                              doFullValidationRadioChangedHandler={(event: any) =>
+                              {
+                                 const {value} = event.currentTarget;
+
+                                 //////////////////////////////////////////////////////////////
+                                 // call the formik function to set the value in this field. //
+                                 //////////////////////////////////////////////////////////////
+                                 setFieldValue("doFullValidation", value);
+
+                                 setOverrideOnLastStep(value !== "true");
+                              }}
+                           />
+                        )
+                     }
+                     {
+                        component.type === QComponentType.PROCESS_SUMMARY_RESULTS && (
+                           <ProcessSummaryResults qInstance={qInstance} process={processMetaData} table={tableMetaData} processValues={processValues} step={step} />
+                        )
+                     }
+                     {
+                        component.type === QComponentType.GOOGLE_DRIVE_SELECT_FOLDER && (
+                           // todo - make these booleans configurable (values on the component)
+                           <GoogleDriveFolderPickerWrapper showSharedDrivesView={true} showDefaultFoldersView={false} qInstance={qInstance} />
+                        )
+                     }
+                     {
+                        component.type === QComponentType.RECORD_LIST && step.recordListFields && recordConfig.columns && (
+                           <div>
+                              <MDTypography variant="button" fontWeight="bold">Records</MDTypography>
+                              {" "}
+                              <br />
+                              <Box height="100%">
+                                 <DataGridPro
+                                    components={{Pagination: CustomPagination}}
+                                    page={recordConfig.pageNo}
+                                    disableSelectionOnClick
+                                    autoHeight
+                                    rows={recordConfig.rows}
+                                    columns={recordConfig.columns}
+                                    rowBuffer={10}
+                                    rowCount={recordConfig.totalRecords}
+                                    pageSize={recordConfig.rowsPerPage}
+                                    rowsPerPageOptions={[10, 25, 50]}
+                                    onPageSizeChange={recordConfig.handleRowsPerPageChange}
+                                    onPageChange={recordConfig.handlePageChange}
+                                    onRowClick={recordConfig.handleRowClick}
+                                    getRowId={(row) => row.__idForDataGridPro__}
+                                    paginationMode="server"
+                                    pagination
+                                    density="compact"
+                                    loading={recordConfig.loading}
+                                    disableColumnFilter
+                                 />
                               </Box>
-                           )
-                        }
-                     </div>
-                  );
-               }))
-            }
+                           </div>
+                        )
+                     }
+                     {
+                        component.type === QComponentType.HTML && (
+                           processValues[`${step.name}.html`] &&
+                           <Box fontSize="1rem">
+                              {parse(processValues[`${step.name}.html`])}
+                           </Box>
+                        )
+                     }
+                  </div>
+               )))}
          </>
       );
    };
@@ -1113,7 +1109,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
             if (recordIds instanceof QQueryFilter)
             {
                queryStringPairsForInit.push("recordsParam=filterJSON");
-               queryStringPairsForInit.push(`filterJSON=${encodeURIComponent(JSON.stringify(recordIds))}`);
+               queryStringPairsForInit.push(`filterJSON=${JSON.stringify(recordIds)}`);
             }
             else if (typeof recordIds === "object" && recordIds.length)
             {
@@ -1126,7 +1122,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
          if (tableVariantLocalStorageKey && localStorage.getItem(tableVariantLocalStorageKey))
          {
             let tableVariant = JSON.parse(localStorage.getItem(tableVariantLocalStorageKey));
-            queryStringPairsForInit.push(`tableVariant=${encodeURIComponent(JSON.stringify(tableVariant))}`);
+            queryStringPairsForInit.push(`tableVariant=${JSON.stringify(tableVariant)}`);
          }
 
          try
@@ -1281,14 +1277,13 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
    mainCardStyles.minHeight = `calc(100vh - ${isModal ? 150 : 400}px)`;
    if (!processError && (qJobRunning || activeStep === null) && !isModal && !isWidget)
    {
-      mainCardStyles.background = "#FFFFFF";
+      mainCardStyles.background = "none";
       mainCardStyles.boxShadow = "none";
    }
    if (isWidget)
    {
       mainCardStyles.background = "none";
       mainCardStyles.boxShadow = "none";
-      mainCardStyles.border = "none";
       mainCardStyles.minHeight = "";
       mainCardStyles.alignItems = "stretch";
       mainCardStyles.flexGrow = 1;

src/qqq/pages/records/create/RecordCreate.tsx

@@ -34,8 +34,12 @@ function EntityCreate({table}: Props): JSX.Element
 {
    return (
       <BaseLayout>
-         <Box mb={3}>
-            <EntityForm table={table} />
+         <Box mt={4}>
+            <Grid container spacing={3}>
+               <Grid item xs={12} lg={12}>
+                  <EntityForm table={table} />
+               </Grid>
+            </Grid>
          </Box>
       </BaseLayout>
    );

src/qqq/pages/records/edit/RecordEdit.tsx

@@ -43,8 +43,18 @@ function EntityEdit({table, isCopy}: Props): JSX.Element
 
    return (
       <BaseLayout>
-         <Box mb={3}>
-            <EntityForm table={table} id={id} isCopy={isCopy} />
+         <Box mt={4}>
+            <Grid container spacing={3}>
+               <Grid item xs={12} lg={12}>
+                  <Box mb={3}>
+                     <Grid container spacing={3}>
+                        <Grid item xs={12}>
+                           <EntityForm table={table} id={id} isCopy={isCopy} />
+                        </Grid>
+                     </Grid>
+                  </Box>
+               </Grid>
+            </Grid>
          </Box>
       </BaseLayout>
    );

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

@@ -190,7 +190,7 @@ function RecordDeveloperView({table}: Props): JSX.Element
                                           return (
                                              <div key={fieldName}>
                                                 <Card sx={{mb: 3}}>
-                                                   <Typography variant="h6" p={2} pl={3} pb={3}>{field?.label}</Typography>
+                                                   <Typography variant="h6" p={2} pl={3} pb={1}>{field?.label}</Typography>
 
                                                    <Box display="flex" alignItems="center" justifyContent="space-between" gap={2}>
                                                       {scriptId ?

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

@@ -45,16 +45,13 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import Modal from "@mui/material/Modal";
-import Tooltip from "@mui/material/Tooltip/Tooltip";
 import React, {useContext, useEffect, useState} from "react";
 import {useLocation, useNavigate, useParams} from "react-router-dom";
 import QContext from "QContext";
-import colors from "qqq/assets/theme/base/colors";
 import AuditBody from "qqq/components/audits/AuditBody";
 import {QActionsMenuButton, QCancelButton, QDeleteButton, QEditButton} from "qqq/components/buttons/DefaultButtons";
 import EntityForm from "qqq/components/forms/EntityForm";
 import {GotoRecordButton} from "qqq/components/misc/GotoRecordDialog";
-import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
 import QRecordSidebar from "qqq/components/misc/RecordSidebar";
 import DashboardWidgets from "qqq/components/widgets/DashboardWidgets";
 import BaseLayout from "qqq/layouts/BaseLayout";
@@ -101,7 +98,6 @@ function RecordView({table, launchProcess}: Props): JSX.Element
    const [metaData, setMetaData] = useState(null as QInstance);
    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);
    const [t1SectionElement, setT1SectionElement] = useState(null as JSX.Element);
    const [nonT1TableSections, setNonT1TableSections] = useState([] as QTableSection[]);
@@ -121,7 +117,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
    const openActionsMenu = (event: any) => setActionsMenu(event.currentTarget);
    const closeActionsMenu = () => setActionsMenu(null);
 
-   const {accentColor, setPageHeader, tableMetaData, setTableMetaData, tableProcesses, setTableProcesses, dotMenuOpen, keyboardHelpOpen, helpHelpActive} = useContext(QContext);
+   const {accentColor, setPageHeader, tableMetaData, setTableMetaData, tableProcesses, setTableProcesses, dotMenuOpen, keyboardHelpOpen} = useContext(QContext);
 
    if (localStorage.getItem(tableVariantLocalStorageKey))
    {
@@ -355,23 +351,6 @@ function RecordView({table, launchProcess}: Props): JSX.Element
       return (visibleJoinTables);
    };
 
-
-   /*******************************************************************************
-    ** get an element (or empty) to use as help content for a section
-    *******************************************************************************/
-   const getSectionHelp = (section: QTableSection) =>
-   {
-      const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"]
-      const formattedHelpContent = <HelpContent helpContents={section.helpContents} roles={helpRoles} helpContentKey={`table:${tableName};section:${section.name}`} />;
-
-      return formattedHelpContent && (
-         <Box px={"1.5rem"} fontSize={"0.875rem"} color={colors.blueGray.main}>
-            {formattedHelpContent}
-         </Box>
-      )
-   }
-
-
    if (!asyncLoadInited)
    {
       setAsyncLoadInited(true);
@@ -462,17 +441,20 @@ function RecordView({table, launchProcess}: Props): JSX.Element
             }
          }
 
-         setPageHeader(record.recordLabel);
-
-         if(!launchingProcess)
+         if(record)
          {
-            try
+            setPageHeader(record.recordLabel);
+
+            if(!launchingProcess)
             {
-               HistoryUtils.push({label: `${tableMetaData?.label}: ${record.recordLabel}`, path: location.pathname, iconName: table.iconName});
-            }
-            catch(e)
-            {
-               console.error("Error pushing history: " + e);
+               try
+               {
+                  HistoryUtils.push({label: `${tableMetaData?.label}: ${record.recordLabel}`, path: location.pathname, iconName: table.iconName});
+               }
+               catch(e)
+               {
+                  console.error("Error pushing history: " + e);
+               }
             }
          }
 
@@ -523,24 +505,15 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                         {
                            let [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
                            let label = field.label;
-
-                           const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"]
-                           const showHelp = helpHelpActive || hasHelpContent(field.helpContents, helpRoles);
-                           const formattedHelpContent = <HelpContent helpContents={field.helpContents} roles={helpRoles} heading={label} helpContentKey={`table:${tableName};field:${fieldName}`} />;
-
-                           const labelElement = <Typography variant="button" textTransform="none" fontWeight="bold" pr={1} color="rgb(52, 71, 103)" sx={{cursor: "default"}}>{label}:</Typography>
-
                            return (
                               <Box key={fieldName} flexDirection="row" pr={2}>
-                                 <>
-                                    {
-                                       showHelp && formattedHelpContent ? <Tooltip title={formattedHelpContent}>{labelElement}</Tooltip> : labelElement
-                                    }
+                                 <Typography variant="button" textTransform="none" fontWeight="bold" pr={1} color="rgb(52, 71, 103)">
+                                    {label}:
                                     <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>
-                                 </>
+                                 </Typography>
+                                 <Typography variant="button" textTransform="none" fontWeight="regular" color="rgb(123, 128, 154)">
+                                    {ValueUtils.getDisplayValue(field, record, "view", fieldName)}
+                                 </Typography>
                               </Box>
                            )
                         })
@@ -561,7 +534,6 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                               <Typography variant="h6" p={3} pb={1}>
                                  {section.label}
                               </Typography>
-                              {getSectionHelp(section)}
                               <Box p={3} pt={0} flexDirection="column">
                                  {fields}
                               </Box>
@@ -580,7 +552,6 @@ function RecordView({table, launchProcess}: Props): JSX.Element
             {
                setT1SectionElement(sectionFieldElements.get(section.name));
                setT1SectionName(section.name);
-               setT1Section(section);
             }
             else
             {
@@ -911,7 +882,6 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                                                    {renderActionsMenu}
                                                 </Box>
                                              </Box>
-                                             {t1Section && getSectionHelp(t1Section)}
                                              {t1SectionElement ? (<Box p={3} pt={0}>{t1SectionElement}</Box>) : null}
                                           </Card>
                                        </Grid>

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

@@ -100,12 +100,9 @@
 }
 
 /* move the green check / red x down to align with the calendar icon */
-.MuiFormControl-root:has(input[type="datetime-local"]),
-.MuiFormControl-root:has(input[type="date"]),
-.MuiFormControl-root:has(input[type="time"]),
-.MuiFormControl-root:has(.MuiInputBase-inputAdornedEnd)
+.MuiFormControl-root
 {
-   background-position: right 2rem center;
+   background-position-y: 1.4rem !important;
 }
 
 .MuiInputAdornment-sizeMedium *
@@ -424,19 +421,6 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
    top: -60px !important;
 }
 
-.MuiDataGrid-panel:has(.customFilterPanel)
-{
-   /* overwrite what the grid tries to do here, where it changes based on density... we always want the same. */
-   transform: translate(274px, 305px) !important;
-}
-
-/* within the data-grid, the filter-panel's container has a max-height.  mirror that, and set an overflow-y */
-.MuiDataGrid-panel .customFilterPanel
-{
-   max-height: 450px;
-   overflow-y: auto;
-}
-
 /* tighten the text in the field select dropdown in custom filters */
 .customFilterPanel .MuiAutocomplete-paper
 {
@@ -500,8 +484,7 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
 }
 
 /* change tags in any-of value fields to not be black bg with white text */
-.customFilterPanel .filterValuesColumn .MuiChip-root,
-.quickFilter.filterValuesColumn .MuiChip-root
+.customFilterPanel .filterValuesColumn .MuiChip-root
 {
    background: none;
    color: black;
@@ -509,23 +492,20 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
 }
 
 /* change 'x' icon in tags in any-of value */
-.customFilterPanel .filterValuesColumn .MuiChip-root .MuiChip-deleteIcon,
-.quickFilter.filterValuesColumn .MuiChip-root .MuiChip-deleteIcon
+.customFilterPanel .filterValuesColumn .MuiChip-root .MuiChip-deleteIcon
 {
    color: gray;
 }
 
 /* change tags in any-of value fields to not be black bg with white text */
-.customFilterPanel .filterValuesColumn .MuiAutocomplete-tag,
-.quickFilter.filterValuesColumn .MuiAutocomplete-tag
+.customFilterPanel .filterValuesColumn .MuiAutocomplete-tag
 {
    color: #191919;
    background: none;
 }
 
 /* default hover color for the 'x' to remove a tag from an 'any-of' value was white, which made it disappear */
-.customFilterPanel .filterValuesColumn .MuiAutocomplete-tag .MuiSvgIcon-root:hover,
-.quickFilter.filterValuesColumn .MuiAutocomplete-tag .MuiSvgIcon-root:hover
+.customFilterPanel .filterValuesColumn .MuiAutocomplete-tag .MuiSvgIcon-root:hover
 {
    color: lightgray;
 }
@@ -584,34 +564,3 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
    display: inline;
    right: .5rem
 }
-
-/* help-content */
-.helpContent
-{
-   color: #757575;
-}
-
-.helpContent .header
-{
-   color: #212121;
-   font-weight: 500;
-   display: block;
-   margin-bottom: 0.25rem;
-}
-
-.MuiTooltip-tooltip .helpContent P + P,
-.MuiTooltip-tooltip .helpContent UL + P
-{
-   margin-top: 1rem;
-}
-
-.helpContent UL
-{
-   margin-left: 1rem;
-}
-
-/* for query screen column-header tooltips, move them up a little bit, to be more closely attached to the text. */
-.dataGridHeaderTooltip
-{
-   top: -1.25rem;
-}

src/qqq/utils/DataGridUtils.tsx

@@ -25,13 +25,10 @@ import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QField
 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 Tooltip from "@mui/material/Tooltip/Tooltip";
-import {GridColDef, GridFilterItem, GridRowsProp, MuiEvent} from "@mui/x-data-grid-pro";
+import {GridColDef, GridFilterItem, GridRowsProp} from "@mui/x-data-grid-pro";
 import {GridFilterOperator} from "@mui/x-data-grid/models/gridFilterOperator";
-import {GridColumnHeaderParams} from "@mui/x-data-grid/models/params/gridColumnHeaderParams";
 import React from "react";
-import {Link, NavigateFunction} from "react-router-dom";
-import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
+import {Link} from "react-router-dom";
 import {buildQGridPvsOperators, QGridBlobOperators, QGridBooleanOperators, QGridNumericOperators, QGridStringOperators} from "qqq/pages/records/query/GridFilterOperators";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
 
@@ -84,36 +81,6 @@ const QGridDateTimeOperators = [
 
 export default class DataGridUtils
 {
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public static handleRowClick = (path: string, event: MuiEvent<React.MouseEvent>, gridMouseDownX: number, gridMouseDownY: number, navigate: NavigateFunction, instance: any) =>
-   {
-      ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-      // strategy for when to trigger or not trigger a row click:                                                      //
-      // To avoid a drag-event that highlighted text in a cell:                                                        //
-      // - we capture the x & y upon mouse-down - then compare them in this method (which fires when the mouse is up)  //
-      //   if they are more than 5 pixels away from the mouse-down, then assume it's a drag, not a click.              //
-      // - avoid clicking the row upon double-click, by setting a 500ms timer here - and in the onDoubleClick handler, //
-      //   cancelling the timer.                                                                                       //
-      // - also avoid a click, then click-again-and-start-dragging, by always cancelling the timer in mouse-down.      //
-      // All in, these seem to have good results - the only downside being the half-second delay...                    //
-      ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-      const diff = Math.max(Math.abs(event.clientX - gridMouseDownX), Math.abs(event.clientY - gridMouseDownY));
-      if (diff < 5)
-      {
-         console.log("clearing timeout");
-         clearTimeout(instance.current.timer);
-         instance.current.timer = setTimeout(() =>
-         {
-            navigate(path);
-         }, 100);
-      }
-      else
-      {
-         console.log(`row-click mouse-up happened ${diff} x or y pixels away from the mouse-down - so not considering it a click.`);
-      }
-   }
 
    /*******************************************************************************
     **
@@ -343,20 +310,6 @@ export default class DataGridUtils
          (cellValues.value)
       );
 
-      const helpRoles = ["QUERY_SCREEN", "READ_SCREENS", "ALL_SCREENS"]
-      const showHelp = hasHelpContent(field.helpContents, helpRoles); // todo - maybe - take helpHelpActive from context all the way down to here?
-      if(showHelp)
-      {
-         const formattedHelpContent = <HelpContent helpContents={field.helpContents} roles={helpRoles} heading={headerName} helpContentKey={`table:${tableMetaData.name};field:${fieldName}`} />;
-         column.renderHeader = (params: GridColumnHeaderParams) => (
-            <Tooltip title={formattedHelpContent}>
-               <div className="MuiDataGrid-columnHeaderTitle" style={{lineHeight: "initial"}}>
-                  {headerName}
-               </div>
-            </Tooltip>
-         );
-      }
-
       return (column);
    }
 

src/qqq/utils/HtmlUtils.ts

@@ -63,10 +63,6 @@ export default class HtmlUtils
 
    /*******************************************************************************
     ** Download a server-side generated file (or the contents of a data: url)
-    **
-    ** todo - this could be simplified (i think?)
-    ** it was originally built like this when we had to submit full access token to backend...
-    **
     *******************************************************************************/
    static downloadUrlViaIFrame = (url: string, filename: string) =>
    {
@@ -99,6 +95,18 @@ export default class HtmlUtils
       form.setAttribute("target", "downloadIframe");
       iframe.appendChild(form);
 
+      /////////////////////////////////////////////////////////////////////////////////////////////
+      // todo#authHeader - remove after comfortable with sessionUUID                             //
+      // todo - this could be simplified (i think?)                                              //
+      // it was originally built like this when we had to submit full access token to backend... //
+      /////////////////////////////////////////////////////////////////////////////////////////////
+      const authorizationInput = document.createElement("input");
+      authorizationInput.setAttribute("type", "hidden");
+      authorizationInput.setAttribute("id", "authorizationInput");
+      authorizationInput.setAttribute("name", "Authorization");
+      authorizationInput.setAttribute("value", Client.getInstance().getAuthorizationHeaderValue());
+      form.appendChild(authorizationInput);
+
       const downloadInput = document.createElement("input");
       downloadInput.setAttribute("type", "hidden");
       downloadInput.setAttribute("name", "download");
@@ -110,16 +118,15 @@ export default class HtmlUtils
 
    /*******************************************************************************
     ** Open a server-side generated file from a url in a new window (or a data: url)
-    **
-    ** todo - this could be simplified (i think?)
-    ** it was originally built like this when we had to submit full access token to backend...
-    **
     *******************************************************************************/
    static openInNewWindow = (url: string, filename: string) =>
    {
       if(url.startsWith("data:"))
       {
          /////////////////////////////////////////////////////////////////////////////////////////////
+         // todo#authHeader - remove the Authorization input after comfortable with sessionUUID     //
+         // todo - this could be simplified (i think?)                                              //
+         // it was originally built like this when we had to submit full access token to backend... //
          /////////////////////////////////////////////////////////////////////////////////////////////
          const openInWindow = window.open("", "_blank");
          openInWindow.document.write(`<html lang="en">
@@ -134,7 +141,7 @@ export default class HtmlUtils
       openInWindow.document.write(`<html lang="en">
             <head>
                <style>
-                  * { font-family: "SF Pro Display","Roboto","Helvetica","Arial",sans-serif; }
+                  * { font-family: "Roboto","Helvetica","Arial",sans-serif; }
                </style>
                <title>${filename}</title>
                <script>
@@ -147,6 +154,7 @@ export default class HtmlUtils
             <body>
                Opening ${filename}...
                <form id="exportForm" method="post" action="${url}" >
+                  <input type="hidden" name="Authorization" value="${Client.getInstance().getAuthorizationHeaderValue()}">
                </form>
             </body>
          </html>`);

src/qqq/utils/qqq/Client.ts

@@ -29,18 +29,11 @@ import {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException
 class Client
 {
    private static qController: QController;
-   private static unauthorizedCallback: () => void;
 
    private static handleException(exception: QException)
    {
+      // todo - check for 401 and clear cookie et al & logout?
       console.log(`Caught Exception: ${JSON.stringify(exception)}`);
-
-      if(exception && exception.status == "401" && Client.unauthorizedCallback)
-      {
-         console.log("This is a 401 - calling the unauthorized callback.");
-         Client.unauthorizedCallback();
-      }
-
       throw (exception);
    }
 
@@ -53,11 +46,6 @@ class Client
 
       return this.qController;
    }
-
-   static setUnauthorizedCallback(unauthorizedCallback: () => void)
-   {
-      Client.unauthorizedCallback = unauthorizedCallback;
-   }
 }
 
 export default Client;

src/qqq/utils/qqq/FilterUtils.ts

@@ -358,9 +358,9 @@ class FilterUtils
          ////////////////////////////////////////////////////////////////////////////////////////////////
          if (fieldType === QFieldType.DATE_TIME)
          {
-            for (let i = 0; i < values.length; i++)
+            for(let i = 0; i<values.length; i++)
             {
-               if (!values[i].type)
+               if(!values[i].type)
                {
                   values[i] = ValueUtils.formatDateTimeValueForForm(values[i]);
                }
@@ -402,7 +402,7 @@ class FilterUtils
                   if (field == null)
                   {
                      console.log("Couldn't find field for filter: " + criteria.fieldName);
-                     warningParts.push("Your filter contained an unrecognized field name: " + criteria.fieldName);
+                     warningParts.push("Your filter contained an unrecognized field name: " + criteria.fieldName)
                      continue;
                   }
 
@@ -432,11 +432,11 @@ class FilterUtils
                   //////////////////////////////////////////////////////////////////////////
                   // replace objects that look like expressions with expression instances //
                   //////////////////////////////////////////////////////////////////////////
-                  if (values && values.length)
+                  if(values && values.length)
                   {
                      for (let i = 0; i < values.length; i++)
                      {
-                        const expression = this.gridCriteriaValueToExpression(values[i]);
+                        const expression = this.gridCriteriaValueToExpression(values[i])
                         if (expression)
                         {
                            values[i] = expression;
@@ -508,16 +508,16 @@ class FilterUtils
       // if any values in the items are objects, but should be expression instances, //
       // then convert & replace them.                                               //
       /////////////////////////////////////////////////////////////////////////////////
-      if (defaultFilter && defaultFilter.items && defaultFilter.items.length)
+      if(defaultFilter && defaultFilter.items && defaultFilter.items.length)
       {
          defaultFilter.items.forEach((item) =>
          {
-            if (item.value && item.value.length)
+            if(item.value && item.value.length)
             {
                for (let i = 0; i < item.value.length; i++)
                {
-                  const expression = this.gridCriteriaValueToExpression(item.value[i]);
-                  if (expression)
+                  const expression = this.gridCriteriaValueToExpression(item.value[i])
+                  if(expression)
                   {
                      item.value[i] = expression;
                   }
@@ -525,8 +525,8 @@ class FilterUtils
             }
             else
             {
-               const expression = this.gridCriteriaValueToExpression(item.value);
-               if (expression)
+               const expression = this.gridCriteriaValueToExpression(item.value)
+               if(expression)
                {
                   item.value = expression;
                }
@@ -641,7 +641,7 @@ class FilterUtils
             let incomplete = false;
             if (item.operatorValue === "between" || item.operatorValue === "notBetween")
             {
-               if (!item.value || !item.value.length || item.value.length < 2 || this.isUnset(item.value[0]) || this.isUnset(item.value[1]))
+               if(!item.value || !item.value.length || item.value.length < 2 || this.isUnset(item.value[0]) || this.isUnset(item.value[1]))
                {
                   incomplete = true;
                }
@@ -747,103 +747,6 @@ class FilterUtils
       return (filter);
    }
 
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public static canFilterWorkAsBasic(tableMetaData: QTableMetaData, filter: QQueryFilter): { canFilterWorkAsBasic: boolean; reasonsWhyItCannot?: string[] }
-   {
-      const reasonsWhyItCannot: string[] = [];
-
-      if(filter == null)
-      {
-         return ({canFilterWorkAsBasic: true});
-      }
-
-      if(filter.booleanOperator == "OR")
-      {
-         reasonsWhyItCannot.push("Filter uses the 'OR' operator.")
-      }
-
-      if(filter.criteria)
-      {
-         const usedFields: {[name: string]: boolean} = {};
-         const warnedFields: {[name: string]: boolean} = {};
-         for (let i = 0; i < filter.criteria.length; i++)
-         {
-            const criteriaName = filter.criteria[i].fieldName;
-            if(!criteriaName)
-            {
-               continue;
-            }
-
-            if(usedFields[criteriaName])
-            {
-               if(!warnedFields[criteriaName])
-               {
-                  const [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, criteriaName);
-                  let fieldLabel = field.label;
-                  if(tableForField.name != tableMetaData.name)
-                  {
-                     let fieldLabel = `${tableForField.label}: ${field.label}`;
-                  }
-                  reasonsWhyItCannot.push(`Filter contains more than 1 condition for the field: ${fieldLabel}`);
-                  warnedFields[criteriaName] = true;
-               }
-            }
-            usedFields[criteriaName] = true;
-         }
-      }
-
-      if(reasonsWhyItCannot.length == 0)
-      {
-         return ({canFilterWorkAsBasic: true});
-      }
-      else
-      {
-         return ({canFilterWorkAsBasic: false, reasonsWhyItCannot: reasonsWhyItCannot});
-      }
-   }
-
-   /*******************************************************************************
-    ** get the values associated with a criteria as a string, e.g., for showing
-    ** in a tooltip.
-    *******************************************************************************/
-   public static getValuesString(fieldMetaData: QFieldMetaData, criteria: QFilterCriteria, maxValuesToShow: number = 3): string
-   {
-      let valuesString = "";
-      if (criteria.values && criteria.values.length && fieldMetaData.type !== QFieldType.BOOLEAN)
-      {
-         let labels = [] as string[];
-
-         let maxLoops = criteria.values.length;
-         if (maxLoops > (maxValuesToShow + 2))
-         {
-            maxLoops = maxValuesToShow;
-         }
-
-         for (let i = 0; i < maxLoops; i++)
-         {
-            if (criteria.values[i] && criteria.values[i].label)
-            {
-               labels.push(criteria.values[i].label);
-            }
-            else
-            {
-               labels.push(criteria.values[i]);
-            }
-         }
-
-         if (maxLoops < criteria.values.length)
-         {
-            labels.push(" and " + (criteria.values.length - maxLoops) + " other values.");
-         }
-
-         valuesString = (labels.join(", "));
-      }
-      return valuesString;
-   }
-
 }
 
 export default FilterUtils;

src/qqq/utils/qqq/ValueUtils.tsx

@@ -462,19 +462,6 @@ class ValueUtils
 
       return (String(param).replaceAll(/"/g, "\"\""));
    }
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public static safeToLocaleString(n: Number): string
-   {
-      if (n != null && n != undefined)
-      {
-         return (n.toLocaleString());
-      }
-      return ("");
-   }
-
 }
 
 ////////////////////////////////////////////////////////////////////////////////////////////////

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

@@ -1,75 +0,0 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2024.  Kingsrook, LLC
- * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
- * contact@kingsrook.com
- * https://github.com/Kingsrook/
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-package com.kingsrook.qqq.frontend.materialdashboard.junit;
-
-
-import com.kingsrook.qqq.backend.core.context.QContext;
-import com.kingsrook.qqq.backend.core.logging.QLogger;
-import com.kingsrook.qqq.backend.core.model.metadata.QInstance;
-import com.kingsrook.qqq.backend.core.model.session.QSession;
-import org.junit.jupiter.api.AfterEach;
-import org.junit.jupiter.api.BeforeEach;
-
-
-/*******************************************************************************
- **
- *******************************************************************************/
-public class BaseTest
-{
-   private static final QLogger LOG = QLogger.getLogger(BaseTest.class);
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   @BeforeEach
-   void baseBeforeEach()
-   {
-      QContext.init(TestUtils.defineInstance(), new QSession());
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   @AfterEach
-   void baseAfterEach()
-   {
-      QContext.clear();
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   protected static void reInitInstanceInContext(QInstance qInstance)
-   {
-      if(qInstance.equals(QContext.getQInstance()))
-      {
-         LOG.warn("Unexpected condition - the same qInstance that is already in the QContext was passed into reInit.  You probably want a new QInstance object instance.");
-      }
-      QContext.init(qInstance, new QSession());
-   }
-}

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

@@ -1,101 +0,0 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2024.  Kingsrook, LLC
- * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
- * contact@kingsrook.com
- * https://github.com/Kingsrook/
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-package com.kingsrook.qqq.frontend.materialdashboard.junit;
-
-
-import com.kingsrook.qqq.backend.core.model.metadata.QAuthenticationType;
-import com.kingsrook.qqq.backend.core.model.metadata.QBackendMetaData;
-import com.kingsrook.qqq.backend.core.model.metadata.QInstance;
-import com.kingsrook.qqq.backend.core.model.metadata.authentication.QAuthenticationMetaData;
-import com.kingsrook.qqq.backend.core.model.metadata.fields.QFieldMetaData;
-import com.kingsrook.qqq.backend.core.model.metadata.fields.QFieldType;
-import com.kingsrook.qqq.backend.core.model.metadata.tables.QTableMetaData;
-
-
-/*******************************************************************************
- **
- *******************************************************************************/
-public class TestUtils
-{
-   public static final String DEFAULT_BACKEND_NAME = "memoryBackend";
-   public static final String TABLE_NAME_PERSON    = "person";
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public static QInstance defineInstance()
-   {
-      QInstance qInstance = new QInstance();
-      qInstance.addBackend(defineBackend());
-      qInstance.addTable(defineTablePerson());
-      qInstance.setAuthentication(defineAuthentication());
-      return (qInstance);
-   }
-
-
-
-   /*******************************************************************************
-    ** Define the authentication used in standard tests - using 'mock' type.
-    **
-    *******************************************************************************/
-   public static QAuthenticationMetaData defineAuthentication()
-   {
-      return new QAuthenticationMetaData()
-         .withName("mock")
-         .withType(QAuthenticationType.MOCK);
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public static QBackendMetaData defineBackend()
-   {
-      return (new QBackendMetaData()
-         .withName(DEFAULT_BACKEND_NAME)
-         .withBackendType("memory"));
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   private static QTableMetaData defineTablePerson()
-   {
-      return new QTableMetaData()
-         .withName(TABLE_NAME_PERSON)
-         .withLabel("Person")
-         .withBackendName(DEFAULT_BACKEND_NAME)
-         .withPrimaryKeyField("id")
-         .withField(new QFieldMetaData("id", QFieldType.INTEGER).withIsEditable(false))
-         .withField(new QFieldMetaData("createDate", QFieldType.DATE_TIME).withIsEditable(false))
-         .withField(new QFieldMetaData("modifyDate", QFieldType.DATE_TIME).withIsEditable(false))
-         .withField(new QFieldMetaData("firstName", QFieldType.STRING))
-         .withField(new QFieldMetaData("lastName", QFieldType.STRING))
-         .withField(new QFieldMetaData("birthDate", QFieldType.DATE))
-         .withField(new QFieldMetaData("email", QFieldType.STRING));
-   }
-}

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/MaterialDashboardTableMetaDataTest.java

@@ -1,178 +0,0 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2024.  Kingsrook, LLC
- * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
- * contact@kingsrook.com
- * https://github.com/Kingsrook/
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-package com.kingsrook.qqq.frontend.materialdashboard.model.metadata;
-
-
-import java.util.List;
-import java.util.function.Consumer;
-import com.kingsrook.qqq.backend.core.exceptions.QInstanceValidationException;
-import com.kingsrook.qqq.backend.core.instances.QInstanceValidator;
-import com.kingsrook.qqq.backend.core.model.metadata.QInstance;
-import com.kingsrook.qqq.frontend.materialdashboard.junit.BaseTest;
-import com.kingsrook.qqq.frontend.materialdashboard.junit.TestUtils;
-import org.junit.jupiter.api.Test;
-import static org.assertj.core.api.Assertions.assertThat;
-import static org.junit.jupiter.api.Assertions.assertEquals;
-import static org.junit.jupiter.api.Assertions.assertNotNull;
-import static org.junit.jupiter.api.Assertions.fail;
-
-
-/*******************************************************************************
- ** Unit test for MaterialDashboardTableMetaData 
- *******************************************************************************/
-class MaterialDashboardTableMetaDataTest extends BaseTest
-{
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   @Test
-   void testValidateGoToFieldNames()
-   {
-      assertValidationFailureReasons(qInstance -> qInstance.getTable(TestUtils.TABLE_NAME_PERSON).withSupplementalMetaData(new MaterialDashboardTableMetaData().withGotoFieldNames(List.of(List.of()))),
-         "empty gotoFieldNames list");
-
-      assertValidationFailureReasons(qInstance -> qInstance.getTable(TestUtils.TABLE_NAME_PERSON).withSupplementalMetaData(new MaterialDashboardTableMetaData().withGotoFieldNames(List.of(List.of("foo")))),
-         "unrecognized field name: foo");
-
-      assertValidationFailureReasons(qInstance -> qInstance.getTable(TestUtils.TABLE_NAME_PERSON).withSupplementalMetaData(new MaterialDashboardTableMetaData().withGotoFieldNames(List.of(List.of("foo"), List.of("bar", "baz")))),
-         "unrecognized field name: foo",
-         "unrecognized field name: bar",
-         "unrecognized field name: baz");
-
-      assertValidationFailureReasons(qInstance -> qInstance.getTable(TestUtils.TABLE_NAME_PERSON).withSupplementalMetaData(new MaterialDashboardTableMetaData().withGotoFieldNames(List.of(List.of("firstName", "firstName")))),
-         "duplicated field name: firstName");
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   @Test
-   void testValidateQuickFilterFieldNames()
-   {
-      assertValidationFailureReasons(qInstance -> qInstance.getTable(TestUtils.TABLE_NAME_PERSON).withSupplementalMetaData(new MaterialDashboardTableMetaData().withDefaultQuickFilterFieldNames(List.of("foo"))),
-         "unrecognized field name: foo");
-
-      assertValidationFailureReasons(qInstance -> qInstance.getTable(TestUtils.TABLE_NAME_PERSON).withSupplementalMetaData(new MaterialDashboardTableMetaData().withDefaultQuickFilterFieldNames(List.of("firstName", "lastName", "firstName"))),
-         "duplicated field name: firstName");
-
-   }
-
-   //////////////////////////////////////////////////////////////////////////
-   // todo - methods below here were copied from QInstanceValidatorTest... //
-   // how to share those...                                                //
-   //////////////////////////////////////////////////////////////////////////
-
-
-
-   /*******************************************************************************
-    ** Run a little setup code on a qInstance; then validate it, and assert that it
-    ** failed validation with reasons that match the supplied vararg-reasons (but allow
-    ** more reasons - e.g., helpful when one thing we're testing causes other errors).
-    *******************************************************************************/
-   private void assertValidationFailureReasonsAllowingExtraReasons(Consumer<QInstance> setup, String... reasons)
-   {
-      assertValidationFailureReasons(setup, true, reasons);
-   }
-
-
-
-   /*******************************************************************************
-    ** Run a little setup code on a qInstance; then validate it, and assert that it
-    ** failed validation with reasons that match the supplied vararg-reasons (and
-    ** require that exact # of reasons).
-    *******************************************************************************/
-   private void assertValidationFailureReasons(Consumer<QInstance> setup, String... reasons)
-   {
-      assertValidationFailureReasons(setup, false, reasons);
-   }
-
-
-
-   /*******************************************************************************
-    ** Implementation for the overloads of this name.
-    *******************************************************************************/
-   private void assertValidationFailureReasons(Consumer<QInstance> setup, boolean allowExtraReasons, String... reasons)
-   {
-      try
-      {
-         QInstance qInstance = TestUtils.defineInstance();
-         setup.accept(qInstance);
-         new QInstanceValidator().validate(qInstance);
-         fail("Should have thrown validationException");
-      }
-      catch(QInstanceValidationException e)
-      {
-         if(!allowExtraReasons)
-         {
-            int noOfReasons = e.getReasons() == null ? 0 : e.getReasons().size();
-            assertEquals(reasons.length, noOfReasons, "Expected number of validation failure reasons.\nExpected reasons: " + String.join(",", reasons)
-               + "\nActual reasons: " + (noOfReasons > 0 ? String.join("\n", e.getReasons()) : "--"));
-         }
-
-         for(String reason : reasons)
-         {
-            assertReason(reason, e);
-         }
-      }
-   }
-
-
-
-   /*******************************************************************************
-    ** Assert that an instance is valid!
-    *******************************************************************************/
-   private void assertValidationSuccess(Consumer<QInstance> setup)
-   {
-      try
-      {
-         QInstance qInstance = TestUtils.defineInstance();
-         setup.accept(qInstance);
-         new QInstanceValidator().validate(qInstance);
-      }
-      catch(QInstanceValidationException e)
-      {
-         fail("Expected no validation errors, but received: " + e.getMessage());
-      }
-   }
-
-
-
-   /*******************************************************************************
-    ** utility method for asserting that a specific reason string is found within
-    ** the list of reasons in the QInstanceValidationException.
-    **
-    *******************************************************************************/
-   private void assertReason(String reason, QInstanceValidationException e)
-   {
-      assertNotNull(e.getReasons(), "Expected there to be a reason for the failure (but there was not)");
-      assertThat(e.getReasons())
-         .withFailMessage("Expected any of:\n%s\nTo match: [%s]", e.getReasons(), reason)
-         .anyMatch(s -> s.contains(reason));
-   }
-
-   /////////////////////////////////////////////////////////////////
-   // todo - end of methods copied from QInstanceValidatorTest... //
-   /////////////////////////////////////////////////////////////////
-}

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

@@ -1,35 +0,0 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2024.  Kingsrook, LLC
- * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
- * contact@kingsrook.com
- * https://github.com/Kingsrook/
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-package com.kingsrook.qqq.frontend.materialdashboard.selenium.lib;
-
-
-/*******************************************************************************
- ** constants to define css selectors for common QQQ material dashboard elements.
- *******************************************************************************/
-public interface QQQMaterialDashboardSelectors
-{
-   String SIDEBAR_ITEM      = ".MuiDrawer-paperAnchorDockedLeft li.MuiListItem-root";
-   String BREADCRUMB_HEADER = ".MuiToolbar-root h3";
-
-   String QUERY_GRID_CELL    = ".MuiDataGrid-root .MuiDataGrid-cellContent";
-   String QUERY_FILTER_INPUT = ".customFilterPanel input.MuiInput-input";
-}

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

@@ -1,169 +0,0 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2024.  Kingsrook, LLC
- * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
- * contact@kingsrook.com
- * https://github.com/Kingsrook/
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-package com.kingsrook.qqq.frontend.materialdashboard.selenium.lib;
-
-
-import org.openqa.selenium.By;
-import org.openqa.selenium.Keys;
-import org.openqa.selenium.WebElement;
-
-
-/*******************************************************************************
- **
- *******************************************************************************/
-public class QueryScreenLib
-{
-   private final QSeleniumLib qSeleniumLib;
-
-
-
-   /*******************************************************************************
-    ** Constructor
-    **
-    *******************************************************************************/
-   public QueryScreenLib(QSeleniumLib qSeleniumLib)
-   {
-      this.qSeleniumLib = qSeleniumLib;
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public WebElement assertFilterButtonBadge(int valueInBadge)
-   {
-      return qSeleniumLib.waitForSelectorContaining(".MuiBadge-root", String.valueOf(valueInBadge));
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public WebElement waitForQueryToHaveRan()
-   {
-      return qSeleniumLib.waitForSelector(QQQMaterialDashboardSelectors.QUERY_GRID_CELL);
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public void clickFilterButton()
-   {
-      qSeleniumLib.waitForSelectorContaining("BUTTON", "FILTER BUILDER").click();
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public WebElement assertQuickFilterButtonBadge(String fieldName)
-   {
-      return qSeleniumLib.waitForSelector("#quickFilter\\." + fieldName + " .MuiBadge-root");
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public void clickQuickFilterButton(String fieldName)
-   {
-      // qSeleniumLib.waitForSelectorContaining(".MuiDataGrid-toolbarContainer BUTTON", "Filter").click();
-      qSeleniumLib.waitForSelector("#quickFilter\\." + fieldName).click();
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public void gotoAdvancedMode()
-   {
-      qSeleniumLib.waitForSelectorContaining("BUTTON", "ADVANCED").click();
-      qSeleniumLib.waitForSelectorContaining("BUTTON", "FILTER BUILDER");
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public void gotoBasicMode()
-   {
-      qSeleniumLib.waitForSelectorContaining("BUTTON", "BASIC").click();
-      qSeleniumLib.waitForSelectorContaining("BUTTON", "ADD FILTER");
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public void addQueryFilterInput(QSeleniumLib qSeleniumLib, int index, String fieldLabel, String operator, String value, String booleanOperator)
-   {
-      if(index > 0)
-      {
-         qSeleniumLib.waitForSelectorContaining("BUTTON", "Add condition").click();
-      }
-
-      WebElement subFormForField = qSeleniumLib.waitForSelectorAll(".filterCriteriaRow", index + 1).get(index);
-
-      if(index == 1)
-      {
-         WebElement booleanOperatorInput = subFormForField.findElement(By.cssSelector(".booleanOperatorColumn .MuiInput-input"));
-         booleanOperatorInput.click();
-         qSeleniumLib.waitForMillis(100);
-
-         subFormForField.findElement(By.cssSelector(".booleanOperatorColumn .MuiInput-input"));
-         qSeleniumLib.waitForSelectorContaining("li", booleanOperator).click();
-         qSeleniumLib.waitForMillis(100);
-      }
-
-      WebElement fieldInput = subFormForField.findElement(By.cssSelector(".fieldColumn INPUT"));
-      fieldInput.click();
-      qSeleniumLib.waitForMillis(100);
-      fieldInput.clear();
-      fieldInput.sendKeys(fieldLabel);
-      qSeleniumLib.waitForMillis(100);
-      fieldInput.sendKeys("\n");
-      qSeleniumLib.waitForMillis(100);
-
-      WebElement operatorInput = subFormForField.findElement(By.cssSelector(".operatorColumn INPUT"));
-      operatorInput.click();
-      qSeleniumLib.waitForMillis(100);
-      operatorInput.sendKeys(Keys.BACK_SPACE, Keys.BACK_SPACE, Keys.BACK_SPACE, Keys.BACK_SPACE, Keys.BACK_SPACE, Keys.BACK_SPACE, Keys.BACK_SPACE, Keys.BACK_SPACE, Keys.BACK_SPACE, Keys.BACK_SPACE, Keys.BACK_SPACE, Keys.BACK_SPACE, operator);
-      qSeleniumLib.waitForMillis(100);
-      operatorInput.sendKeys("\n");
-      qSeleniumLib.waitForMillis(100);
-
-      WebElement valueInput = subFormForField.findElement(By.cssSelector(".filterValuesColumn INPUT"));
-      valueInput.click();
-      valueInput.sendKeys(value);
-      qSeleniumLib.waitForMillis(100);
-   }
-
-}

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

@@ -1,110 +0,0 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2024.  Kingsrook, LLC
- * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
- * contact@kingsrook.com
- * https://github.com/Kingsrook/
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-package com.kingsrook.qqq.frontend.materialdashboard.selenium.tests;
-
-
-import java.io.File;
-import java.io.IOException;
-import java.nio.charset.StandardCharsets;
-import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QBaseSeleniumTest;
-import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.javalin.QSeleniumJavalin;
-import org.apache.commons.io.FileUtils;
-import org.junit.jupiter.api.Test;
-import org.openqa.selenium.By;
-import static org.junit.jupiter.api.Assertions.assertEquals;
-
-
-/*******************************************************************************
- ** Tests for dashboard table widget with export button
- *******************************************************************************/
-public class DashboardTableWidgetExportTest extends QBaseSeleniumTest
-{
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   @Override
-   protected void addJavalinRoutes(QSeleniumJavalin qSeleniumJavalin)
-   {
-      super.addJavalinRoutes(qSeleniumJavalin);
-      qSeleniumJavalin
-         .withRouteToFile("/data/person/count", "data/person/count.json")
-         .withRouteToFile("/data/city/count", "data/city/count.json");
-
-      qSeleniumJavalin.withRouteToString("/widget/SampleTableWidget", """
-         {
-            "label": "Sample Table Widget",
-            "footerHTML": "<span class='material-icons-round notranslate MuiIcon-root MuiIcon-fontSizeInherit' aria-hidden='true'><span class='dashboard-schedule-icon'>schedule</span></span>Updated at 2023-10-17 09:11:38 AM CDT",
-            "columns": [
-                { "type": "html", "header": "Id", "accessor": "id", "width": "1%" },
-                { "type": "html", "header": "Name", "accessor": "name", "width": "99%" }
-            ],
-            "rows": [
-                { "id": "1", "name": "<a href='/setup/person/1'>Homer S.</a>" },
-                { "id": "2", "name": "<a href='/setup/person/2'>Marge B.</a>" },
-                { "id": "3", "name": "<a href='/setup/person/3'>Bart J.</a>" }
-            ],
-            "type": "table"
-         }
-         """);
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   @Test
-   void testDashboardTableWidgetExport() throws IOException
-   {
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/", "Greetings App");
-
-      ////////////////////////////////////////////////////////////////////////
-      // assert that the table widget rendered its header and some contents //
-      ////////////////////////////////////////////////////////////////////////
-      qSeleniumLib.waitForSelectorContaining("#SampleTableWidget h6", "Sample Table Widget");
-      qSeleniumLib.waitForSelectorContaining("#SampleTableWidget table a", "Homer S.");
-      qSeleniumLib.waitForSelectorContaining("#SampleTableWidget div", "Updated at 2023-10-17 09:11:38 AM CDT");
-
-      /////////////////////////////
-      // click the export button //
-      /////////////////////////////
-      qSeleniumLib.waitForSelector("#SampleTableWidget h6")
-         .findElement(By.xpath("./.."))
-         .findElement(By.cssSelector("button"))
-         .click();
-
-      qSeleniumLib.waitForCondition("Should have downloaded 1 file", () -> getDownloadedFiles().size() == 1);
-      qSeleniumLib.waitForCondition("Expected file name", () -> getDownloadedFiles().get(0).getName().matches("Sample Table Widget.*.csv"));
-      File csvFile = getDownloadedFiles().get(0);
-      String fileContents = FileUtils.readFileToString(csvFile, StandardCharsets.UTF_8);
-      assertEquals("""
-         "Id","Name"
-         "1","Homer S."
-         "2","Marge B."
-         "3","Bart J."
-         """, fileContents);
-
-      // qSeleniumLib.waitForever();
-   }
-
-}

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

@@ -1,159 +0,0 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2024.  Kingsrook, LLC
- * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
- * contact@kingsrook.com
- * https://github.com/Kingsrook/
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-package com.kingsrook.qqq.frontend.materialdashboard.selenium.tests;
-
-
-import java.net.URLEncoder;
-import java.nio.charset.StandardCharsets;
-import java.time.temporal.ChronoUnit;
-import com.kingsrook.qqq.backend.core.model.actions.tables.query.QCriteriaOperator;
-import com.kingsrook.qqq.backend.core.model.actions.tables.query.QFilterCriteria;
-import com.kingsrook.qqq.backend.core.model.actions.tables.query.QQueryFilter;
-import com.kingsrook.qqq.backend.core.model.actions.tables.query.expressions.NowWithOffset;
-import com.kingsrook.qqq.backend.core.model.actions.tables.query.expressions.ThisOrLastPeriod;
-import com.kingsrook.qqq.backend.core.utils.JsonUtils;
-import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QBaseSeleniumTest;
-import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QueryScreenLib;
-import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.javalin.QSeleniumJavalin;
-import org.junit.jupiter.api.Test;
-
-
-/*******************************************************************************
- ** Test for the record query screen when a filter is given in the URL
- *******************************************************************************/
-public class QueryScreenFilterInUrlBasicModeTest extends QBaseSeleniumTest
-{
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   @Override
-   protected void addJavalinRoutes(QSeleniumJavalin qSeleniumJavalin)
-   {
-      super.addJavalinRoutes(qSeleniumJavalin);
-      qSeleniumJavalin
-         .withRouteToFile("/data/person/count", "data/person/count.json")
-         .withRouteToFile("/data/person/query", "data/person/index.json")
-         .withRouteToFile("/data/person/possibleValues/homeCityId", "data/person/possibleValues/homeCityId.json")
-         .withRouteToFile("/data/person/variants", "data/person/variants.json")
-         .withRouteToFile("/processes/querySavedFilter/init", "processes/querySavedFilter/init.json");
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   @Test
-   void testUrlWithFilter()
-   {
-      QueryScreenLib queryScreenLib = new QueryScreenLib(qSeleniumLib);
-
-      ////////////////////////////////////////
-      // not-blank -- criteria w/ no values //
-      ////////////////////////////////////////
-      String filterJSON = JsonUtils.toJson(new QQueryFilter()
-         .withCriteria(new QFilterCriteria("annualSalary", QCriteriaOperator.IS_NOT_BLANK)));
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
-      queryScreenLib.waitForQueryToHaveRan();
-      queryScreenLib.assertQuickFilterButtonBadge("annualSalary");
-      queryScreenLib.clickQuickFilterButton("annualSalary");
-      qSeleniumLib.waitForSelector("input[value=\"is not empty\"]");
-
-      ///////////////////////////////
-      // between on a number field //
-      ///////////////////////////////
-      filterJSON = JsonUtils.toJson(new QQueryFilter()
-         .withCriteria(new QFilterCriteria("annualSalary", QCriteriaOperator.BETWEEN, 1701, 74656)));
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
-      queryScreenLib.waitForQueryToHaveRan();
-      queryScreenLib.assertQuickFilterButtonBadge("annualSalary");
-      queryScreenLib.clickQuickFilterButton("annualSalary");
-      qSeleniumLib.waitForSelector("input[value=\"is between\"]");
-      qSeleniumLib.waitForSelector("input[value=\"1701\"]");
-      qSeleniumLib.waitForSelector("input[value=\"74656\"]");
-
-      //////////////////////////////////////////
-      // not-equals on a possible-value field //
-      //////////////////////////////////////////
-      filterJSON = JsonUtils.toJson(new QQueryFilter()
-         .withCriteria(new QFilterCriteria("homeCityId", QCriteriaOperator.NOT_EQUALS, 1)));
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
-      queryScreenLib.waitForQueryToHaveRan();
-      queryScreenLib.assertQuickFilterButtonBadge("homeCityId");
-      queryScreenLib.clickQuickFilterButton("homeCityId");
-      qSeleniumLib.waitForSelector("input[value=\"does not equal\"]");
-      qSeleniumLib.waitForSelector("input[value=\"St. Louis\"]");
-
-      //////////////////////////////////////
-      // an IN for a possible-value field //
-      //////////////////////////////////////
-      filterJSON = JsonUtils.toJson(new QQueryFilter()
-         .withCriteria(new QFilterCriteria("homeCityId", QCriteriaOperator.IN, 1, 2)));
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
-      queryScreenLib.waitForQueryToHaveRan();
-      queryScreenLib.assertQuickFilterButtonBadge("homeCityId");
-      queryScreenLib.clickQuickFilterButton("homeCityId");
-      qSeleniumLib.waitForSelector("input[value=\"is any of\"]");
-      qSeleniumLib.waitForSelectorContaining(".MuiChip-label", "St. Louis");
-      qSeleniumLib.waitForSelectorContaining(".MuiChip-label", "Chesterfield");
-
-      /////////////////////////////////////////
-      // greater than a date-time expression //
-      /////////////////////////////////////////
-      filterJSON = JsonUtils.toJson(new QQueryFilter()
-         .withCriteria(new QFilterCriteria("createDate", QCriteriaOperator.GREATER_THAN, NowWithOffset.minus(5, ChronoUnit.DAYS))));
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
-      queryScreenLib.waitForQueryToHaveRan();
-      queryScreenLib.assertQuickFilterButtonBadge("createDate");
-      queryScreenLib.clickQuickFilterButton("createDate");
-      qSeleniumLib.waitForSelector("input[value=\"is after\"]");
-      qSeleniumLib.waitForSelector("input[value=\"5 days ago\"]");
-
-      ///////////////////////
-      // multiple criteria //
-      ///////////////////////
-      filterJSON = JsonUtils.toJson(new QQueryFilter()
-         .withCriteria(new QFilterCriteria("firstName", QCriteriaOperator.STARTS_WITH, "Dar"))
-         .withCriteria(new QFilterCriteria("createDate", QCriteriaOperator.LESS_THAN_OR_EQUALS, ThisOrLastPeriod.this_(ChronoUnit.YEARS))));
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
-      queryScreenLib.waitForQueryToHaveRan();
-      queryScreenLib.assertQuickFilterButtonBadge("firstName");
-      queryScreenLib.assertQuickFilterButtonBadge("createDate");
-      queryScreenLib.clickQuickFilterButton("createDate");
-      qSeleniumLib.waitForSelector("input[value=\"is at or before\"]");
-      qSeleniumLib.waitForSelector("input[value=\"start of this year\"]");
-      qSeleniumLib.clickBackdrop();
-      queryScreenLib.clickQuickFilterButton("firstName");
-      qSeleniumLib.waitForSelector("input[value=\"starts with\"]");
-      qSeleniumLib.waitForSelector("input[value=\"Dar\"]");
-
-      ////////////////
-      // remove one //
-      ////////////////
-      // todo! qSeleniumLib.waitForSelectorContaining(".MuiIcon-root", "close").click();
-      // todo! assertQuickFilterButtonBadge(1);
-
-      // qSeleniumLib.waitForever();
-   }
-
-}

src/test/java/com/kingsrook/qqq/materialdashboard/lib/QBaseSeleniumTest.java

@@ -1,33 +1,7 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2024.  Kingsrook, LLC
- * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
- * contact@kingsrook.com
- * https://github.com/Kingsrook/
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-package com.kingsrook.qqq.frontend.materialdashboard.selenium.lib;
+package com.kingsrook.qqq.materialdashboard.lib;
 
 
-import java.io.File;
-import java.util.Arrays;
-import java.util.HashMap;
-import java.util.List;
-import com.kingsrook.qqq.backend.core.utils.CollectionUtils;
-import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.javalin.QSeleniumJavalin;
+import com.kingsrook.qqq.materialdashboard.lib.javalin.QSeleniumJavalin;
 import io.github.bonigarcia.wdm.WebDriverManager;
 import org.junit.jupiter.api.AfterEach;
 import org.junit.jupiter.api.BeforeAll;
@@ -37,7 +11,6 @@ import org.openqa.selenium.Dimension;
 import org.openqa.selenium.WebDriver;
 import org.openqa.selenium.chrome.ChromeDriver;
 import org.openqa.selenium.chrome.ChromeOptions;
-import static org.junit.jupiter.api.Assertions.fail;
 
 
 /*******************************************************************************
@@ -67,7 +40,7 @@ public class QBaseSeleniumTest
       String headless = System.getenv("QQQ_SELENIUM_HEADLESS");
       if("true".equals(headless))
       {
-         chromeOptions.addArguments("--headless=new");
+         chromeOptions.setHeadless(true);
       }
 
       WebDriverManager.chromiumdriver().setup();
@@ -81,15 +54,7 @@ public class QBaseSeleniumTest
    @BeforeEach
    public void beforeEach()
    {
-      manageDownloadsDirectory();
-
-      HashMap<String, Object> chromePrefs = new HashMap<>();
-      chromePrefs.put("profile.default_content_settings.popups", 0);
-      chromePrefs.put("download.default_directory", getDownloadsDirectory());
-      chromeOptions.setExperimentalOption("prefs", chromePrefs);
-
       driver = new ChromeDriver(chromeOptions);
-
       driver.manage().window().setSize(new Dimension(1700, 1300));
       qSeleniumLib = new QSeleniumLib(driver);
 
@@ -103,57 +68,6 @@ public class QBaseSeleniumTest
 
 
 
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   private void manageDownloadsDirectory()
-   {
-      File downloadsDirectory = new File(getDownloadsDirectory());
-      if(!downloadsDirectory.exists())
-      {
-         if(!downloadsDirectory.mkdir())
-         {
-            fail("Could not create downloads directory: " + downloadsDirectory);
-         }
-      }
-
-      if(!downloadsDirectory.isDirectory())
-      {
-         fail("Downloads directory: " + downloadsDirectory + " is not a directory.");
-      }
-
-      for(File file : CollectionUtils.nonNullArray(downloadsDirectory.listFiles()))
-      {
-         if(!file.delete())
-         {
-            fail("Could not remove a file from the downloads directory: " + file.getAbsolutePath());
-         }
-      }
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   protected String getDownloadsDirectory()
-   {
-      return ("/tmp/selenium-downloads");
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   protected List<File> getDownloadedFiles()
-   {
-      File[] downloadedFiles = CollectionUtils.nonNullArray((new File(getDownloadsDirectory())).listFiles());
-      return (Arrays.stream(downloadedFiles).toList());
-   }
-
-
-
    /*******************************************************************************
     ** control if the test needs to start its own javalin server, or if we're running
     ** in an environment where an external web server is being used.

src/test/java/com/kingsrook/qqq/materialdashboard/lib/QQQMaterialDashboardSelectors.java

@@ -0,0 +1,14 @@
+package com.kingsrook.qqq.materialdashboard.lib;
+
+
+/*******************************************************************************
+ ** constants to define css selectors for common QQQ material dashboard elements.
+ *******************************************************************************/
+public interface QQQMaterialDashboardSelectors
+{
+   String SIDEBAR_ITEM      = ".MuiDrawer-paperAnchorDockedLeft li.MuiListItem-root";
+   String BREADCRUMB_HEADER = ".MuiToolbar-root h5";
+
+   String QUERY_GRID_CELL    = ".MuiDataGrid-root .MuiDataGrid-cellContent";
+   String QUERY_FILTER_INPUT = ".customFilterPanel input.MuiInput-input";
+}

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

@@ -1,25 +1,4 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2024.  Kingsrook, LLC
- * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
- * contact@kingsrook.com
- * https://github.com/Kingsrook/
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-package com.kingsrook.qqq.frontend.materialdashboard.selenium.lib;
+package com.kingsrook.qqq.materialdashboard.lib;
 
 
 import java.io.File;
@@ -27,15 +6,11 @@ import java.time.Duration;
 import java.util.List;
 import java.util.Objects;
 import java.util.Set;
-import java.util.concurrent.CompletableFuture;
-import java.util.concurrent.TimeUnit;
-import com.kingsrook.qqq.backend.core.utils.SleepUtils;
 import org.apache.commons.io.FileUtils;
 import org.apache.logging.log4j.LogManager;
 import org.apache.logging.log4j.Logger;
 import org.openqa.selenium.By;
 import org.openqa.selenium.JavascriptExecutor;
-import org.openqa.selenium.NoSuchElementException;
 import org.openqa.selenium.OutputType;
 import org.openqa.selenium.StaleElementReferenceException;
 import org.openqa.selenium.WebDriver;
@@ -61,8 +36,6 @@ public class QSeleniumLib
    private boolean SCREENSHOTS_ENABLED = true;
    private String  SCREENSHOTS_PATH    = "/tmp/QSeleniumScreenshots/";
 
-   private boolean autoHighlight = false;
-
 
 
    /*******************************************************************************
@@ -209,38 +182,12 @@ public class QSeleniumLib
 
 
 
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public void clickBackdrop()
-   {
-      for(WebElement webElement : this.waitForSelectorAll(".MuiBackdrop-root", 0))
-      {
-         try
-         {
-            webElement.click();
-         }
-         catch(Exception e)
-         {
-            // ignore.
-         }
-      }
-   }
-
-
-
    /*******************************************************************************
     **
     *******************************************************************************/
    public WebElement waitForSelector(String cssSelector)
    {
-      WebElement element = waitForSelectorAll(cssSelector, 1).get(0);
-
-      Actions actions = new Actions(driver);
-      actions.moveToElement(element);
-
-      conditionallyAutoHighlight(element);
-      return element;
+      return (waitForSelectorAll(cssSelector, 1).get(0));
    }
 
 
@@ -283,7 +230,7 @@ public class QSeleniumLib
       do
       {
          List<WebElement> elements = driver.findElements(By.cssSelector(cssSelector));
-         if(elements.isEmpty())
+         if(elements.size() == 0)
          {
             LOG.debug("Found non-existence of element(s) matching selector [" + cssSelector + "]");
             return;
@@ -309,7 +256,7 @@ public class QSeleniumLib
       do
       {
          List<WebElement> elements = driver.findElements(By.cssSelector(cssSelector));
-         if(elements.isEmpty())
+         if(elements.size() == 0)
          {
             LOG.debug("Found non-existence of element(s) matching selector [" + cssSelector + "]");
             return;
@@ -383,22 +330,6 @@ public class QSeleniumLib
 
 
 
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   private void soonUnhighlightElement(WebElement element)
-   {
-      CompletableFuture.supplyAsync(() ->
-      {
-         SleepUtils.sleep(2, TimeUnit.SECONDS);
-         JavascriptExecutor js = (JavascriptExecutor) driver;
-         js.executeScript("arguments[0].setAttribute('style', 'background: unset; border: unset;');", element);
-         return (true);
-      });
-   }
-
-
-
    /*******************************************************************************
     **
     *******************************************************************************/
@@ -449,10 +380,7 @@ public class QSeleniumLib
    @FunctionalInterface
    public interface Code<T>
    {
-      /*******************************************************************************
-       **
-       *******************************************************************************/
-      T run();
+      public T run();
    }
 
 
@@ -502,7 +430,6 @@ public class QSeleniumLib
                   LOG.debug("Found element matching selector [" + cssSelector + "] containing text [" + textContains + "].");
                   Actions actions = new Actions(driver);
                   actions.moveToElement(element);
-                  conditionallyAutoHighlight(element);
                   return (element);
                }
             }
@@ -510,10 +437,6 @@ public class QSeleniumLib
             {
                LOG.debug("Caught a StaleElementReferenceException - will retry.");
             }
-            catch(NoSuchElementException nsee)
-            {
-               LOG.debug("Caught a NoSuchElementException - will retry.");
-            }
          }
 
          sleepABit();
@@ -526,20 +449,6 @@ public class QSeleniumLib
 
 
 
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   private void conditionallyAutoHighlight(WebElement element)
-   {
-      if(autoHighlight && System.getenv("CIRCLECI") == null)
-      {
-         highlightElement(element);
-         soonUnhighlightElement(element);
-      }
-   }
-
-
-
    /*******************************************************************************
     ** Take a screenshot, putting it in the SCREENSHOTS_PATH, with a subdirectory
     ** for the test class simple name, filename = methodName.png.
@@ -569,8 +478,7 @@ public class QSeleniumLib
             destFile.mkdirs();
             if(destFile.exists())
             {
-               String newFileName = destFile.getAbsolutePath().replaceFirst("\\.png", "-" + System.currentTimeMillis() + ".png");
-               destFile.renameTo(new File(newFileName));
+               destFile.delete();
             }
             FileUtils.moveFile(outputFile, destFile);
             LOG.info("Made screenshot at: " + destFile);
@@ -647,48 +555,4 @@ public class QSeleniumLib
       }
    }
 
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public String getLatestChromeDownloadedFileInfo()
-   {
-      driver.get("chrome://downloads/");
-      JavascriptExecutor js      = (JavascriptExecutor) driver;
-      WebElement         element = (WebElement) js.executeScript("return document.querySelector('downloads-manager').shadowRoot.querySelector('#mainContainer > iron-list > downloads-item').shadowRoot.querySelector('#content')");
-      return (element.getText());
-   }
-
-
-
-   /*******************************************************************************
-    ** Getter for autoHighlight
-    *******************************************************************************/
-   public boolean getAutoHighlight()
-   {
-      return (this.autoHighlight);
-   }
-
-
-
-   /*******************************************************************************
-    ** Setter for autoHighlight
-    *******************************************************************************/
-   public void setAutoHighlight(boolean autoHighlight)
-   {
-      this.autoHighlight = autoHighlight;
-   }
-
-
-
-   /*******************************************************************************
-    ** Fluent setter for autoHighlight
-    *******************************************************************************/
-   public QSeleniumLib withAutoHighlight(boolean autoHighlight)
-   {
-      this.autoHighlight = autoHighlight;
-      return (this);
-   }
-
 }

src/test/java/com/kingsrook/qqq/materialdashboard/lib/javalin/CapturedContext.java

@@ -1,25 +1,4 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2024.  Kingsrook, LLC
- * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
- * contact@kingsrook.com
- * https://github.com/Kingsrook/
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-package com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.javalin;
+package com.kingsrook.qqq.materialdashboard.lib.javalin;
 
 
 import io.javalin.http.Context;

src/test/java/com/kingsrook/qqq/materialdashboard/lib/javalin/CapturingHandler.java

@@ -1,25 +1,4 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2024.  Kingsrook, LLC
- * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
- * contact@kingsrook.com
- * https://github.com/Kingsrook/
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-package com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.javalin;
+package com.kingsrook.qqq.materialdashboard.lib.javalin;
 
 
 import io.javalin.http.Context;

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

@@ -1,25 +1,4 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2024.  Kingsrook, LLC
- * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
- * contact@kingsrook.com
- * https://github.com/Kingsrook/
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-package com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.javalin;
+package com.kingsrook.qqq.materialdashboard.lib.javalin;
 
 
 import java.util.ArrayList;
@@ -27,7 +6,7 @@ import java.util.Collections;
 import java.util.LinkedHashMap;
 import java.util.List;
 import java.util.Map;
-import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QSeleniumLib;
+import com.kingsrook.qqq.materialdashboard.lib.QSeleniumLib;
 import io.javalin.Javalin;
 import org.apache.logging.log4j.LogManager;
 import org.apache.logging.log4j.Logger;

src/test/java/com/kingsrook/qqq/materialdashboard/lib/javalin/RouteFromFileHandler.java

@@ -1,25 +1,4 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2024.  Kingsrook, LLC
- * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
- * contact@kingsrook.com
- * https://github.com/Kingsrook/
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-package com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.javalin;
+package com.kingsrook.qqq.materialdashboard.lib.javalin;
 
 
 import java.nio.charset.StandardCharsets;

src/test/java/com/kingsrook/qqq/materialdashboard/lib/javalin/RouteFromStringHandler.java

@@ -1,25 +1,4 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2024.  Kingsrook, LLC
- * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
- * contact@kingsrook.com
- * https://github.com/Kingsrook/
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-package com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.javalin;
+package com.kingsrook.qqq.materialdashboard.lib.javalin;
 
 
 import io.javalin.http.Context;

src/test/java/com/kingsrook/qqq/materialdashboard/tests/AppPageNavTest.java

@@ -1,6 +1,6 @@
 /*
  * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2024.  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,12 +19,12 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-package com.kingsrook.qqq.frontend.materialdashboard.selenium.tests;
+package com.kingsrook.qqq.materialdashboard.tests;
 
 
-import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QBaseSeleniumTest;
-import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QQQMaterialDashboardSelectors;
-import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.javalin.QSeleniumJavalin;
+import com.kingsrook.qqq.materialdashboard.lib.QBaseSeleniumTest;
+import com.kingsrook.qqq.materialdashboard.lib.QQQMaterialDashboardSelectors;
+import com.kingsrook.qqq.materialdashboard.lib.javalin.QSeleniumJavalin;
 import org.junit.jupiter.api.Test;
 
 

src/test/java/com/kingsrook/qqq/materialdashboard/tests/AssociatedRecordScriptTest.java

@@ -1,6 +1,6 @@
 /*
  * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2024.  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,11 +19,11 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-package com.kingsrook.qqq.frontend.materialdashboard.selenium.tests;
+package com.kingsrook.qqq.materialdashboard.tests;
 
 
-import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QBaseSeleniumTest;
-import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.javalin.QSeleniumJavalin;
+import com.kingsrook.qqq.materialdashboard.lib.QBaseSeleniumTest;
+import com.kingsrook.qqq.materialdashboard.lib.javalin.QSeleniumJavalin;
 import org.junit.jupiter.api.Test;
 import static org.junit.jupiter.api.Assertions.assertTrue;
 
@@ -59,7 +59,7 @@ public class AssociatedRecordScriptTest extends QBaseSeleniumTest
       qSeleniumLib.waitForSelectorContaining("LI", "Developer Mode").click();
       assertTrue(qSeleniumLib.driver.getCurrentUrl().endsWith("/1/dev"));
 
-      // qSeleniumLib.waitForever();
+      qSeleniumLib.waitForever();
    }
 
 }

src/test/java/com/kingsrook/qqq/materialdashboard/tests/AuditTest.java

@@ -1,6 +1,6 @@
 /*
  * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2024.  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,13 +19,13 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-package com.kingsrook.qqq.frontend.materialdashboard.selenium.tests;
+package com.kingsrook.qqq.materialdashboard.tests;
 
 
 import java.util.List;
-import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QBaseSeleniumTest;
-import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.javalin.CapturedContext;
-import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.javalin.QSeleniumJavalin;
+import com.kingsrook.qqq.materialdashboard.lib.QBaseSeleniumTest;
+import com.kingsrook.qqq.materialdashboard.lib.javalin.CapturedContext;
+import com.kingsrook.qqq.materialdashboard.lib.javalin.QSeleniumJavalin;
 import org.junit.jupiter.api.Test;
 import org.openqa.selenium.WebElement;
 import static org.assertj.core.api.Assertions.assertThat;

src/test/java/com/kingsrook/qqq/materialdashboard/tests/BulkEditTest.java

@@ -1,6 +1,6 @@
 /*
  * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2024.  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,11 +19,11 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-package com.kingsrook.qqq.frontend.materialdashboard.selenium.tests;
+package com.kingsrook.qqq.materialdashboard.tests;
 
 
-import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QBaseSeleniumTest;
-import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.javalin.QSeleniumJavalin;
+import com.kingsrook.qqq.materialdashboard.lib.QBaseSeleniumTest;
+import com.kingsrook.qqq.materialdashboard.lib.javalin.QSeleniumJavalin;
 import org.junit.jupiter.api.Test;
 
 

src/test/java/com/kingsrook/qqq/materialdashboard/tests/ClickLinkOnRecordThenEditShortcutTest.java

@@ -1,6 +1,6 @@
 /*
  * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2024.  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,19 +19,17 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-package com.kingsrook.qqq.frontend.materialdashboard.selenium.tests;
+package com.kingsrook.qqq.materialdashboard.tests;
 
 
-import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QBaseSeleniumTest;
-import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.javalin.QSeleniumJavalin;
+import com.kingsrook.qqq.materialdashboard.lib.QBaseSeleniumTest;
+import com.kingsrook.qqq.materialdashboard.lib.javalin.QSeleniumJavalin;
 import org.junit.jupiter.api.Test;
 import static org.junit.jupiter.api.Assertions.assertTrue;
 
 
 /*******************************************************************************
- ** Test that goes to a record, clicks a link for another record, then
- ** hits 'e' on keyboard to edit the second record - and confirms that we're
- ** on the edit url for the second record, not the first (a former bug).
+ ** Test for Associated Record Scripts functionality.
  *******************************************************************************/
 public class ClickLinkOnRecordThenEditShortcutTest extends QBaseSeleniumTest
 {