Add recently viewed / history; add AdornmentType.RENDER_HTML; add FieldValueListWidget

src/index.tsx

@@ -32,6 +32,12 @@ import ProtectedRoute from "qqq/auth0/protected-route";
 import QClient from "qqq/utils/QClient";
 
 const qController = QClient.getInstance();
+
+if(document.location.search && document.location.search.indexOf("clearAuthenticationMetaDataLocalStorage") > -1)
+{
+   qController.clearAuthenticationMetaDataLocalStorage()
+}
+
 const authenticationMetaDataPromise: Promise<QAuthenticationMetaData> = qController.getAuthenticationMetaData()
 
 authenticationMetaDataPromise.then((authenticationMetaData) =>
@@ -69,8 +75,28 @@ authenticationMetaDataPromise.then((authenticationMetaData) =>
 
    if (authenticationMetaData.type === "AUTH_0")
    {
-      const domain = process.env.REACT_APP_AUTH0_DOMAIN;
+      // @ts-ignore
-      const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
+      let domain: string = authenticationMetaData.data.baseUrl;
+
+      // @ts-ignore
+      const clientId = authenticationMetaData.data.clientId;
+
+      if(!domain || !clientId)
+      {
+         render(
+            <div>Error:  AUTH0 authenticationMetaData is missing domain [{domain}] and/or clientId [{clientId}].</div>,
+            document.getElementById("root"),
+         );
+         return;
+      }
+
+      if(domain.endsWith("/"))
+      {
+         /////////////////////////////////////////////////////////////////////////////////////
+         // auth0 lib fails if we have a trailing slash.  be a bit more graceful than that. //
+         /////////////////////////////////////////////////////////////////////////////////////
+         domain = domain.replace(/\/$/, "");
+      }
 
       render(
          <BrowserRouter>

src/qqq/components/DashboardWidgets.tsx

@@ -32,6 +32,7 @@ import MDBox from "qqq/components/Temporary/MDBox";
 import MDTypography from "qqq/components/Temporary/MDTypography";
 import BarChart from "qqq/pages/dashboards/Widgets/BarChart";
 import DefaultLineChart from "qqq/pages/dashboards/Widgets/DefaultLineChart";
+import FieldValueListWidget from "qqq/pages/dashboards/Widgets/FieldValueListWidget";
 import HorizontalBarChart from "qqq/pages/dashboards/Widgets/HorizontalBarChart";
 import MultiStatisticsCard from "qqq/pages/dashboards/Widgets/MultiStatisticsCard";
 import ParentWidget from "qqq/pages/dashboards/Widgets/ParentWidget";
@@ -259,10 +260,19 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGri
             {
                widgetMetaData.type === "childRecordList" && (
                   widgetData && widgetData[i] &&
-                     <RecordGridWidget
+                  <RecordGridWidget
+                     title={widgetMetaData.label}
+                     data={widgetData[i]}
+                     reloadWidgetCallback={reloadWidget}
+                  />
+               )
+            }
+            {
+               widgetMetaData.type === "fieldValueList" && (
+                  widgetData && widgetData[i] &&
+                     <FieldValueListWidget
                         title={widgetMetaData.label}
                         data={widgetData[i]}
-                        reloadWidgetCallback={reloadWidget}
                      />
                )
             }

src/qqq/components/EntityForm/index.tsx

@@ -55,7 +55,7 @@ interface Props
    table?: QTableMetaData;
    closeModalHandler?: (event: object, reason: string) => void;
    defaultValues: { [key: string]: string };
-   disabledFields: { [key: string]: boolean };
+   disabledFields: { [key: string]: boolean } | string[];
 }
 
 EntityForm.defaultProps = {
@@ -265,9 +265,19 @@ function EntityForm(props: Props): JSX.Element
 
          if(disabledFields)
          {
-            for (let fieldName in disabledFields)
+            if(Array.isArray(disabledFields))
             {
-               dynamicFormFields[fieldName].isEditable = false;
+               for (let i = 0; i < disabledFields.length; i++)
+               {
+                  dynamicFormFields[disabledFields[i]].isEditable = false;
+               }
+            }
+            else
+            {
+               for (let fieldName in disabledFields)
+               {
+                  dynamicFormFields[fieldName].isEditable = false;
+               }
             }
          }
 

src/qqq/components/Navbar/index.tsx

@@ -22,10 +22,12 @@
 import AppBar from "@mui/material/AppBar";
 import Icon from "@mui/material/Icon";
 import IconButton from "@mui/material/IconButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
 import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
 import Toolbar from "@mui/material/Toolbar";
-import {useState, useEffect} from "react";
+import React, {useState, useEffect} from "react";
-import {useLocation} from "react-router-dom";
+import {useLocation, useNavigate} from "react-router-dom";
 import {useMaterialUIController, setTransparentNavbar, setMiniSidenav, setOpenConfigurator,} from "context";
 import {navbar, navbarContainer, navbarRow, navbarIconButton, navbarDesktopMenu, navbarMobileMenu,} from "qqq/components/Navbar/styles";
 import QBreadcrumbs, {routeToLabel} from "qqq/components/QBreadcrumbs";
@@ -33,6 +35,7 @@ import MDBadge from "qqq/components/Temporary/MDBadge";
 import MDBox from "qqq/components/Temporary/MDBox";
 import MDInput from "qqq/components/Temporary/MDInput";
 import NotificationItem from "qqq/components/Temporary/NotificationItem";
+import HistoryUtils, {QHistoryEntry} from "qqq/utils/HistoryUtils";
 
 // Declaring prop types for Navbar
 interface Props
@@ -50,7 +53,9 @@ function Navbar({absolute, light, isMini}: Props): JSX.Element
       miniSidenav, transparentNavbar, fixedNavbar, openConfigurator, darkMode,
    } = controller;
    const [openMenu, setOpenMenu] = useState<any>(false);
+   const [openHistory, setOpenHistory] = useState<any>(false);
    const route = useLocation().pathname.split("/").slice(1);
+   const navigate = useNavigate();
 
    useEffect(() =>
    {
@@ -88,6 +93,52 @@ function Navbar({absolute, light, isMini}: Props): JSX.Element
    const handleOpenMenu = (event: any) => setOpenMenu(event.currentTarget);
    const handleCloseMenu = () => setOpenMenu(false);
 
+   const handleHistory = (event: any) =>
+   {
+      setOpenHistory(event.currentTarget);
+   }
+
+   const handleCloseHistory = () =>
+   {
+      setOpenHistory(false);
+   }
+
+   const goToHistory = (entry: QHistoryEntry) =>
+   {
+      navigate(entry.path);
+      handleCloseHistory();
+   }
+
+   const renderHistory = () =>
+   {
+      const history = HistoryUtils.get();
+
+      return (
+         <Menu
+            anchorEl={openHistory}
+            anchorReference={null}
+            anchorOrigin={{
+               vertical: "bottom",
+               horizontal: "left",
+            }}
+            open={Boolean(openHistory)}
+            onClose={handleCloseHistory}
+            sx={{mt: 1, "& ul": {maxWidth: "500px"}}}
+         >
+            <MenuItem sx={{px: "8px"}} disabled><h3 style={{color: "black"}}>Recently Viewed Records</h3></MenuItem>
+            {history.entries.reverse().map((entry) =>
+               (
+                  <MenuItem sx={{px: "8px", whiteSpace: "normal"}} key={entry.path} onClick={() => goToHistory(entry)}>
+                     <ListItemIcon sx={{minWidth: "24px !important"}}><Icon>{entry.iconName}</Icon></ListItemIcon>
+                     {entry.label}
+                  </MenuItem>
+               )
+            )}
+         </Menu>
+      );
+   };
+
+
    // Render the notifications menu
    const renderMenu = () => (
       <Menu
@@ -166,6 +217,16 @@ function Navbar({absolute, light, isMini}: Props): JSX.Element
                            {miniSidenav ? "menu_open" : "menu"}
                         </Icon>
                      </IconButton>
+                     <IconButton
+                        size="small"
+                        disableRipple
+                        color="inherit"
+                        sx={navbarIconButton}
+                        onClick={handleHistory}
+                     >
+                        <Icon sx={iconsStyle}>history</Icon>
+                     </IconButton>
+                     {renderHistory()}
                      <IconButton
                         size="small"
                         disableRipple

src/qqq/pages/dashboards/Widgets/FieldValueListWidget.tsx

@@ -0,0 +1,98 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
+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 QValueUtils from "qqq/utils/QValueUtils";
+import Widget from "./Widget";
+
+interface Props
+{
+   title: string;
+   data: any;
+}
+
+FieldValueListWidget.defaultProps = {};
+
+function FieldValueListWidget({title, data}: Props): JSX.Element
+{
+   if(!data.fields || !data.record)
+   {
+      const skeletons = [75, 50, 90];
+      return (
+         <Widget label={title}>
+            <Box p={3} pt={0} display="flex" flexDirection="column">
+               {skeletons.map((s) => 
+                  (
+                     <Box key={s} display="flex" flexDirection="row" pr={2}>
+                        <Typography variant="button" pr={2}>
+                           <Skeleton width={s + "px"} />
+                        </Typography>
+                        <Typography variant="button">
+                           <Skeleton width={2*(s + (100 - (1.25*s))) + "px"} />
+                        </Typography>
+                     </Box>
+                  ))
+               }
+            </Box>
+         </Widget>
+      );
+   }
+
+   const fields = data.fields.map((f: any) => new QFieldMetaData(f));
+   const record = new QRecord(data.record);
+   const fieldLabelPrefixIconNames = data.fieldLabelPrefixIconNames ?? {};
+   const fieldLabelPrefixIconColors = data.fieldLabelPrefixIconColors ?? {};
+   const fieldIndentLevels = data.fieldIndentLevels ?? {};
+
+   return (
+      <Widget label={title}>
+         <Box p={3} pt={0} display="flex" flexDirection="column">
+            {
+               fields.map((field: QFieldMetaData, index: number) => (
+                  <Box key={field.label} flexDirection="row" pr={2} pl={3 * (fieldIndentLevels[field.name] ?? 0)}>
+                     {
+                        fieldLabelPrefixIconNames[field.name] &&
+                        <Icon color={fieldLabelPrefixIconColors[field.name] ?? "primary"} sx={{position: "relative", top: "4px", paddingRight: "8px", width: "24px"}}>{fieldLabelPrefixIconNames[field.name]}</Icon>
+                     }
+                     {
+                        field.label &&
+                        <Typography variant="button" fontWeight="bold" pr={1} sx={{textTransform: "none", color: "#344767"}}>
+                           {field.label}:
+                        </Typography>
+                     }
+                     <Typography variant="button" fontWeight="regular" color="text" sx={{textTransform: "none", color: "#7b809a", fontWeight: 400}}>
+                        {QValueUtils.getDisplayValue(field, record, "view")}
+                     </Typography>
+                  </Box>
+               ))
+            }
+         </Box>
+      </Widget>
+   );
+}
+
+export default FieldValueListWidget;

src/qqq/pages/dashboards/Widgets/RecordGridWidget.tsx

@@ -74,7 +74,12 @@ function RecordGridWidget({title, data, reloadWidgetCallback}: Props): JSX.Eleme
    const labelAdditionalComponentsRight: LabelComponent[] = []
    if(data && data.canAddChildRecord)
    {
-      labelAdditionalComponentsRight.push(new AddNewRecordButton(data.childTableMetaData, data.defaultValuesForNewChildRecords))
+      let disabledFields = data.disabledFieldsForNewChildRecords;
+      if(!disabledFields)
+      {
+         disabledFields = data.defaultValuesForNewChildRecords;
+      }
+      labelAdditionalComponentsRight.push(new AddNewRecordButton(data.childTableMetaData, data.defaultValuesForNewChildRecords, "Add new", disabledFields))
    }
 
    return (

src/qqq/pages/dashboards/Widgets/StepperCard.tsx

@@ -20,7 +20,7 @@
  */
 
 import {Check, Pending, RocketLaunch} from "@mui/icons-material";
-import {Skeleton, StepConnector} from "@mui/material";
+import {Icon, Skeleton, StepConnector} from "@mui/material";
 import Step from "@mui/material/Step";
 import StepLabel from "@mui/material/StepLabel";
 import Stepper from "@mui/material/Stepper";
@@ -38,10 +38,11 @@ export interface StepperCardData
    title: string;
    activeStep: number;
    steps: {
-      icon: string;
       label: string;
       linkText: string;
       linkURL: string;
+      iconOverride: string;
+      colorOverride: string;
    }[];
 }
 
@@ -79,12 +80,12 @@ function StepperCard({data}: Props): JSX.Element
                      {
                         index < activeStep && (
                            <MDBox>
-                              <StepLabel icon={<Check />} sx={{
+                              <StepLabel icon={step.iconOverride ? <Icon>{step.iconOverride}</Icon> : <Check />} sx={{
-                                 color: "green",
+                                 color: step.colorOverride ?? "green",
                                  fontSize: "35px",
                                  "& .MuiStepLabel-label.Mui-completed.MuiStepLabel-alternativeLabel":
                                     {
-                                       color: "green !important",
+                                       color: `${step.colorOverride ?? "green"} !important`,
                                     }
                               }}>{step.label}</StepLabel>
                            </MDBox>
@@ -93,12 +94,12 @@ function StepperCard({data}: Props): JSX.Element
                      {
                         index > activeStep && (
                            <MDBox>
-                              <StepLabel icon={<Pending />} sx={{
+                              <StepLabel icon={step.iconOverride ? <Icon>{step.iconOverride}</Icon> : <Pending />} sx={{
-                                 color: "#ced4da",
+                                 color: step.colorOverride ?? "#ced4da",
                                  fontSize: "35px",
                                  "& .MuiStepLabel-label.MuiStepLabel-alternativeLabel":
                                     {
-                                       color: "#ced4da !important",
+                                       color: `${step.colorOverride ?? "#ced4da"} !important`,
                                     }
                               }}>{step.label}</StepLabel>
                            </MDBox>
@@ -107,12 +108,12 @@ function StepperCard({data}: Props): JSX.Element
                      {
                         index === activeStep && (
                            <MDBox>
-                              <StepLabel icon={<RocketLaunch />} sx={{
+                              <StepLabel icon={step.iconOverride ? <Icon>{step.iconOverride}</Icon> : <RocketLaunch />} sx={{
-                                 color: "#04aaef",
+                                 color: step.colorOverride ?? "#04aaef",
                                  fontSize: "35px",
                                  "& .MuiStepLabel-label.MuiStepLabel-alternativeLabel":
                                     {
-                                       color: "#344767 !important", // Just text label (COMPLETED)
+                                       color: `${step.colorOverride ?? "#344767"} !important`,
                                     }
                               }}>{step.label}</StepLabel>
                               {

src/qqq/pages/entity-view/EntityView.tsx

@@ -54,6 +54,7 @@ import MDAlert from "qqq/components/Temporary/MDAlert";
 import MDBox from "qqq/components/Temporary/MDBox";
 import MDTypography from "qqq/components/Temporary/MDTypography";
 import ProcessRun from "qqq/pages/process-run";
+import HistoryUtils from "qqq/utils/HistoryUtils";
 import QClient from "qqq/utils/QClient";
 import QProcessUtils from "qqq/utils/QProcessUtils";
 import QTableUtils from "qqq/utils/QTableUtils";
@@ -109,6 +110,7 @@ function EntityView({table, launchProcess}: Props): JSX.Element
 
    const reload = () =>
    {
+      setNotFoundMessage(null);
       setAsyncLoadInited(false);
       setTableMetaData(null);
       setRecord(null);
@@ -258,6 +260,16 @@ function EntityView({table, launchProcess}: Props): JSX.Element
                if ((e as QException).status === "404")
                {
                   setNotFoundMessage(`${tableMetaData.label} ${id} could not be found.`);
+
+                  try
+                  {
+                     HistoryUtils.ensurePathNotInHistory(location.pathname);
+                  }
+                  catch(e)
+                  {
+                     console.error("Error pushing history: " + e);
+                  }
+
                   return;
                }
             }
@@ -265,6 +277,16 @@ function EntityView({table, launchProcess}: Props): JSX.Element
 
          setPageHeader(record.recordLabel);
 
+         try
+         {
+            HistoryUtils.push({label: `${tableMetaData?.label}: ${record.recordLabel}`, path: location.pathname, iconName: table.iconName})
+         }
+         catch(e)
+         {
+            console.error("Error pushing history: " + e);
+         }
+
+
          /////////////////////////////////////////////////
          // define the sections, e.g., for the left-bar //
          /////////////////////////////////////////////////

src/qqq/utils/HistoryUtils.tsx

@@ -0,0 +1,107 @@
+/*
+ * 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/>.
+ */
+
+export interface QHistoryEntry
+{
+   iconName: string;
+   label: string;
+   path: string;
+   date?: Date;
+}
+
+export interface QHistory
+{
+   entries: QHistoryEntry[];
+}
+
+
+export default class HistoryUtils
+{
+   private static LS_KEY = "qqq.history";
+
+
+   /*******************************************************************************
+    ** Push an entry into the history
+    *******************************************************************************/
+   public static push = (entry: QHistoryEntry) =>
+   {
+      const history = HistoryUtils.get();
+
+      if(!entry.date)
+      {
+         entry.date = new Date()
+      }
+
+      for (let i = 0; i < history.entries.length; i++)
+      {
+         if(history.entries[i].path == entry.path)
+         {
+            history.entries.splice(i, 1);
+         }
+      }
+
+      history.entries.push(entry);
+
+      if(history.entries.length > 20)
+      {
+         history.entries.splice(0, history.entries.length - 3);
+      }
+
+      localStorage.setItem(HistoryUtils.LS_KEY, JSON.stringify(history));
+   };
+
+
+
+   /*******************************************************************************
+    ** Get the history
+    *******************************************************************************/
+   public static get = (): QHistory =>
+   {
+      const existingJSON = localStorage.getItem(HistoryUtils.LS_KEY);
+      const history: QHistory = existingJSON ? JSON.parse(existingJSON) : {}
+      if(!history.entries)
+      {
+         history.entries = [];
+      }
+
+      return (history);
+   };
+
+
+   /*******************************************************************************
+    ** make sure a specific path isn't in the history (e.g., after a 404)
+    *******************************************************************************/
+   public static ensurePathNotInHistory(path: string)
+   {
+      const history = HistoryUtils.get();
+
+      for (let i = 0; i < history.entries.length; i++)
+      {
+         if(history.entries[i].path == path)
+         {
+            history.entries.splice(i, 1);
+         }
+      }
+
+      localStorage.setItem(HistoryUtils.LS_KEY, JSON.stringify(history));
+   }
+}
+

src/qqq/utils/QValueUtils.tsx

@@ -26,6 +26,7 @@ import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstan
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
 import "datejs";
 import {Box, Chip, Icon} from "@mui/material";
+import parse from "html-react-parser";
 import React, {Fragment} from "react";
 import AceEditor from "react-ace";
 import {Link} from "react-router-dom";
@@ -67,7 +68,7 @@ class QValueUtils
     ** When you have a field, and a record - call this method to get a string or
     ** element back to display the field's value.
     *******************************************************************************/
-   public static getDisplayValue(field: QFieldMetaData, record: QRecord, usage: "view" | "query" = "view"): string | JSX.Element
+   public static getDisplayValue(field: QFieldMetaData, record: QRecord, usage: "view" | "query" = "view"): string | JSX.Element | JSX.Element[]
    {
       const displayValue = record.displayValues ? record.displayValues.get(field.name) : undefined;
       const rawValue = record.values ? record.values.get(field.name) : undefined;
@@ -79,7 +80,7 @@ class QValueUtils
     ** When you have a field and a value (either just a raw value, or a raw and
     ** display value), call this method to get a string Element to display.
     *******************************************************************************/
-   public static getValueForDisplay(field: QFieldMetaData, rawValue: any, displayValue: any = rawValue, usage: "view" | "query" = "view"): string | JSX.Element
+   public static getValueForDisplay(field: QFieldMetaData, rawValue: any, displayValue: any = rawValue, usage: "view" | "query" = "view"): string | JSX.Element | JSX.Element[]
    {
       if (field.hasAdornment(AdornmentType.LINK))
       {
@@ -128,6 +129,11 @@ class QValueUtils
          }
       }
 
+      if (field.hasAdornment(AdornmentType.RENDER_HTML))
+      {
+         return (parse(rawValue));
+      }
+
       if (field.hasAdornment(AdornmentType.CHIP))
       {
          if (!displayValue)