highlight action when previous is a whisper

src/libs/ReportActionsUtils.js

@@ -586,6 +586,19 @@ function getExpandHoverArea(reportActions, actionIndex) {
     return expandHoverArea;
 }
 
+/**
+ * A helper function to understand is the previous action a whisper
+ *
+ * @param {Array} reportActions
+ * @param {Number} actionIndex - index of the comment item in state to check
+ * @returns {Array<String>}
+ */
+function isPrevActionWhisper(reportActions, actionIndex) {
+    const prevAction = reportActions[actionIndex + 1];
+
+    return lodashGet(prevAction, 'whisperedToAccountIDs.length', 0) > 0;
+}
+
 export {
     getSortedReportActions,
     getLastVisibleAction,
@@ -619,4 +632,5 @@ export {
     isPendingRemove,
     getReportAction,
     getExpandHoverArea,
+    isPrevActionWhisper,
 };

src/pages/home/report/ReportActionItem.js

@@ -116,6 +116,9 @@ const propTypes = {
      * It gets strings: "top" and "bottom".
      * */
     expandHoverArea: PropTypes.arrayOf(PropTypes.string),
+
+    /** A value to understand is the previous action a whisper */
+    isPrevActionWhisper: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -128,6 +131,7 @@ const defaultProps = {
     shouldHideThreadDividerLine: false,
     separatorActions: {},
     expandHoverArea: [],
+    isPrevActionWhisper: false,
 };
 
 function ReportActionItem(props) {
@@ -151,15 +155,15 @@ function ReportActionItem(props) {
             return;
         }
 
-        if (isWhisper && props.displayAsGroup) {
+        if (isWhisper && (props.displayAsGroup || props.isPrevActionWhisper)) {
             props.separatorActions.highlight();
         } else {
             props.separatorActions.unhighlight();
         }
         // This useEffect should be invoked as less as possible.
         // It still has all dependencies, but tracks directly each value.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isWhisper, props.displayAsGroup, props.separatorActions.highlight, props.separatorActions.unhighlight]);
+    }, [isWhisper, props.displayAsGroup, props.isPrevActionWhisper, props.separatorActions.highlight, props.separatorActions.unhighlight]);
 
     useEffect(
         () => () => {

src/pages/home/report/ReportActionsList.js

@@ -157,6 +157,7 @@ function ReportActionsList(props) {
                         unhighlight: separators.unhighlight,
                     }}
                     expandHoverArea={expandHoverArea}
+                    isPrevActionWhisper={ReportActionsUtils.isPrevActionWhisper(sortedReportActions, index)}
                 />
             );
         },