Get labels in breadcrumb from meta-data labels, not path components

src/App.tsx

@@ -31,7 +31,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";
@@ -146,6 +146,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 //
@@ -456,6 +457,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);
@@ -558,7 +567,9 @@ export default function App()
             pageHeader: pageHeader,
             accentColor: accentColor,
             setPageHeader: (header: string | JSX.Element) => setPageHeader(header),
-            setAccentColor: (accentColor: string) => setAccentColor(accentColor)
+            setAccentColor: (accentColor: string) => setAccentColor(accentColor),
+            pathToLabelMap: pathToLabelMap,
+            branding: branding
          }}>
             <ThemeProvider theme={theme}>
                <CssBaseline />
@@ -568,6 +579,7 @@ export default function App()
                   logo={branding.logo}
                   appName={branding.appName}
                   routes={sideNavRoutes}
+                  pathToLabelMap={pathToLabelMap}
                   onMouseEnter={handleOnMouseEnter}
                   onMouseLeave={handleOnMouseLeave}
                />

src/QContext.tsx

@@ -19,6 +19,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import {QBrandingMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QBrandingMetaData";
 import {createContext} from "react";
 
 
@@ -28,11 +29,14 @@ interface QContext
    setPageHeader?: (header: string | JSX.Element) => void;
    accentColor: string;
    setAccentColor?: (header: string) => void;
+   pathToLabelMap?: {[path: string]: string};
+   branding?: QBrandingMetaData;
 }
 
 const defaultState = {
    pageHeader: "",
-   accentColor: "#0062FF"
+   accentColor: "#0062FF",
+   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();
 
@@ -206,7 +208,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