[EuiBreadcrumbs] Fix the last breadcrumb in the array not respecting …

…`truncate` overrides (#6280)

* [REVERT ME] Local reproduction of last breadcrumb issue

- not respecting `truncate: true` on child breadcrumb when it should

* Fix last EuiBreadcrumb in array to respect `truncate: true` or `false` over parent `truncate`

+ minor opinioted change: don't allow `breadcrumb` objs coming in from consumers to override internal props coming in from EuiBreadcrumbs parent

* write a bunch of unit tests

* changelog

* Revert "[REVERT ME] Local reproduction of last breadcrumb issue"

This reverts commit 233ae6a.

src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap

@@ -629,88 +629,31 @@ exports[`EuiBreadcrumbs props responsive is rendered with custom breakpoints 1`]
 </nav>
 `;
 
-exports[`EuiBreadcrumbs props truncate as false is rendered 1`] = `
+exports[`EuiBreadcrumbs truncation setting truncate on breadcrumbs parents cascades down to all children 1`] = `
 <nav
   aria-label="Breadcrumbs"
   class="euiBreadcrumbs"
 >
   <ol
     class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list"
   >
-    <li
-      class="euiBreadcrumb emotion-euiBreadcrumb-page"
-    >
-      <a
-        class="euiLink euiBreadcrumb__content customClass emotion-euiLink-primary-euiBreadcrumb__content-page"
-        data-test-subj="breadcrumbsAnimals"
-        href="#"
-        rel="noreferrer"
-      >
-        Animals
-      </a>
-    </li>
     <li
       class="euiBreadcrumb emotion-euiBreadcrumb-page"
     >
       <span
         class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page-euiTextColor-subdued"
       >
-        Metazoans
+        A
       </span>
     </li>
-    <li
-      class="euiBreadcrumb emotion-euiBreadcrumb-page-isCollapsed"
-    >
-      <div
-        class="euiPopover emotion-euiPopover"
-      >
-        <div
-          class="euiPopover__anchor css-16vtueo-render"
-        >
-          <button
-            aria-label="See collapsed breadcrumbs"
-            class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-page"
-            title="See collapsed breadcrumbs"
-            type="button"
-          >
-            … 
-            <span
-              data-euiicon-type="arrowDown"
-            />
-          </button>
-        </div>
-      </div>
-    </li>
-    <li
-      class="euiBreadcrumb emotion-euiBreadcrumb-page"
-    >
-      <button
-        class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-page"
-        type="button"
-      >
-        Reptiles
-      </button>
-    </li>
-    <li
-      class="euiBreadcrumb emotion-euiBreadcrumb-page"
-    >
-      <a
-        class="euiLink euiBreadcrumb__content emotion-euiLink-subdued-euiBreadcrumb__content-page-isTruncated"
-        href="#"
-        rel="noreferrer"
-        title="Boa constrictor has an error"
-      >
-        Boa constrictor
-      </a>
-    </li>
     <li
       class="euiBreadcrumb emotion-euiBreadcrumb-page"
     >
       <span
         aria-current="page"
         class="euiBreadcrumb__content emotion-euiBreadcrumb__content-page-euiTextColor-default"
       >
-        Edit
+        B
       </span>
     </li>
   </ol>

src/components/breadcrumbs/breadcrumb.tsx

@@ -63,6 +63,7 @@ type _EuiBreadcrumbProps = {
   isLastBreadcrumb?: boolean;
   isOnlyBreadcrumb?: boolean;
   highlightLastBreadcrumb?: boolean;
+  truncateLastBreadcrumb?: boolean;
 } & Pick<EuiBreadcrumbProps, 'truncate'>;
 
 export const EuiBreadcrumb: FunctionComponent<
@@ -100,6 +101,7 @@ export const EuiBreadcrumbContent: FunctionComponent<
   isLastBreadcrumb,
   isOnlyBreadcrumb,
   highlightLastBreadcrumb,
+  truncateLastBreadcrumb,
   ...rest
 }) => {
   const classes = classNames('euiBreadcrumb__content', className);
@@ -109,8 +111,8 @@ export const EuiBreadcrumbContent: FunctionComponent<
   const cssStyles = [
     styles.euiBreadcrumb__content,
     styles[type],
-    truncate &&
-      (isLastBreadcrumb ? styles.isTruncatedLast : styles.isTruncated),
+    truncate && !truncateLastBreadcrumb && styles.isTruncated,
+    truncateLastBreadcrumb && styles.isTruncatedLast,
   ];
   if (type === 'application') {
     if (isOnlyBreadcrumb) {

src/components/breadcrumbs/breadcrumbs.test.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import { render } from 'enzyme';
-import { requiredProps } from '../../test';
+import { requiredProps, replaceEmotionPrefix } from '../../test';
 
 import { EuiBreadcrumbs, EuiBreadcrumb } from './';
 
@@ -74,6 +74,101 @@ describe('EuiBreadcrumbs', () => {
     expect(component).toMatchSnapshot();
   });
 
+  describe('truncation', () => {
+    test('setting truncate on breadcrumbs parents cascades down to all children', () => {
+      const component = render(
+        <EuiBreadcrumbs
+          breadcrumbs={[{ text: 'A' }, { text: 'B' }]}
+          truncate={false}
+        />
+      );
+      expect(component).toMatchSnapshot();
+    });
+
+    const getBreadcrumbClass = (component: Cheerio, dataTestSubj: string) =>
+      replaceEmotionPrefix(
+        component.find(`[data-test-subj=${dataTestSubj}]`).attr('class')
+      );
+
+    test('child breadcrumbs can override truncate set on parent breadcrumbs', () => {
+      const component = render(
+        <>
+          <EuiBreadcrumbs
+            breadcrumbs={[
+              { text: 'A', 'data-test-subj': 'A', truncate: false },
+              { text: 'B', 'data-test-subj': 'B' },
+            ]}
+            truncate
+          />
+          <EuiBreadcrumbs
+            breadcrumbs={[
+              { text: 'C', 'data-test-subj': 'C', truncate: true },
+              { text: 'D', 'data-test-subj': 'D' },
+            ]}
+            truncate={false}
+          />
+        </>
+      );
+      expect(getBreadcrumbClass(component, 'A')).toEqual(
+        'emotion-euiBreadcrumb__content-page-euiTextColor-subdued'
+      );
+      expect(getBreadcrumbClass(component, 'C')).toEqual(
+        'emotion-euiBreadcrumb__content-page-isTruncated-euiTextColor-subdued'
+      );
+    });
+
+    describe('last breadcrumb', () => {
+      describe('if the parent truncate is true and the last breadcrumb does not have its own truncate property', () => {
+        it('sets a isTruncatedLast style that allows the last breadcrumb to occupy the remaining width of the breadcrumbs line', () => {
+          const component = render(
+            <EuiBreadcrumbs
+              breadcrumbs={[
+                { text: 'A' },
+                { text: 'B', 'data-test-subj': 'last' },
+              ]}
+              truncate
+            />
+          );
+          expect(getBreadcrumbClass(component, 'last')).toEqual(
+            'emotion-euiBreadcrumb__content-page-isTruncatedLast-euiTextColor-default'
+          );
+        });
+      });
+
+      describe('if the last breadcrumb has its own truncate property', () => {
+        it('uses the normal isTruncated if truncate is true', () => {
+          const component = render(
+            <EuiBreadcrumbs
+              breadcrumbs={[
+                { text: 'A' },
+                { text: 'B', 'data-test-subj': 'last', truncate: true },
+              ]}
+              truncate
+            />
+          );
+          expect(getBreadcrumbClass(component, 'last')).toEqual(
+            'emotion-euiBreadcrumb__content-page-isTruncated-euiTextColor-default'
+          );
+        });
+
+        it('does not set any truncation classes if truncate is false', () => {
+          const component = render(
+            <EuiBreadcrumbs
+              breadcrumbs={[
+                { text: 'A' },
+                { text: 'B', 'data-test-subj': 'last', truncate: false },
+              ]}
+              truncate
+            />
+          );
+          expect(getBreadcrumbClass(component, 'last')).toEqual(
+            'emotion-euiBreadcrumb__content-page-euiTextColor-default'
+          );
+        });
+      });
+    });
+  });
+
   describe('props', () => {
     describe('responsive', () => {
       test('is rendered', () => {
@@ -101,15 +196,6 @@ describe('EuiBreadcrumbs', () => {
       });
     });
 
-    describe('truncate as false', () => {
-      test('is rendered', () => {
-        const component = render(
-          <EuiBreadcrumbs breadcrumbs={breadcrumbs} truncate={false} />
-        );
-        expect(component).toMatchSnapshot();
-      });
-    });
-
     describe('max', () => {
       test('renders 1 item', () => {
         const component = render(

src/components/breadcrumbs/breadcrumbs.tsx

@@ -120,7 +120,7 @@ export const EuiBreadcrumbs: FunctionComponent<EuiBreadcrumbsProps> = ({
         const isLastBreadcrumb = index === visibleBreadcrumbs.length - 1;
         const isOnlyBreadcrumb = visibleBreadcrumbs.length === 1;
 
-        const sharedProps = { type, truncate };
+        const sharedProps = { type, truncate: breadcrumb.truncate ?? truncate };
 
         return breadcrumb.isCollapsedButton ? (
           <EuiBreadcrumbCollapsed
@@ -139,14 +139,17 @@ export const EuiBreadcrumbs: FunctionComponent<EuiBreadcrumbsProps> = ({
         ) : (
           <EuiBreadcrumb key={index} {...sharedProps}>
             <EuiBreadcrumbContent
+              {...breadcrumb}
+              {...sharedProps}
               isFirstBreadcrumb={isFirstBreadcrumb}
               isLastBreadcrumb={isLastBreadcrumb}
               isOnlyBreadcrumb={isOnlyBreadcrumb}
               highlightLastBreadcrumb={
                 isLastBreadcrumb && lastBreadcrumbIsCurrentPage
               }
-              {...sharedProps}
-              {...breadcrumb}
+              truncateLastBreadcrumb={
+                isLastBreadcrumb && truncate && breadcrumb.truncate == null
+              }
             />
           </EuiBreadcrumb>
         );

upcoming_changelogs/6280.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed the last breadcrumb in `EuiBreadcrumbs`'s `breadcrumbs` array not respecting `truncate` overrides