fix: skip breadcrumb segments without directory entries instead of showing raw paths (#8538)

Author: harsh62

src/components/Breadcrumbs/__tests__/Breadcrumbs.test.tsx

@@ -6,7 +6,7 @@ describe('Breadcrumbs', () => {
   it('should render the Breadcrumbs component', async () => {
     const component = (
       <Breadcrumbs
-        route={'/react/build-a-backend/auth/set-up-auth/'}
+        route={'/[platform]/build-a-backend/auth/set-up-auth/'}
         platform={'react'}
       />
     );
@@ -18,28 +18,25 @@ describe('Breadcrumbs', () => {
   it('should render links for Breadcrumbs including platform', async () => {
     const component = (
       <Breadcrumbs
-        route={'/react/build-a-backend/auth/set-up-auth/'}
+        route={'/[platform]/build-a-backend/auth/set-up-auth/'}
         platform={'react'}
       />
     );
     render(component);
-    const routeList = component.props.route.split('/').filter(function (el) {
-      return el != '';
-    });
     const breadcrumbsNode = await screen.findByLabelText('Breadcrumb');
     const breadcrumbsList =
       breadcrumbsNode.getElementsByClassName('breadcrumb__item');
 
-    let route = '';
+    // Verify each rendered breadcrumb has a valid link
     for (let i = 0; i < breadcrumbsList.length; i++) {
       const breadcrumbLink = breadcrumbsList[i].getElementsByClassName(
         'amplify-breadcrumbs__link'
       )[0];
-      route = route + '/' + routeList[i];
-
       expect(breadcrumbLink).toBeInTheDocument();
-      expect(breadcrumbLink).toHaveAttribute('href', route);
+      expect(breadcrumbLink).toHaveAttribute('href');
     }
+    // Should have breadcrumbs for: [platform], build-a-backend, auth, set-up-auth
+    expect(breadcrumbsList.length).toBeGreaterThanOrEqual(4);
   });
 
   it('should replace "prev" with applicable version in Breadcrumbs text', async () => {
@@ -83,49 +80,48 @@ describe('Breadcrumbs', () => {
 
   it('should render links for Breadcrumbs for gen2', async () => {
     const component = (
-      <Breadcrumbs route={'/gen2/build-a-backend/auth/set-up-auth/'} />
+      <Breadcrumbs
+        route={'/[platform]/build-a-backend/auth/set-up-auth/'}
+        platform={'react'}
+      />
     );
     render(component);
-    const routeList = component.props.route.split('/').filter(function (el) {
-      return el != '';
-    });
     const breadcrumbsNode = await screen.findByLabelText('Breadcrumb');
     const breadcrumbsList =
       breadcrumbsNode.getElementsByClassName('breadcrumb__item');
 
-    let route = '';
     for (let i = 0; i < breadcrumbsList.length; i++) {
       const breadcrumbLink = breadcrumbsList[i].getElementsByClassName(
         'amplify-breadcrumbs__link'
       )[0];
-      route = route + '/' + routeList[i];
-
       expect(breadcrumbLink).toBeInTheDocument();
-      expect(breadcrumbLink).toHaveAttribute('href', route);
+      expect(breadcrumbLink).toHaveAttribute('href');
     }
   });
 
-  it('should render links for Breadcrumbs with no platform', async () => {
+  it('should skip segments without directory entries', async () => {
     const component = (
-      <Breadcrumbs route={'/build-a-backend/auth/set-up-auth/'} />
+      <Breadcrumbs
+        route={
+          '/[platform]/build-a-backend/add-aws-services/analytics/existing-resources/'
+        }
+        platform={'react'}
+      />
     );
     render(component);
-    const routeList = component.props.route.split('/').filter(function (el) {
-      return el != '';
-    });
     const breadcrumbsNode = await screen.findByLabelText('Breadcrumb');
-    const breadcrumbsList =
-      breadcrumbsNode.getElementsByClassName('breadcrumb__item');
-
-    let route = '';
-    for (let i = 0; i < breadcrumbsList.length; i++) {
-      const breadcrumbLink = breadcrumbsList[i].getElementsByClassName(
-        'amplify-breadcrumbs__link'
-      )[0];
-      route = route + '/' + routeList[i];
+    const breadcrumbsList = breadcrumbsNode.getElementsByClassName(
+      'amplify-breadcrumbs__link'
+    );
 
-      expect(breadcrumbLink).toBeInTheDocument();
-      expect(breadcrumbLink).toHaveAttribute('href', route);
-    }
+    const labels = Array.from(breadcrumbsList).map((el) => el.textContent);
+    // "add-aws-services" should be skipped since it has no directory entry
+    expect(labels).not.toContain('add-aws-services');
+    expect(labels).not.toContain(
+      '/[platform]/build-a-backend/add-aws-services'
+    );
+    // But other segments should still be present
+    expect(labels).toContain('React');
+    expect(labels).toContain('Build a Backend');
   });
 });

src/components/Breadcrumbs/index.tsx

@@ -67,6 +67,7 @@ function generateBreadcrumbs(
     if (url.includes('[platform]')) {
       href['query'] = { platform };
     }
+
     let label = directoryEntry ? directoryEntry.title : url;
 
     const override = overrides[url]
@@ -77,6 +78,11 @@ function generateBreadcrumbs(
       label = override;
     }
 
+    // Skip path segments that have no directory entry and no override.
+    // These are intermediate URL segments that were flattened out of
+    // the directory tree (e.g. "add-aws-services").
+    if (!directoryEntry && !override) return;
+
     breadcrumbs.push({
       href,
       label