Highlight linked comment

src/libs/Navigation/Navigation.js

@@ -10,6 +10,7 @@ import linkingConfig from './linkingConfig';
 import navigationRef from './navigationRef';
 import NAVIGATORS from '../../NAVIGATORS';
 import originalGetTopmostReportId from './getTopmostReportId';
+import originalGetTopmostReportActionId from './getTopmostReportActionID';
 import getStateFromPath from './getStateFromPath';
 import SCREENS from '../../SCREENS';
 import CONST from '../../CONST';
@@ -46,6 +47,9 @@ function canNavigate(methodName, params = {}) {
 // Re-exporting the getTopmostReportId here to fill in default value for state. The getTopmostReportId isn't defined in this file to avoid cyclic dependencies.
 const getTopmostReportId = (state = navigationRef.getState()) => originalGetTopmostReportId(state);
 
+// Re-exporting the getTopmostReportActionID here to fill in default value for state. The getTopmostReportActionID isn't defined in this file to avoid cyclic dependencies.
+const getTopmostReportActionId = (state = navigationRef.getState()) => originalGetTopmostReportActionId(state);
+
 /**
  * Method for finding on which index in stack we are.
  * @param {Object} route
@@ -268,6 +272,7 @@ export default {
  setIsNavigationReady,
  getTopmostReportId,
  getRouteNameFromStateEvent,
+ getTopmostReportActionId,
 };
 
 export {navigationRef};

src/libs/Navigation/getTopmostReportActionID.js

@@ -0,0 +1,42 @@
+import lodashFindLast from 'lodash/findLast';
+import lodashGet from 'lodash/get';
+
+// This function is in a separate file than Navigation.js to avoid cyclic dependency.
+
+/**
+ * Find the last visited report screen in the navigation state and get the linked reportActionID of it.
+ *
+ * @param {Object} state - The react-navigation state
+ * @returns {String | undefined} - It's possible that there is no report screen
+ */
+function getTopmostReportActionID(state) {
+ if (!state) {
+ return;
+ }
+ const topmostCentralPane = lodashFindLast(state.routes, (route) => route.name === 'CentralPaneNavigator');
+
+ if (!topmostCentralPane) {
+ return;
+ }
+
+ const directReportActionIDParam = lodashGet(topmostCentralPane, 'params.params.reportActionID');
+
+ if (!topmostCentralPane.state && !directReportActionIDParam) {
+ return;
+ }
+
+ if (directReportActionIDParam) {
+ return directReportActionIDParam;
+ }
+
+ const topmostReport = lodashFindLast(topmostCentralPane.state.routes, (route) => route.name === 'Report');
+ if (!topmostReport) {
+ return;
+ }
+
+ const topmostReportActionID = lodashGet(topmostReport, 'params.reportActionID');
+
+ return topmostReportActionID;
+}
+
+export default getTopmostReportActionID;

src/pages/home/report/ReportActionItem.js

@@ -1,9 +1,10 @@
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
-import React, {useState, useRef, useEffect, memo, useCallback, useContext} from 'react';
+import React, {useState, useRef, useEffect, memo, useCallback, useContext, useMemo} from 'react';
 import {InteractionManager, View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
+import {useRoute} from '@react-navigation/native';
 import CONST from '../../../CONST';
 import ONYXKEYS from '../../../ONYXKEYS';
 import reportActionPropTypes from './reportActionPropTypes';
@@ -61,12 +62,13 @@ import * as Session from '../../../libs/actions/Session';
 import MoneyRequestView from '../../../components/ReportActionItem/MoneyRequestView';
 import {hideContextMenu} from './ContextMenu/ReportActionContextMenu';
 import * as PersonalDetailsUtils from '../../../libs/PersonalDetailsUtils';
-import ReportActionItemBasicMessage from './ReportActionItemBasicMessage';
 import * as store from '../../../libs/actions/ReimbursementAccount/store';
 import * as BankAccounts from '../../../libs/actions/BankAccounts';
 import {ReactionListContext} from '../ReportScreenContext';
 import usePrevious from '../../../hooks/usePrevious';
 import Permissions from '../../../libs/Permissions';
+import themeColors from '../../../styles/themes/default';
+import ReportActionItemBasicMessage from './ReportActionItemBasicMessage';
 import RenderHTML from '../../../components/RenderHTML';
 import ReportAttachmentsContext from './ReportAttachmentsContext';
 
@@ -127,6 +129,7 @@ const defaultProps = {
 };
 
 function ReportActionItem(props) {
+ const route = useRoute();
  const [isContextMenuActive, setIsContextMenuActive] = useState(ReportActionContextMenu.isActiveReportAction(props.action.reportActionID));
  const [isHidden, setIsHidden] = useState(false);
  const [moderationDecision, setModerationDecision] = useState(CONST.MODERATION.MODERATOR_DECISION_APPROVED);
@@ -138,6 +141,10 @@ function ReportActionItem(props) {
  const prevDraftMessage = usePrevious(props.draftMessage);
  const originalReportID = ReportUtils.getOriginalReportID(props.report.reportID, props.action);
  const originalReport = props.report.reportID === originalReportID ? props.report : ReportUtils.getReport(originalReportID);
+ const reportActionID = lodashGet(route, 'params.reportActionID');
+ const isReportActionLinked = reportActionID === props.action.reportActionID;
+
+ const highlightedBackgroundColorIfNeeded = useMemo(() => (isReportActionLinked ? StyleUtils.getBackgroundColorStyle(themeColors.highlightBG) : {}), [isReportActionLinked]);
 
  // When active action changes, we need to update the `isContextMenuActive` state
  const isActiveReportActionForMenu = ReportActionContextMenu.isActiveReportAction(props.action.reportActionID);
@@ -594,7 +601,7 @@ function ReportActionItem(props) {
  disabled={Boolean(props.draftMessage)}
  >
  {(hovered) => (
- <View>
+ <View style={highlightedBackgroundColorIfNeeded}>
  {props.shouldDisplayNewMarker && <UnreadActionIndicator reportActionID={props.action.reportActionID} />}
  <MiniReportActionContextMenu
  reportID={props.report.reportID}
@@ -643,7 +650,7 @@ function ReportActionItem(props) {
  />
  </View>
  )}
- {renderReportActionItem(hovered, isWhisper, hasErrors)}
+ {renderReportActionItem(hovered || isReportActionLinked, isWhisper, hasErrors)}
  </OfflineWithFeedback>
  </View>
  </View>

src/pages/home/sidebar/SidebarLinks.js

@@ -141,7 +141,12 @@ class SidebarLinks extends React.PureComponent {
  // or when clicking the active LHN row on large screens
  // or when continuously clicking different LHNs, only apply to small screen
  // since getTopmostReportId always returns on other devices
- if (this.props.isCreateMenuOpen || option.reportID === Navigation.getTopmostReportId() || (this.props.isSmallScreenWidth && this.props.isActiveReport(option.reportID))) {
+ const reportActionID = Navigation.getTopmostReportActionId();
+ if (
+ this.props.isCreateMenuOpen ||
+ (option.reportID === Navigation.getTopmostReportId() && !reportActionID) ||
+ (this.props.isSmallScreenWidth && this.props.isActiveReport(option.reportID) && !reportActionID)
+ ) {
  return;
  }
  Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(option.reportID));