Simplified breadcrumb handling

framework/PageFramework.tsx

@@ -7,6 +7,7 @@ import { PageNavSideBarProvider } from './PageNavigation/PageNavSidebar';
 import { PageNotificationsProvider } from './PageNotifications/PageNotificationsProvider';
 import { SettingsProvider } from './Settings';
 import { FrameworkTranslationsProvider } from './useFrameworkTranslations';
+import { PageBreadcrumbsProvider } from './PageTabs/PageBreadcrumbs';
 
 /**
  * The `PageFramework` component bundles up all the context providers in the Ansible UI framework in a convienent component for framework consumers. Examples of internal context providers are translations, navigation, settings, alerts, and dialogs.
@@ -21,7 +22,9 @@ export function PageFramework(props: { children: ReactNode }) {
         <PageDialogProvider>
           <PageAlertToasterProvider>
             <PageNavSideBarProvider>
-              <PageNotificationsProvider>{props.children}</PageNotificationsProvider>
+              <PageNotificationsProvider>
+                <PageBreadcrumbsProvider>{props.children}</PageBreadcrumbsProvider>
+              </PageNotificationsProvider>
             </PageNavSideBarProvider>
           </PageAlertToasterProvider>
         </PageDialogProvider>

framework/PageHeader.tsx

@@ -14,21 +14,23 @@ import {
   Truncate,
 } from '@patternfly/react-core';
 import { ExternalLinkAltIcon, OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
-import { CSSProperties, Fragment, ReactNode } from 'react';
+import { CSSProperties, Fragment, ReactNode, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import './PageFramework.css';
 import { useBreakpoint } from './components/useBreakPoint';
 import { useFrameworkTranslations } from './useFrameworkTranslations';
+import { usePageBreadcrumbs } from './PageTabs/PageBreadcrumbs';
 
 export interface ICatalogBreadcrumb {
   id?: string;
   label?: string | null;
   to?: string;
   target?: string;
   component?: React.ElementType;
+  isLoading?: boolean;
 }
 
-function Breadcrumbs(props: { breadcrumbs: ICatalogBreadcrumb[]; style?: CSSProperties }) {
+function Breadcrumbs(props: { breadcrumbs?: ICatalogBreadcrumb[]; style?: CSSProperties }) {
   const navigate = useNavigate();
   if (!props.breadcrumbs) return <Fragment />;
   return (
@@ -102,25 +104,38 @@ export interface PageHeaderProps {
  * </PageLayout>
  */
 export function PageHeader(props: PageHeaderProps) {
-  const { breadcrumbs, title, description, controls, headerActions, footer } = props;
+  const { title, description, controls, headerActions, footer } = props;
   const isLg = useBreakpoint('lg');
   const isXl = useBreakpoint('xl');
   const isMdOrLarger = useBreakpoint('md');
   const [translations] = useFrameworkTranslations();
+
+  const { tabBreadcrumb } = usePageBreadcrumbs();
+
+  const pageBreadcrumbs = useMemo(() => {
+    const pageBreadcrumbs = [];
+    if (props.breadcrumbs) pageBreadcrumbs.push(...props.breadcrumbs);
+    if (tabBreadcrumb) pageBreadcrumbs.push(tabBreadcrumb);
+    return pageBreadcrumbs;
+  }, [props.breadcrumbs, tabBreadcrumb]);
+
   return (
     <PageSection
       variant={PageSectionVariants.light}
       className="bg-lighten border-bottom"
       style={{
-        paddingTop: breadcrumbs ? (isXl ? 16 : 12) : isXl ? 16 : 12,
+        paddingTop: pageBreadcrumbs?.length ? (isXl ? 16 : 12) : isXl ? 16 : 12,
         paddingBottom: isXl ? 16 : 12,
       }}
     >
       <Stack hasGutter>
         <Flex flexWrap={{ default: 'nowrap' }} alignItems={{ default: 'alignItemsStretch' }}>
           <FlexItem grow={{ default: 'grow' }}>
-            {breadcrumbs && (
-              <Breadcrumbs breadcrumbs={breadcrumbs} style={{ paddingBottom: isLg ? 6 : 4 }} />
+            {pageBreadcrumbs && (
+              <Breadcrumbs
+                breadcrumbs={pageBreadcrumbs?.length ? pageBreadcrumbs : undefined}
+                style={{ paddingBottom: isLg ? 6 : 4 }}
+              />
             )}
             {title ? (
               props.titleHelp ? (

framework/PageTabs/PageBreadcrumbs.tsx

@@ -0,0 +1,25 @@
+import { createContext, Dispatch, ReactNode, SetStateAction, useContext, useState } from 'react';
+import { ICatalogBreadcrumb } from '../PageHeader';
+
+export type PageBreadcrumbsContext = {
+  /** The tab breadcrumb is used to display the current active tab
+   * in the page breadcrumbs (displayed by the PageHeader component) */
+  tabBreadcrumb?: ICatalogBreadcrumb;
+  setTabBreadcrumb: Dispatch<SetStateAction<ICatalogBreadcrumb | undefined>>;
+};
+
+export const PageBreadcrumbsContext = createContext<PageBreadcrumbsContext>({
+  tabBreadcrumb: {},
+  setTabBreadcrumb: () => {},
+});
+
+export function PageBreadcrumbsProvider(props: { children: ReactNode }) {
+  const [tabBreadcrumb, setTabBreadcrumb] = useState<ICatalogBreadcrumb | undefined>({});
+  return (
+    <PageBreadcrumbsContext.Provider value={{ tabBreadcrumb, setTabBreadcrumb }}>
+      {props.children}
+    </PageBreadcrumbsContext.Provider>
+  );
+}
+
+export const usePageBreadcrumbs = (): PageBreadcrumbsContext => useContext(PageBreadcrumbsContext);

framework/PageTabs/PageRoutedTabs.tsx

@@ -4,6 +4,8 @@ import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { PageLayout, useGetPageUrl, usePageNavigate } from '..';
 import { getPersistentFilters } from '../../frontend/common/PersistentFilters';
 import { useSearchParams } from 'react-router-dom';
+import { usePageBreadcrumbs } from './PageBreadcrumbs';
+import { useEffect } from 'react';
 
 export function PageRoutedTabs(props: {
   backTab?: { label: string; page: string; persistentFilterKey: string };
@@ -19,10 +21,22 @@ export function PageRoutedTabs(props: {
   const navigate = useNavigate();
   const getPageUrl = useGetPageUrl();
   const location = useLocation();
+  const { setTabBreadcrumb } = usePageBreadcrumbs();
+
   const activeTab = props.tabs.find(
     (tab) => tab && getPageUrl(tab.page, { params: props.params }) === location.pathname
   );
 
+  // Set current active tab to tabBreadcrumb in the PageBreadcrumbContext
+  useEffect(() => {
+    if (activeTab) {
+      setTabBreadcrumb({ label: activeTab.label });
+      return () => setTabBreadcrumb(undefined);
+    } else {
+      setTabBreadcrumb(undefined);
+    }
+  }, [activeTab, setTabBreadcrumb]);
+
   const [searchParams] = useSearchParams();
 
   const sharedQueryKeysObj: Record<string, string | number | undefined> = {};

framework/components/LoadingPage.tsx

@@ -9,7 +9,7 @@ export function LoadingPage(props: { breadcrumbs?: boolean; tabs?: boolean }) {
       <PageHeader
         breadcrumbs={
           props.breadcrumbs
-            ? [{ label: (<Skeleton width="150px" />) as unknown as string }]
+            ? [{ label: (<Skeleton width="150px" />) as unknown as string, isLoading: true }]
             : undefined
         }
         title={(<Skeleton width="200px" />) as unknown as string}