Update Recent popover to always render breadcrumbs with full length (#…

…7735)

Signed-off-by: Zhongnan Su <[email protected]>

src/core/public/chrome/ui/header/header.tsx

@@ -209,12 +209,13 @@ export function Header({
     />
   );
 
-  const renderBreadcrumbs = () => (
+  const renderBreadcrumbs = (renderFullLength?: boolean) => (
     <HeaderBreadcrumbs
       appTitle$={observables.appTitle$}
       breadcrumbs$={observables.breadcrumbs$}
       breadcrumbsEnricher$={observables.breadcrumbsEnricher$}
       useUpdatedHeader={useUpdatedHeader}
+      renderFullLength={renderFullLength}
     />
   );
 
@@ -355,8 +356,7 @@ export function Header({
         navigateToUrl={application.navigateToUrl}
         navLinks$={observables.navLinks$}
         basePath={basePath}
-        headerVariant={headerVariant}
-        renderBreadcrumbs={renderBreadcrumbs()}
+        renderBreadcrumbs={renderBreadcrumbs(true)}
         buttonSize={useApplicationHeader ? 's' : 'xs'}
       />
     </EuiHeaderSectionItem>

src/core/public/chrome/ui/header/header_breadcrumbs.tsx

@@ -41,13 +41,15 @@ interface Props {
   breadcrumbs$: Observable<ChromeBreadcrumb[]>;
   breadcrumbsEnricher$: Observable<ChromeBreadcrumbEnricher | undefined>;
   useUpdatedHeader?: boolean;
+  renderFullLength?: boolean;
 }
 
 export function HeaderBreadcrumbs({
   appTitle$,
   breadcrumbs$,
   breadcrumbsEnricher$,
   useUpdatedHeader,
+  renderFullLength,
 }: Props) {
   const appTitle = useObservable(appTitle$, 'OpenSearch Dashboards');
   const breadcrumbs = useObservable(breadcrumbs$, []);
@@ -87,7 +89,7 @@ export function HeaderBreadcrumbs({
 
   return (
     <EuiHeaderBreadcrumbs
-      breadcrumbs={remainingCrumbs}
+      breadcrumbs={renderFullLength ? crumbs : remainingCrumbs}
       max={10}
       data-test-subj="breadcrumbs"
       className={className}

src/core/public/chrome/ui/header/recent_items.tsx

@@ -17,7 +17,7 @@ import {
   EuiHeaderSectionItemButtonProps,
 } from '@elastic/eui';
 import useObservable from 'react-use/lib/useObservable';
-import { ChromeRecentlyAccessedHistoryItem, HeaderVariant } from '../..';
+import { ChromeRecentlyAccessedHistoryItem } from '../..';
 import { WorkspaceObject } from '../../../workspace';
 import { createRecentNavLink } from './nav_link';
 import { HttpStart } from '../../../http';
@@ -30,7 +30,6 @@ export interface Props {
   navigateToUrl: (url: string) => Promise<void>;
   basePath: HttpStart['basePath'];
   navLinks$: Rx.Observable<ChromeNavLink[]>;
-  headerVariant?: HeaderVariant;
   renderBreadcrumbs: React.JSX.Element;
   buttonSize?: EuiHeaderSectionItemButtonProps['size'];
 }
@@ -41,7 +40,6 @@ export const RecentItems = ({
   navigateToUrl,
   navLinks$,
   basePath,
-  headerVariant,
   renderBreadcrumbs,
   buttonSize = 's',
 }: Props) => {
@@ -69,8 +67,6 @@ export const RecentItems = ({
     setIsPopoverOpen(false);
   };
 
-  const appendBreadcrumbs = Boolean(headerVariant === HeaderVariant.APPLICATION);
-
   return (
     <EuiPopover
       button={
@@ -95,12 +91,8 @@ export const RecentItems = ({
       initialFocus={false}
       panelPaddingSize="s"
     >
-      {appendBreadcrumbs ? (
-        <>
-          {renderBreadcrumbs}
-          <EuiSpacer size="s" />
-        </>
-      ) : null}
+      {renderBreadcrumbs}
+      <EuiSpacer size="s" />
 
       <EuiTitle size="xxs">
         <h4>Recents</h4>