[Workspace] fix breadcrumbs for workspace (#8303) (#8384)

* update breadcrumbs



* Changeset file for PR #8303 created/updated

fix bootstrap error



* make the workspace name not repsonsive that will not break into two rows



fix bootstrap error



* fix failed unit test



* link check



* set overview page title to include itself use case name in all use case



* hideTrailingSeparator for breadcrumbs in recently popover



* update breadcrumbs for search overview



* update overview page id



* Address review comments



---------



(cherry picked from commit 9369f37)

Signed-off-by: Hailong Cui <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

.lycheeignore

@@ -90,4 +90,4 @@ https://www.quandl.com/api/v1/datasets/
 https://code.google.com/p/v8/wiki/JavaScriptStackTraceApi
 http:/adomas.org/javascript-mouse-wheel/
 site.com
-https://sites.google.com/site/murmurhash
+http://sites.google.com/site/murmurhash/

changelogs/fragments/8303.yml

@@ -0,0 +1,2 @@
+fix:
+- [Workspace] prepend workspace name and icon to breadcrumbs ([#8303](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8303))

src/core/public/chrome/nav_group/nav_group_service.test.ts

@@ -599,8 +599,8 @@ describe('ChromeNavGroupService#start()', () => {
     const breadcrumbs = [{ text: 'test' }];
     const enrichedBreadcrumbs = breadcrumbsEnricher$.getValue()?.(breadcrumbs);
 
-    // home -> bar-group -> test
-    expect(enrichedBreadcrumbs).toHaveLength(3);
+    // bar-group -> test
+    expect(enrichedBreadcrumbs).toHaveLength(2);
 
     // reset current nav group
     chromeNavGroupServiceStart.setCurrentNavGroup(undefined);

src/core/public/chrome/nav_group/nav_group_service.ts

@@ -12,7 +12,6 @@ import {
   WorkspacesStart,
 } from 'opensearch-dashboards/public';
 import { map, switchMap, takeUntil } from 'rxjs/operators';
-import { i18n } from '@osd/i18n';
 import { IUiSettingsClient } from '../../ui_settings';
 import {
   fulfillRegistrationLinksToChromeNavLinks,
@@ -348,13 +347,7 @@ export class ChromeNavGroupService {
         }
       },
     };
-    const homeBreadcrumb: ChromeBreadcrumb = {
-      text: i18n.translate('core.breadcrumbs.homeTitle', { defaultMessage: 'Home' }),
-      onClick: () => {
-        navigateToApp('home');
-      },
-    };
-    return [homeBreadcrumb, navGroupBreadcrumb, ...breadcrumbs];
+    return [navGroupBreadcrumb, ...breadcrumbs];
   }
 
   async stop() {

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

@@ -155,7 +155,6 @@ 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);
@@ -216,14 +215,14 @@ export function Header({
     />
   );
 
-  const renderBreadcrumbs = (renderFullLength?: boolean, dropHomeFromBreadcrumb?: boolean) => (
+  const renderBreadcrumbs = (renderFullLength?: boolean, hideTrailingSeparator?: boolean) => (
     <HeaderBreadcrumbs
       appTitle$={observables.appTitle$}
       breadcrumbs$={observables.breadcrumbs$}
       breadcrumbsEnricher$={observables.breadcrumbsEnricher$}
       useUpdatedHeader={useUpdatedHeader}
       renderFullLength={renderFullLength}
-      dropHomeFromBreadcrumb={dropHomeFromBreadcrumb}
+      hideTrailingSeparator={hideTrailingSeparator}
     />
   );
 
@@ -494,7 +493,7 @@ export function Header({
         recentlyAccessed$={observables.recentlyAccessed$}
         workspaceList$={observables.workspaceList$}
         navigateToUrl={application.navigateToUrl}
-        renderBreadcrumbs={renderBreadcrumbs(true, false)}
+        renderBreadcrumbs={renderBreadcrumbs(true, true)}
         buttonSize={useApplicationHeader ? 's' : 'xs'}
       />
     </EuiHeaderSectionItem>
@@ -548,7 +547,7 @@ export function Header({
 
         <EuiHeaderSection grow={false}>{renderRecentItems()}</EuiHeaderSection>
 
-        {renderBreadcrumbs(false, !!currentWorkspace)}
+        {renderBreadcrumbs(false, false)}
       </EuiHeader>
 
       {/* Secondary header */}