[Page Header]consume new breadcrumb components from oui (#7843)

(cherry picked from commit 4ff6c6b)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

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

@@ -67,7 +67,6 @@ describe('HeaderBreadcrumbs', () => {
       />
     );
     expect(wrapper.find('.euiBreadcrumb')).toMatchSnapshot();
-    expect(wrapper.find('.headerBreadcrumbs').exists()).toBeTruthy();
     expect(wrapper.find('[data-test-subj="breadcrumb first"]').exists()).toBeFalsy();
 
     act(() => breadcrumbs$.next([{ text: 'First' }, { text: 'Second' }]));

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

@@ -34,7 +34,6 @@ import React, { useEffect, useState } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import { Observable } from 'rxjs';
 import { ChromeBreadcrumb, ChromeBreadcrumbEnricher } from '../../chrome_service';
-import './header_breadcrumbs.scss';
 
 interface Props {
   appTitle$: Observable<string>;
@@ -85,14 +84,13 @@ export function HeaderBreadcrumbs({
   }));
 
   const remainingCrumbs = useUpdatedHeader ? crumbs.slice(0, -1) : crumbs;
-  const className = useUpdatedHeader ? 'headerBreadcrumbs' : '';
 
   return (
     <EuiHeaderBreadcrumbs
       breadcrumbs={renderFullLength ? crumbs : remainingCrumbs}
       max={10}
       data-test-subj="breadcrumbs"
-      className={className}
+      simplify={!!useUpdatedHeader}
     />
   );
 }