Merge branch 'feature/breadcrumb-labels' into integration/sprint-29

# Conflicts:
#	src/App.tsx
#	src/QContext.tsx

src/App.tsx

@@ -33,7 +33,7 @@ import CssBaseline from "@mui/material/CssBaseline";
 import Icon from "@mui/material/Icon";
 import {ThemeProvider} from "@mui/material/styles";
 import {LicenseInfo} from "@mui/x-license-pro";
-import React, {JSXElementConstructor, Key, ReactElement, useEffect, useState,} from "react";
+import React, {JSXElementConstructor, Key, ReactElement, useContext, useEffect, useState,} from "react";
 import {useCookies} from "react-cookie";
 import {Navigate, Route, Routes, useLocation,} from "react-router-dom";
 import {Md5} from "ts-md5/dist/md5";
@@ -149,6 +149,7 @@ export default function App()
    const [needToLoadRoutes, setNeedToLoadRoutes] = useState(true);
    const [sideNavRoutes, setSideNavRoutes] = useState([]);
    const [appRoutes, setAppRoutes] = useState(null as any);
+   const [pathToLabelMap, setPathToLabelMap] = useState({} as {[path: string]: string});
 
    ////////////////////////////////////////////
    // load qqq meta data to make more routes //
@@ -467,6 +468,14 @@ export default function App()
                });
             }
 
+            const pathToLabelMap: {[path: string]: string} = {}
+            for(let i =0; i<appRoutesList.length; i++)
+            {
+               const route = appRoutesList[i];
+               pathToLabelMap[route.route] = route.name;
+            }
+            setPathToLabelMap(pathToLabelMap);
+
             const newSideNavRoutes = [];
             // @ts-ignore
             newSideNavRoutes.unshift(profileRoutes);
@@ -578,7 +587,9 @@ export default function App()
             setAccentColor: (accentColor: string) => setAccentColor(accentColor),
             setTableMetaData: (tableMetaData: QTableMetaData) => setTableMetaData(tableMetaData),
             setTableProcesses: (tableProcesses: QProcessMetaData[]) => setTableProcesses(tableProcesses),
-            setDotMenuOpen: (dotMenuOpent: boolean) => setDotMenuOpen(dotMenuOpent)
+            setDotMenuOpen: (dotMenuOpent: boolean) => setDotMenuOpen(dotMenuOpent),
+            pathToLabelMap: pathToLabelMap,
+            branding: branding
          }}>
             <ThemeProvider theme={theme}>
                <CssBaseline />
@@ -590,6 +601,7 @@ export default function App()
                   appName={branding.appName}
                   branding={branding}
                   routes={sideNavRoutes}
+                  pathToLabelMap={pathToLabelMap}
                   onMouseEnter={handleOnMouseEnter}
                   onMouseLeave={handleOnMouseLeave}
                />

src/QContext.tsx

@@ -20,6 +20,7 @@
  */
 
 import {QAppMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppMetaData";
+import {QBrandingMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QBrandingMetaData";
 import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
 import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
@@ -33,19 +34,22 @@ interface QContext
    accentColor: string;
    setAccentColor?: (header: string) => void;
    dotMenuOpen: boolean;
+   setDotMenuOpen?: (dotMenuOpen: boolean) => void;
    qInstance?: QInstance;
    appMetaData?: QAppMetaData;
    tableMetaData?: QTableMetaData;
    setTableMetaData?: (tableMetaData: QTableMetaData) => void;
    tableProcesses?: QProcessMetaData[];
    setTableProcesses?: (tableProcesses: QProcessMetaData[]) => void;
-   setDotMenuOpen?: (dotMenuOpen: boolean) => void;
+   pathToLabelMap?: {[path: string]: string};
+   branding?: QBrandingMetaData;
 }
 
 const defaultState = {
    pageHeader: "",
    accentColor: "#0062FF",
-   dotMenuOpen: false
+   dotMenuOpen: false,
+   pathToLabelMap: {},
 };
 
 const QContext = createContext<QContext>(defaultState);

src/qqq/components/horseshoe/Breadcrumbs.tsx

@@ -60,9 +60,19 @@ export const routeToLabel = (route: string): string =>
 function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
 {
    const routes: string[] | any = route.slice(0, -1);
-   const {pageHeader, setPageHeader} = useContext(QContext);
+   const {pageHeader, pathToLabelMap, branding} = useContext(QContext);
 
-   let pageTitle = "ColdTrack Live";
+   const fullPathToLabel = (fullPath: string, route: string): string =>
+   {
+      if(pathToLabelMap && pathToLabelMap[fullPath])
+      {
+         return pathToLabelMap[fullPath];
+      }
+
+      return (routeToLabel(route));
+   }
+
+   let pageTitle = branding?.appName ?? "";
    const fullRoutes: string[] = [];
    let accumulatedPath = "";
    for (let i = 0; i < routes.length; i++)
@@ -74,7 +84,7 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
 
       accumulatedPath = `${accumulatedPath}/${routes[i]}`;
       fullRoutes.push(accumulatedPath);
-      pageTitle = `${routeToLabel(routes[i])} | ${pageTitle}`;
+      pageTitle = `${fullPathToLabel(accumulatedPath, routes[i])} | ${pageTitle}`;
    }
 
    document.title = `${ucFirst(title)} | ${pageTitle}`;
@@ -110,7 +120,7 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
                      opacity={light ? 0.8 : 0.5}
                      sx={{lineHeight: 0}}
                   >
-                     {routeToLabel(fullRoute.replace(/.*\//, ""))}
+                     {fullPathToLabel(fullRoute, fullRoute.replace(/.*\//, ""))}
                   </MDTypography>
                </Link>
             ))}

src/qqq/components/horseshoe/NavBar.tsx

@@ -30,8 +30,9 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import Menu from "@mui/material/Menu";
 import TextField from "@mui/material/TextField";
 import Toolbar from "@mui/material/Toolbar";
-import React, {useEffect, useState} from "react";
+import React, {useContext, useEffect, useState} from "react";
 import {useLocation, useNavigate} from "react-router-dom";
+import QContext from "QContext";
 import QBreadcrumbs, {routeToLabel} from "qqq/components/horseshoe/Breadcrumbs";
 import {navbar, navbarContainer, navbarIconButton, navbarRow,} from "qqq/components/horseshoe/Styles";
 import {setTransparentNavbar, useMaterialUIController,} from "qqq/context";
@@ -60,6 +61,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
    const [openMenu, setOpenMenu] = useState<any>(false);
    const [history, setHistory] = useState<any>([] as HistoryEntry[]);
    const [autocompleteValue, setAutocompleteValue] = useState<any>(null);
+   const fullPath = useLocation().pathname;
    const route = useLocation().pathname.split("/").slice(1);
    const navigate = useNavigate();
 
@@ -210,7 +212,18 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
       },
    });
 
-   const breadcrumbTitle = routeToLabel(route[route.length - 1]);
+   const {pathToLabelMap} = useContext(QContext);
+   const fullPathToLabel = (fullPath: string, route: string): string =>
+   {
+      if(pathToLabelMap && pathToLabelMap[fullPath])
+      {
+         return pathToLabelMap[fullPath];
+      }
+
+      return (routeToLabel(route));
+   }
+
+   const breadcrumbTitle = fullPathToLabel(fullPath, route[route.length - 1]);
 
    return (
       <AppBar