[navigation-next]fix: breadcrumb issue found in data source management and other similar cases.

changelogs/fragments/7401.yml

@@ -0,0 +1,2 @@
+fix:
+- Breadcrumb issue in the new application. ([#7401](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7401))

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

@@ -177,7 +177,7 @@ export function CollapsibleNavGroupEnabled({
   basePath,
   id,
   isLocked,
-  isNavOpen: isNavOpenProps,
+  isNavOpen,
   storage = window.localStorage,
   onIsLockedUpdate,
   closeNav,
@@ -263,18 +263,6 @@ export function CollapsibleNavGroupEnabled({
     return fulfillRegistrationLinksToChromeNavLinks(navLinksForAll, navLinks);
   }, [navLinks, navGroupsMap, currentNavGroup]);
 
-  const isNavOpen = useMemo(() => {
-    // For now, only home page need to always collapse left navigation
-    // when workspace is enabled.
-    // If there are more pages need to collapse left navigation in the future
-    // need to come up with a mechanism to register.
-    if (capabilities.workspaces.enabled && appId === 'home') {
-      return false;
-    }
-
-    return isNavOpenProps;
-  }, [isNavOpenProps, capabilities.workspaces.enabled, appId]);
-
   const width = useMemo(() => {
     if (!isNavOpen) {
       return 50;

src/plugins/advanced_settings/public/plugin.ts

@@ -35,6 +35,7 @@
 import { AdvancedSettingsSetup, AdvancedSettingsStart, AdvancedSettingsPluginSetup } from './types';
 import { setupTopNavThemeButton } from './register_nav_control';
 import { DEFAULT_NAV_GROUPS, AppNavLinkStatus, WorkspaceAvailability } from '../../../core/public';
+import { getScopedBreadcrumbs } from '../../opensearch_dashboards_react/public';
 
 const component = new ComponentRegistry();
 
@@ -81,7 +82,8 @@
           {
             ...params,
             basePath: core.http.basePath.get(),
-            setBreadcrumbs: coreStart.chrome.setBreadcrumbs,
+            setBreadcrumbs: (breadCrumbs) =>
+              coreStart.chrome.setBreadcrumbs(getScopedBreadcrumbs(breadCrumbs, params.history)),
             wrapInPage: true,
           },
           component.start

src/plugins/data_source_management/public/plugin.ts

@@ -50,6 +50,7 @@
 import { AccelerationDetailsFlyout } from './components/direct_query_data_sources_components/acceleration_management/acceleration_details_flyout';
 import { CreateAcceleration } from './components/direct_query_data_sources_components/acceleration_creation/create/create_acceleration';
 import { AssociatedObjectsDetailsFlyout } from './components/direct_query_data_sources_components/associated_object_management/associated_objects_details_flyout';
+import { getScopedBreadcrumbs } from '../../opensearch_dashboards_react/public';
 
 export const [
   getRenderAccelerationDetailsFlyout,
@@ -141,11 +142,6 @@
       },
     });
 
-    // when the feature flag is disabled, we don't need to register any of the mds components
-    if (!this.featureFlagStatus) {
-      return undefined;
-    }
-
     /**
      * The data sources features in observability has the same name as `DSM_APP_ID`
      * Add a suffix to avoid duplication
@@ -166,7 +162,8 @@
             {
               ...params,
               basePath: core.http.basePath.get(),
-              setBreadcrumbs: coreStart.chrome.setBreadcrumbs,
+              setBreadcrumbs: (breadCrumbs) =>
+                coreStart.chrome.setBreadcrumbs(getScopedBreadcrumbs(breadCrumbs, params.history)),
               wrapInPage: true,
             },
             this.authMethodsRegistry,
@@ -224,6 +221,11 @@
       },
     ]);
 
+    // when the feature flag is disabled, we don't need to register any of the mds components
+    if (!this.featureFlagStatus) {
+      return undefined;
+    }
+
     const registerAuthenticationMethod = (authMethod: AuthenticationMethod) => {
       if (this.started) {
         throw new Error(

src/plugins/index_pattern_management/public/plugin.ts

@@ -47,6 +47,7 @@
 
 import { ManagementSetup } from '../../management/public';
 import { DEFAULT_NAV_GROUPS, AppStatus, DEFAULT_APP_CATEGORIES } from '../../../core/public';
+import { getScopedBreadcrumbs } from '../../opensearch_dashboards_react/public';
 
 export interface IndexPatternManagementSetupDependencies {
   management: ManagementSetup;
@@ -148,7 +149,8 @@
           {
             ...params,
             basePath: core.http.basePath.get(),
-            setBreadcrumbs: coreStart.chrome.setBreadcrumbs,
+            setBreadcrumbs: (breadCrumbs) =>
+              coreStart.chrome.setBreadcrumbs(getScopedBreadcrumbs(breadCrumbs, params.history)),
             wrapInPage: true,
           },
           () => this.indexPatternManagementService.environmentService.getEnvironment().ml(),

src/plugins/opensearch_dashboards_react/public/react_router_navigate/index.ts

@@ -28,4 +28,8 @@
  * under the License.
  */
 
-export { reactRouterNavigate, reactRouterOnClickHandler } from './react_router_navigate';
+export {
+  reactRouterNavigate,
+  reactRouterOnClickHandler,
+  getScopedBreadcrumbs,
+} from './react_router_navigate';

src/plugins/opensearch_dashboards_react/public/react_router_navigate/react_router_navigate.test.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { scopedHistoryMock } from '../../../../core/public/mocks';
+import { getScopedBreadcrumbs } from './react_router_navigate';
+
+describe('getScopedBreadcrumbs', () => {
+  it('should return scoped bread crumbs when given an array', () => {
+    const history = scopedHistoryMock.create({
+      pathname: '/base',
+    });
+    history.createHref.mockImplementation((location) => `/base${location.pathname}`);
+    const scopedBreadcrumbs = getScopedBreadcrumbs(
+      [
+        {
+          text: 'Home',
+          href: '/',
+        },
+        {
+          text: 'Dashboard',
+          href: '/dashboard',
+        },
+      ],
+      history
+    );
+    expect(scopedBreadcrumbs[0]).toEqual(
+      expect.objectContaining({
+        href: '/base/',
+        text: 'Home',
+      })
+    );
+    expect(scopedBreadcrumbs[1]).toEqual(
+      expect.objectContaining({
+        href: '/base/dashboard',
+        text: 'Dashboard',
+      })
+    );
+  });
+});