From 389ad1b7ed8a32ea67b12918c56cb3c442fb0e63 Mon Sep 17 00:00:00 2001
From: Zhongnan Su <szhongna@amazon.com>
Date: Fri, 16 Aug 2024 17:18:20 -0700
Subject: [PATCH] Update Recent popover to always render breadcrumbs with full
 length (#7735)

Signed-off-by: Zhongnan Su <szhongna@amazon.com>
---
 .../ui/header/__snapshots__/header.test.tsx.snap   |  3 ++-
 src/core/public/chrome/ui/header/header.tsx        |  6 +++---
 .../public/chrome/ui/header/header_breadcrumbs.tsx |  4 +++-
 src/core/public/chrome/ui/header/recent_items.tsx  | 14 +++-----------
 4 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
index 39db446d18e8..46dce92ddeac 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
@@ -8613,7 +8613,6 @@ exports[`Header renders application header without title and breadcrumbs 1`] = `
                         }
                       }
                       buttonSize="s"
-                      headerVariant="application"
                       navLinks$={
                         BehaviorSubject {
                           "_isScalar": false,
@@ -8867,6 +8866,7 @@ exports[`Header renders application header without title and breadcrumbs 1`] = `
                               "thrownError": null,
                             }
                           }
+                          renderFullLength={true}
                           useUpdatedHeader={true}
                         />
                       }
@@ -17371,6 +17371,7 @@ exports[`Header renders page header with application title 1`] = `
                               "thrownError": null,
                             }
                           }
+                          renderFullLength={true}
                           useUpdatedHeader={true}
                         />
                       }
diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx
index 4dfe57ecd053..939a36911de9 100644
--- a/src/core/public/chrome/ui/header/header.tsx
+++ b/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>
diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx
index cac19ae160af..5361db221d10 100644
--- a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx
+++ b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx
@@ -41,6 +41,7 @@ interface Props {
   breadcrumbs$: Observable<ChromeBreadcrumb[]>;
   breadcrumbsEnricher$: Observable<ChromeBreadcrumbEnricher | undefined>;
   useUpdatedHeader?: boolean;
+  renderFullLength?: boolean;
 }
 
 export function HeaderBreadcrumbs({
@@ -48,6 +49,7 @@ export function HeaderBreadcrumbs({
   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}
diff --git a/src/core/public/chrome/ui/header/recent_items.tsx b/src/core/public/chrome/ui/header/recent_items.tsx
index 6cd7b5c9706b..8224753dfd82 100644
--- a/src/core/public/chrome/ui/header/recent_items.tsx
+++ b/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>