[Workspace] Hide first home breadcrumbs within workspace (#7992)

* hide first home breadcrumbs within workspace

Signed-off-by: Hailong Cui <ihailong@amazon.com>

* Changeset file for PR #7992 created/updated

* don't relay on text to drop home

Signed-off-by: Hailong Cui <ihailong@amazon.com>

* don't relay on text to drop home

Signed-off-by: Hailong Cui <ihailong@amazon.com>

---------

Signed-off-by: Hailong Cui <ihailong@amazon.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
(cherry picked from commit 63d0d32)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

changelogs/fragments/7992.yml

@@ -0,0 +1,2 @@
+feat:
+- [Workspace] Hide home breadcrumbs when in a workspace ([#7992](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7992))

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

@@ -143,6 +143,7 @@ export function Header({
   const [isNavOpen, setIsNavOpen] = useState(false);
   const sidecarConfig = useObservable(observables.sidecarConfig$, undefined);
   const breadcrumbs = useObservable(observables.breadcrumbs$, []);
+  const currentWorkspace = useObservable(observables.currentWorkspace$, undefined);
 
   const sidecarPaddingStyle = useMemo(() => {
     return getOsdSidecarPaddingStyle(sidecarConfig);
@@ -203,13 +204,14 @@ export function Header({
     />
   );
 
-  const renderBreadcrumbs = (renderFullLength?: boolean) => (
+  const renderBreadcrumbs = (renderFullLength?: boolean, dropHomeFromBreadcrumb?: boolean) => (
     <HeaderBreadcrumbs
       appTitle$={observables.appTitle$}
       breadcrumbs$={observables.breadcrumbs$}
       breadcrumbsEnricher$={observables.breadcrumbsEnricher$}
       useUpdatedHeader={useUpdatedHeader}
       renderFullLength={renderFullLength}
+      dropHomeFromBreadcrumb={dropHomeFromBreadcrumb}
     />
   );
 
@@ -351,7 +353,7 @@ export function Header({
         recentlyAccessed$={observables.recentlyAccessed$}
         workspaceList$={observables.workspaceList$}
         navigateToUrl={application.navigateToUrl}
-        renderBreadcrumbs={renderBreadcrumbs(true)}
+        renderBreadcrumbs={renderBreadcrumbs(true, false)}
         buttonSize={useApplicationHeader ? 's' : 'xs'}
       />
     </EuiHeaderSectionItem>
@@ -399,7 +401,7 @@ export function Header({
 
         <EuiHeaderSection grow={false}>{renderRecentItems()}</EuiHeaderSection>
 
-        {renderBreadcrumbs()}
+        {renderBreadcrumbs(false, !!currentWorkspace)}
       </EuiHeader>
 
       {/* Secondary header */}

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

@@ -107,4 +107,44 @@ describe('HeaderBreadcrumbs', () => {
     wrapper.update();
     expect(wrapper.find('.euiBreadcrumbWrapper')).toHaveLength(2);
   });
+
+  it('remove heading home when workspace is enabled', () => {
+    const breadcrumbs$ = new BehaviorSubject([{ text: 'First' }]);
+    const breadcrumbsEnricher$ = new BehaviorSubject((crumbs: ChromeBreadcrumb[]) => [
+      { text: 'Home', home: true },
+      { text: 'Analytics' },
+      ...crumbs,
+    ]);
+    const wrapper = mount(
+      <HeaderBreadcrumbs
+        appTitle$={new BehaviorSubject('')}
+        breadcrumbs$={breadcrumbs$}
+        breadcrumbsEnricher$={breadcrumbsEnricher$}
+        dropHomeFromBreadcrumb={true}
+      />
+    );
+    let breadcrumbs = wrapper.find('.euiBreadcrumbWrapper');
+    expect(breadcrumbs).toHaveLength(2);
+    expect(breadcrumbs.at(0).text()).toBe('Analytics');
+    expect(breadcrumbs.at(1).text()).toBe('First');
+
+    // if no home property, we don't drop by text
+    act(() => {
+      breadcrumbsEnricher$.next((items) => items);
+      breadcrumbs$.next([{ text: 'Home' }, { text: 'Second' }]);
+    });
+    wrapper.update();
+    breadcrumbs = wrapper.find('.euiBreadcrumbWrapper');
+    expect(breadcrumbs).toHaveLength(2);
+    expect(breadcrumbs.at(0).text()).toBe('Home');
+    expect(breadcrumbs.at(1).text()).toBe('Second');
+
+    act(() => {
+      breadcrumbsEnricher$.next((items) => []);
+      breadcrumbs$.next([{ text: 'Home' }, { text: 'Second' }]);
+    });
+    wrapper.update();
+    breadcrumbs = wrapper.find('.euiBreadcrumbWrapper');
+    expect(breadcrumbs).toHaveLength(0);
+  });
 });

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

@@ -41,6 +41,7 @@ interface Props {
   breadcrumbsEnricher$: Observable<ChromeBreadcrumbEnricher | undefined>;
   useUpdatedHeader?: boolean;
   renderFullLength?: boolean;
+  dropHomeFromBreadcrumb?: boolean;
 }
 
 export function HeaderBreadcrumbs({
@@ -49,6 +50,7 @@ export function HeaderBreadcrumbs({
   breadcrumbsEnricher$,
   useUpdatedHeader,
   renderFullLength,
+  dropHomeFromBreadcrumb,
 }: Props) {
   const appTitle = useObservable(appTitle$, 'OpenSearch Dashboards');
   const breadcrumbs = useObservable(breadcrumbs$, []);
@@ -73,6 +75,10 @@ export function HeaderBreadcrumbs({
     crumbs = breadcrumbEnricher(crumbs);
   }
 
+  if (dropHomeFromBreadcrumb && crumbs.length && Object.hasOwn(crumbs[0], 'home')) {
+    crumbs = crumbs.slice(1);
+  }
+
   crumbs = crumbs.map((breadcrumb, i) => ({
     ...breadcrumb,
     'data-test-subj': classNames(

src/plugins/workspace/public/utils.ts

@@ -385,8 +385,9 @@ export function prependWorkspaceToBreadcrumbs(
     return;
   }
 
-  const homeBreadcrumb: ChromeBreadcrumb = {
+  const homeBreadcrumb: ChromeBreadcrumb & { home: boolean } = {
     text: 'Home',
+    home: true,
     onClick: () => {
       core.application.navigateToApp('home');
     },