MessageView: fix lint errors

Author: Lukas742

packages/main/src/components/MessageItem/MessageItem.module.css

@@ -34,6 +34,13 @@
   height: 1rem;
 }
 
+.titleContainer {
+  flex: auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .title {
   font-family: var(--sapFontHeaderFamily);
   font-size: var(--_ui5wcr-MessageItemTitleFontSize);

packages/main/src/components/MessageItem/index.tsx

@@ -69,6 +69,14 @@ const MessageItem = forwardRef<ListItemCustomDomRef, MessageItemPropTypes>((prop
   const titleTextRef = useRef<HTMLSpanElement>(null);
   const hasDetails = !!(children || isTitleTextOverflowing);
   const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
+  const titleTextStr = (() => {
+    if (typeof titleText === 'string') {
+      return titleText;
+    } else if (isValidElement<LinkPropTypes>(titleText) && typeof titleText.props.children === 'string') {
+      return titleText.props.children;
+    }
+    return '';
+  })();
 
   useStylesheet(styleData, MessageItem.displayName);
 
@@ -125,14 +133,6 @@ const MessageItem = forwardRef<ListItemCustomDomRef, MessageItemPropTypes>((prop
     };
   }, [hasChildren]);
 
-  useEffect(() => {
-    if (typeof titleText === 'string') {
-      setTitleTextStr(titleText);
-    } else if (isValidElement<LinkPropTypes>(titleText) && typeof titleText.props.children === 'string') {
-      setTitleTextStr(titleText.props.children);
-    }
-  }, [titleText]);
-
   return (
     <ListItemCustom
       onClick={handleListItemClick}
@@ -148,10 +148,7 @@ const MessageItem = forwardRef<ListItemCustomDomRef, MessageItemPropTypes>((prop
         <div className={classNames.iconContainer}>
           <Icon name={getIconNameForType(type as ValueState)} className={classNames.icon} mode={IconMode.Decorative} />
         </div>
-        <FlexBox
-          direction={FlexBoxDirection.Column}
-          style={{ flex: 'auto', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
-        >
+        <FlexBox direction={FlexBoxDirection.Column} className={classNames.titleContainer}>
           {titleText && (
             <span className={classNames.title} ref={titleTextRef}>
               {titleText}

packages/main/src/components/MessageView/index.tsx

@@ -158,7 +158,7 @@ const MessageView = forwardRef<MessageViewDomRef, MessageViewPropTypes>((props,
     if (internalRef.current) {
       internalRef.current.navigateBack = navigateBack;
     }
-  }, [internalRef.current, navigateBack]);
+  }, [internalRef, navigateBack]);
 
   const handleListFilterChange: SegmentedButtonPropTypes['onSelectionChange'] = (e) => {
     setListFilter(e.detail.selectedItems.at(0).dataset.key as never);