[Workspace] Refactor the style of recent items card in the header

changelogs/fragments/7805.yml

@@ -0,0 +1,2 @@
+feat:
+- Refractor the style of recent items card ([#7805](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7805))

src/core/public/chrome/chrome_service.tsx

@@ -349,6 +349,7 @@ export class ChromeService {
 
       getHeaderComponent: () => (
         <Header
+          http={http}
           loadingCount$={http.getLoadingCount$()}
           application={application}
           appTitle$={appTitle$.pipe(takeUntil(this.stop$))}

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

@@ -50,6 +50,7 @@ function mockProps() {
   const application = applicationServiceMock.createInternalStartContract();
 
   return {
+    http,
     application,
     opensearchDashboardsVersion: '1.0.0',
     appTitle$: new BehaviorSubject('test'),

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

@@ -79,6 +79,7 @@ import { HomeLoader } from './home_loader';
 import { RecentItems } from './recent_items';
 
 export interface HeaderProps {
+  http: HttpStart;
   opensearchDashboardsVersion: string;
   application: InternalApplicationStart;
   appTitle$: Observable<string>;
@@ -120,6 +121,7 @@ export interface HeaderProps {
 }
 
 export function Header({
+  http,
   opensearchDashboardsVersion,
   opensearchDashboardsDocLink,
   application,
@@ -351,11 +353,12 @@ export function Header({
   const renderRecentItems = () => (
     <EuiHeaderSectionItem border={useUpdatedHeader ? 'none' : 'right'}>
       <RecentItems
+        http={http}
+        navLinks$={observables.navLinks$}
+        basePath={basePath}
         recentlyAccessed$={observables.recentlyAccessed$}
         workspaceList$={observables.workspaceList$}
         navigateToUrl={application.navigateToUrl}
-        navLinks$={observables.navLinks$}
-        basePath={basePath}
         renderBreadcrumbs={renderBreadcrumbs(true)}
         buttonSize={useApplicationHeader ? 's' : 'xs'}
       />