Move more into branding; proxy /images to backend (e.g., more overlays)

src/qqq/components/horseshoe/Footer.tsx

@@ -40,6 +40,11 @@ interface Props
    [key: string]: any;
 }
 
+Footer.defaultProps = {
+   company: {href: "", name: ""},
+   links: [],
+};
+
 function Footer({company, links}: Props): JSX.Element
 {
    const {href, name} = company;
@@ -67,27 +72,30 @@ function Footer({company, links}: Props): JSX.Element
             position: "fixed", bottom: "0px", zIndex: -1, marginBottom: "10px",
          }}
       >
-         <Box
-            display="flex"
-            justifyContent="center"
-            alignItems="center"
-            flexWrap="wrap"
-            color="text"
-            fontSize={size.sm}
-            px={1.5}
-         >
-            &copy;
-            {" "}
-            {new Date().getFullYear()}
-            ,
-            <Link href={href} target="_blank">
-               <MDTypography variant="button" fontWeight="medium">
-                  &nbsp;
-                  {name}
-                  &nbsp;
-               </MDTypography>
-            </Link>
-         </Box>
+         {
+            href && name &&
+            <Box
+               display="flex"
+               justifyContent="center"
+               alignItems="center"
+               flexWrap="wrap"
+               color="text"
+               fontSize={size.sm}
+               px={1.5}
+            >
+               &copy;
+               {" "}
+               {new Date().getFullYear()}
+               ,
+               <Link href={href} target="_blank">
+                  <MDTypography variant="button" fontWeight="medium">
+                     &nbsp;
+                     {name}
+                     &nbsp;
+                  </MDTypography>
+               </Link>
+            </Box>
+         }
          <Box
             component="ul"
             sx={({breakpoints}) => ({
@@ -111,10 +119,4 @@ function Footer({company, links}: Props): JSX.Element
    );
 }
 
-// Declaring default props for Footer
-Footer.defaultProps = {
-   company: {href: "https://www.nutrifreshservices.com/", name: "Nutrifresh Services"},
-   links: [],
-};
-
 export default Footer;

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

@@ -41,7 +41,7 @@ interface Props
    color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
    icon?: string;
    logo?: string;
-   companyName?: string;
+   appName?: string;
    routes: {
       [key: string]:
          | ReactNode
@@ -64,7 +64,7 @@ interface Props
    [key: string]: any;
 }
 
-function Sidenav({color, icon, logo, companyName, routes, ...rest}: Props): JSX.Element
+function Sidenav({color, icon, logo, appName, routes, ...rest}: Props): JSX.Element
 {
    const [openCollapse, setOpenCollapse] = useState<boolean | string>(false);
    const [openNestedCollapse, setOpenNestedCollapse] = useState<boolean | string>(false);
@@ -319,11 +319,11 @@ function Sidenav({color, icon, logo, companyName, routes, ...rest}: Props): JSX.
                </MDTypography>
             </Box>
             <Box component={NavLink} to="/" display="flex" alignItems="center">
-               {!miniSidenav && logo && <Box component="img" src={logo} alt="Logo" width="100%" />}
-               {miniSidenav && icon && <Box component="img" src={icon} alt="Icon" width="160%" />}
-               {!miniSidenav && companyName && <Box width={!companyName && "100%"} sx={(theme: any) => sidenavLogoLabel(theme, {miniSidenav})}>
+               {!miniSidenav && logo && <Box component="img" src={logo} alt={appName} title={appName} width="100%" />}
+               {miniSidenav && icon && <Box component="img" src={icon} alt={appName} title={appName} width="160%" />}
+               {!miniSidenav && !logo && appName && <Box width={appName && "100%"} sx={(theme: any) => sidenavLogoLabel(theme, {miniSidenav})}>
                   <MDTypography component="h6" variant="button" fontWeight="medium" color={textColor}>
-                     {companyName}
+                     {appName}
                   </MDTypography>
                </Box>
                }
@@ -352,7 +352,7 @@ Sidenav.defaultProps = {
    color: "info",
    icon: "",
    logo: "",
-   companyName: "",
+   appName: "",
 };
 
 export default Sidenav;

src/qqq/layouts/BaseLayout.tsx

@@ -19,11 +19,13 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
 import Box from "@mui/material/Box";
 import {ReactNode, useEffect, useState} from "react";
 import Footer from "qqq/components/horseshoe/Footer";
 import NavBar from "qqq/components/horseshoe/NavBar";
 import DashboardLayout from "qqq/layouts/DashboardLayout";
+import Client from "qqq/utils/qqq/Client";
 
 interface Props
 {
@@ -45,6 +47,16 @@ export const breakpoints = {
 function BaseLayout({stickyNavbar, children}: Props): JSX.Element
 {
    const [tabsOrientation, setTabsOrientation] = useState<"horizontal" | "vertical">("horizontal");
+   const [metaData, setMetaData] = useState(null as QInstance);
+
+   useEffect(() =>
+   {
+      (async () =>
+      {
+         const metaData = await Client.getInstance().loadMetaData();
+         setMetaData(metaData);
+      })();
+   }, []);
 
    useEffect(() =>
    {
@@ -72,7 +84,7 @@ function BaseLayout({stickyNavbar, children}: Props): JSX.Element
       <DashboardLayout>
          <NavBar />
          <Box mt={stickyNavbar ? 3 : 6}>{children}</Box>
-         <Footer />
+         <Footer company={{href: metaData?.branding?.companyUrl, name: metaData?.branding?.companyName}} />
       </DashboardLayout>
    );
 }

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

@@ -50,10 +50,8 @@ import React, {useContext, useEffect, useReducer, useRef, useState} from "react"
 import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
 import QContext from "QContext";
 import {QActionsMenuButton, QCreateNewButton} from "qqq/components/buttons/DefaultButtons";
-import Footer from "qqq/components/horseshoe/Footer";
-import NavBar from "qqq/components/horseshoe/NavBar";
 import SavedFilters from "qqq/components/misc/SavedFilters";
-import DashboardLayout from "qqq/layouts/DashboardLayout";
+import BaseLayout from "qqq/layouts/BaseLayout";
 import ProcessRun from "qqq/pages/processes/ProcessRun";
 import DataGridUtils from "qqq/utils/DataGridUtils";
 import Client from "qqq/utils/qqq/Client";
@@ -1121,17 +1119,16 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    if(tableMetaData && !tableMetaData.readPermission)
    {
       return (
-         <DashboardLayout>
-            <NavBar />
+         <BaseLayout>
             <Alert severity="error">
                You do not have permission to view {tableMetaData?.label} records
             </Alert>
-         </DashboardLayout>
+         </BaseLayout>
       );
    }
 
    return (
-      <DashboardLayout>
+      <BaseLayout>
          {/*
          // see above code that would use this
          <iframe id="exportIFrame" name="exportIFrame">
@@ -1140,7 +1137,6 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             </form>
          </iframe>
          */}
-         <NavBar />
          <Box my={3}>
             {alertContent ? (
                <Box mb={3}>
@@ -1228,8 +1224,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             </Modal>
          }
 
-         <Footer />
-      </DashboardLayout>
+      </BaseLayout>
    );
 }