fix(MessageItem): enable details view if Link overflows (#6893)

SAP · Feb 4, 2025 · e02a6fc · e02a6fc
1 parent bfe245a
commit e02a6fc
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 6 deletions.
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -1,4 +1,4 @@
-import codeCoverageTask from '@cypress/code-coverage/task';
+import codeCoverageTask from '@cypress/code-coverage/task.js';
 import { defineConfig } from 'cypress';
 
 export default defineConfig({

diff --git a/packages/main/src/components/MessageView/MessageItem.tsx b/packages/main/src/components/MessageView/MessageItem.tsx
@@ -94,12 +94,19 @@ const MessageItem = forwardRef<CustomListItemDomRef, MessageItemPropTypes>((prop
 
   const hasChildren = Children.count(children);
   useEffect(() => {
-    const titleTextObserver = new ResizeObserver(([titleTextSpan]) => {
-      if (titleTextSpan.target.scrollWidth > titleTextSpan.target.clientWidth) {
-        setIsTitleTextIsOverflowing(true);
-      } else {
-        setIsTitleTextIsOverflowing(false);
+    const titleTextObserver = new ResizeObserver(([titleTextSpanEntry]) => {
+      const child = titleTextSpanEntry.target.children[0];
+      const target = titleTextSpanEntry.target;
+      const isTargetOverflowing = target.scrollWidth > target.clientWidth;
+      let isChildOverflowing = false;
+
+      if (!isTargetOverflowing) {
+        const firstChild = child?.shadowRoot?.firstElementChild as HTMLAnchorElement | undefined;
+        if (firstChild) {
+          isChildOverflowing = firstChild.scrollWidth > firstChild.clientWidth;
+        }
       }
+      setIsTitleTextIsOverflowing(isTargetOverflowing || isChildOverflowing);
     });
     if (!hasChildren && titleTextRef.current) {
       titleTextObserver.observe(titleTextRef.current);

diff --git a/packages/main/src/components/MessageView/MessageView.cy.tsx b/packages/main/src/components/MessageView/MessageView.cy.tsx
@@ -2,6 +2,7 @@ import { useRef } from 'react';
 import { ValueState } from '../../enums/index.js';
 import { MessageItem } from './MessageItem';
 import { MessageView } from './index.js';
+import { Link } from '../../webComponents/Link/index.js';
 
 describe('MessageView', () => {
   it('default & grouped', () => {
@@ -164,4 +165,46 @@ describe('MessageView', () => {
     cy.findByText('SubtitleText').should('not.exist');
     cy.findByText('1337').should('not.exist');
   });
+
+  it('MessageItem - titleText overflow', () => {
+    const selectSpy = cy.spy().as('select');
+    cy.mount(
+      <MessageView style={{ width: '500px' }} showDetailsPageHeader onItemSelect={selectSpy}>
+        <MessageItem
+          data-testid="item1"
+          titleText={
+            <Link>
+              Long Error Message Type without children/details including a Link as `titleText` which has
+              wrappingType="None" applied. - The details view is only available if the `titleText` is not fully visible.
+              It is NOT recommended to use long titles!
+            </Link>
+          }
+          type={ValueState.Error}
+          counter={3}
+        />
+        <MessageItem
+          data-testid="item2"
+          titleText={
+            'Long Empty Message Type (no title, no subtitle, no children/details) - The details view is only available if the `titleText` is not fully visible. It is NOT recommended to use long titles!'
+          }
+          groupName={'Products'}
+        />
+        <MessageItem data-testid="item3" titleText="Error" type={ValueState.Negative} groupName="Group1" />
+      </MessageView>
+    );
+
+    cy.get('[name="slim-arrow-right"]').should('be.visible').and('have.length', 2);
+
+    cy.findByTestId('item1').click();
+    cy.get('@select').should('have.been.calledOnce');
+    cy.get('[name="slim-arrow-left"]').should('be.visible').and('have.length', 1).click();
+
+    cy.findByTestId('item2').click();
+    cy.get('@select').should('have.been.calledTwice');
+    cy.get('[name="slim-arrow-left"]').should('be.visible').and('have.length', 1).click();
+
+    cy.findByTestId('item3').click();
+    cy.get('@select').should('have.been.calledTwice');
+    cy.get('[name="slim-arrow-left"]').should('not.exist');
+  });
 });