[HOLD] Comment linking

src/CONST.js

@@ -110,6 +110,7 @@ const CONST = {
         IOU_SEND: 'sendMoney',
         POLICY_ROOMS: 'policyRooms',
         POLICY_EXPENSE_CHAT: 'policyExpenseChat',
+        COMMENT_LINKING: 'commentLinking',
     },
     BUTTON_STATES: {
         DEFAULT: 'default',
@@ -222,6 +223,7 @@ const CONST = {
 
     // Use Environment.getEnvironmentURL to get the complete URL with port number
     DEV_NEW_EXPENSIFY_URL: 'http://localhost:',
+    DEV_NEW_EXPENSIFY_URL_WITH_PORT_REGEX: /^[a-z]{4,5}:\/{2}[a-z]{1,}:[0-9]{1,4}\//,
 
     OPTION_TYPE: {
         REPORT: 'report',

src/ROUTES.js

@@ -40,7 +40,7 @@ export default {
     NEW_GROUP: 'new/group',
     NEW_CHAT: 'new/chat',
     REPORT,
-    REPORT_WITH_ID: 'r/:reportID',
+    REPORT_WITH_ID: 'r/:reportID/:reportActionID?',
     getReportRoute: reportID => `r/${reportID}`,
     IOU_REQUEST,
     IOU_BILL,
@@ -128,7 +128,9 @@ export default {
         const pathSegments = route.split('/');
         return {
             reportID: lodashGet(pathSegments, 1),
-            isParticipantsRoute: Boolean(lodashGet(pathSegments, 2)),
+            isParticipantsRoute: lodashGet(pathSegments, 2) === 'participants',
+            isDetailsRoute: lodashGet(pathSegments, 2) === 'details',
+            isSettingsRoute: lodashGet(pathSegments, 2) === 'settings',
         };
     },
 };

src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js

@@ -22,8 +22,9 @@ const AnchorRenderer = (props) => {
     const displayName = lodashGet(props.tnode, 'domNode.children[0].data', '');
     const parentStyle = lodashGet(props.tnode, 'parent.styles.nativeTextRet', {});
     const attrHref = htmlAttribs.href || '';
-    const internalNewExpensifyPath = (attrHref.startsWith(CONST.NEW_EXPENSIFY_URL) && attrHref.replace(CONST.NEW_EXPENSIFY_URL, ''))
-        || (attrHref.startsWith(CONST.STAGING_NEW_EXPENSIFY_URL) && attrHref.replace(CONST.STAGING_NEW_EXPENSIFY_URL, ''));
+    const internalNewExpensifyPath = (attrHref.startsWith(CONST.DEV_NEW_EXPENSIFY_URL) && attrHref.replace(CONST.DEV_NEW_EXPENSIFY_URL_WITH_PORT_REGEX, ''))
+        || (attrHref.startsWith(CONST.STAGING_NEW_EXPENSIFY_URL) && attrHref.replace(CONST.STAGING_NEW_EXPENSIFY_URL, ''))
+        || (attrHref.startsWith(CONST.NEW_EXPENSIFY_URL) && attrHref.replace(CONST.NEW_EXPENSIFY_URL, ''));
     const internalExpensifyPath = attrHref.startsWith(CONFIG.EXPENSIFY.EXPENSIFY_URL) && attrHref.replace(CONFIG.EXPENSIFY.EXPENSIFY_URL, '');
 
     // If we are handling a New Expensify link then we will assume this should be opened by the app internally. This ensures that the links are opened internally via react-navigation

src/components/InvertedFlatList/BaseInvertedFlatList.js

@@ -26,12 +26,20 @@ const propTypes = {
 
     /** Should we remove the clipped sub views? */
     shouldRemoveClippedSubviews: PropTypes.bool,
+
+    /** Padding that we should account for in our sizeMap */
+    measurementPadding: PropTypes.number,
+
+    /** Callback for when measurement is done */
+    onMeasurementEnd: PropTypes.func,
 };
 
 const defaultProps = {
     data: [],
     shouldMeasureItems: false,
     shouldRemoveClippedSubviews: false,
+    measurementPadding: 0,
+    onMeasurementEnd: () => {},
 };
 
 class BaseInvertedFlatList extends Component {
@@ -96,22 +104,36 @@ class BaseInvertedFlatList extends Component {
     measureItemLayout(nativeEvent, index) {
         const computedHeight = nativeEvent.layout.height;
 
-        // We've already measured this item so we don't need to
-        // measure it again.
-        if (this.sizeMap[index]) {
+        // Before an item is rendered on screen its possible its computedHeight is 0 so let's return early and once its rendered it will it this method again with proper values.
+        if (computedHeight === 0) {
             return;
         }
 
-        const previousItem = this.sizeMap[index - 1] || {};
+        // We've already measured this item so we don't need to measure it again.
+        if (this.sizeMap[index]) {
+            return;
+        }
 
-        // If there is no previousItem this can mean we haven't yet measured
-        // the previous item or that we are at index 0 and there is no previousItem
-        const previousLength = previousItem.length || 0;
-        const previousOffset = previousItem.offset || 0;
         this.sizeMap[index] = {
             length: computedHeight,
-            offset: previousLength + previousOffset,
         };
+
+        if (_.size(this.sizeMap) === this.props.data.length) {
+            // All items have been measured so update the offset now that we have all heights
+            for (let i = 0; i < this.props.data.length; i++) {
+                // If there is no previousItem we are at index 0 and there is no previousItem
+                const previousItem = this.sizeMap[i - 1] || {};
+
+                if (i === 0 && this.props.measurementPadding) {
+                    this.sizeMap[0].length += this.props.measurementPadding;
+                }
+
+                const previousLength = previousItem.length || 0;
+                const previousOffset = previousItem.offset || 0;
+                this.sizeMap[i].offset = previousLength + previousOffset;
+            }
+            this.props.onMeasurementEnd();
+        }
     }
 
     /**
@@ -134,7 +156,10 @@ class BaseInvertedFlatList extends Component {
             );
         }
 
-        return this.props.renderItem({item, index});
+        // For native platforms, for scrollIndex to work properly since we're not measuring items we'll want to track
+        // when the reportActionID is rendered so that we can scroll to it.
+        const shouldTrackItemRendered = true;
+        return this.props.renderItem({item, index, shouldTrackItemRendered});
     }
 
     render() {
@@ -155,6 +180,7 @@ class BaseInvertedFlatList extends Component {
                 windowSize={15}
                 removeClippedSubviews={this.props.shouldRemoveClippedSubviews}
                 maintainVisibleContentPosition={{minIndexForVisible: 0, autoscrollToTopThreshold: 0}}
+                onScrollToIndexFailed={() => {}}
             />
         );
     }

src/libs/Navigation/CustomActions.js

@@ -79,13 +79,20 @@ function pushDrawerRoute(route) {
             navigateBackToRootDrawer();
         }
 
-        // If we're trying to navigate to the same screen that is already active there's nothing more to do except close the drawer.
-        // This prevents unnecessary re-rendering the screen and adding duplicate items to the browser history.
         const activeState = getActiveState();
         const activeScreenName = getScreenNameFromState(activeState);
         const activeScreenParams = getParamsFromState(activeState);
-        if (newScreenName === activeScreenName && _.isEqual(activeScreenParams, newScreenParams)) {
-            return DrawerActions.closeDrawer();
+        if (newScreenName === activeScreenName && activeScreenParams.reportID === newScreenParams.reportID) {
+            // If we're trying to navigate to the same screen that is already active there's nothing more to do except close the drawer.
+            // This prevents unnecessary re-rendering the screen and adding duplicate items to the browser history.
+            if (!newScreenParams.reportActionID) {
+                return DrawerActions.closeDrawer();
+            }
+
+            // If we're trying to navigate to the same screen with a new prop then let's just set the new params and not reset the navigation.
+            if (activeScreenParams.reportActionID !== newScreenParams.reportActionID) {
+                return CommonActions.setParams(newScreenParams);
+            }
         }
 
         let state = currentState;

src/libs/Navigation/Navigation.js

@@ -105,7 +105,7 @@ function goBack(shouldOpenDrawer = true) {
 }
 
 /**
- * We navigate to the certains screens with a custom action so that we can preserve the browser history in web. react-navigation does not handle this well
+ * We navigate to the certain screens with a custom action so that we can preserve the browser history in web. react-navigation does not handle this well
  * and only offers a "mobile" navigation paradigm e.g. in order to add a history item onto the browser history stack one would need to use the "push" action.
  * However, this is not performant as it would keep stacking ReportScreen instances (which are quite expensive to render).
  * We're also looking to see if we have a participants route since those also have a reportID param, but do not have the problem described above and should not use the custom action.
@@ -114,8 +114,13 @@ function goBack(shouldOpenDrawer = true) {
  * @returns {Boolean}
  */
 function isDrawerRoute(route) {
-    const {reportID, isParticipantsRoute} = ROUTES.parseReportRouteParams(route);
-    return reportID && !isParticipantsRoute;
+    const {
+        reportID,
+        isParticipantsRoute,
+        isDetailsRoute,
+        isSettingsRoute,
+    } = ROUTES.parseReportRouteParams(route);
+    return reportID && !isParticipantsRoute && !isDetailsRoute && !isSettingsRoute;
 }
 
 /**

src/libs/Permissions.js

@@ -86,6 +86,14 @@ function canUsePolicyExpenseChat(betas) {
     return _.contains(betas, CONST.BETAS.POLICY_EXPENSE_CHAT) || canUseAllBetas(betas);
 }
 
+/**
+ * @param {Array<String>} betas
+ * @returns {Boolean}
+ */
+function canUseCommentLinking(betas) {
+    return _.contains(betas, CONST.BETAS.COMMENT_LINKING) || canUseAllBetas(betas);
+}
+
 export default {
     canUseChronos,
     canUseIOU,
@@ -96,4 +104,5 @@ export default {
     canUseWallet,
     canUsePolicyRooms,
     canUsePolicyExpenseChat,
+    canUseCommentLinking,
 };

src/pages/home/ReportScreen.js

@@ -31,6 +31,9 @@ const propTypes = {
         params: PropTypes.shape({
             /** The ID of the report this screen should display */
             reportID: PropTypes.string,
+
+            /** The reportActionID to scroll to */
+            reportActionID: PropTypes.string,
         }).isRequired,
     }).isRequired,
 
@@ -229,6 +232,7 @@ class ReportScreen extends React.Component {
                         {!this.shouldShowLoader() && (
                             <ReportActionsView
                                 reportID={reportID}
+                                reportActionID={Permissions.canUseCommentLinking(this.props.betas) ? this.props.route.params.reportActionID : ''}
                                 reportActions={this.props.reportActions}
                                 report={this.props.report}
                                 session={this.props.session}

src/pages/home/report/ReportActionItem.js

@@ -2,7 +2,7 @@ import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import React, {Component} from 'react';
 import {withOnyx} from 'react-native-onyx';
-import {View} from 'react-native';
+import {View, Animated} from 'react-native';
 import PropTypes from 'prop-types';
 import CONST from '../../../CONST';
 import ONYXKEYS from '../../../ONYXKEYS';
@@ -28,6 +28,7 @@ import {withNetwork, withReportActionsDrafts} from '../../../components/OnyxProv
 import RenameAction from '../../../components/ReportActionItem/RenameAction';
 import InlineSystemMessage from '../../../components/InlineSystemMessage';
 import styles from '../../../styles/styles';
+import colors from '../../../styles/colors';
 
 const propTypes = {
     /** The ID of the report this action is on. */
@@ -54,6 +55,12 @@ const propTypes = {
     /** Draft message - if this is set the comment is in 'edit' mode */
     draftMessage: PropTypes.string,
 
+    /** Should we highlight the current report action item */
+    shouldHighlight: PropTypes.bool.isRequired,
+
+    /** Callback for when the item is rendered */
+    onItemRendered: PropTypes.func.isRequired,
+
     ...windowDimensionsPropTypes,
 };
 
@@ -71,6 +78,20 @@ class ReportActionItem extends Component {
         };
         this.checkIfContextMenuActive = this.checkIfContextMenuActive.bind(this);
         this.showPopover = this.showPopover.bind(this);
+        this.animatedBackgroundColor = new Animated.Value(0);
+        const interpolatedBackgroundColor = this.animatedBackgroundColor.interpolate(
+            {
+                inputRange: [0, 1],
+                outputRange: [colors.white, colors.honeydew],
+            },
+        );
+        this.animatedBackgroundStyle = {
+            backgroundColor: interpolatedBackgroundColor,
+        };
+    }
+
+    componentDidMount() {
+        this.props.onItemRendered(this.props.action.reportActionID);
     }
 
     shouldComponentUpdate(nextProps, nextState) {
@@ -80,10 +101,15 @@ class ReportActionItem extends Component {
             || this.props.hasOutstandingIOU !== nextProps.hasOutstandingIOU
             || this.props.shouldDisplayNewIndicator !== nextProps.shouldDisplayNewIndicator
             || !_.isEqual(this.props.action, nextProps.action)
+            || !_.isEqual(this.props.shouldHighlight, nextProps.shouldHighlight)
             || this.state.isContextMenuActive !== nextState.isContextMenuActive;
     }
 
     componentDidUpdate(prevProps) {
+        if (this.props.shouldHighlight) {
+            this.animateBackground();
+        }
+
         if (prevProps.draftMessage || !this.props.draftMessage) {
             return;
         }
@@ -92,6 +118,23 @@ class ReportActionItem extends Component {
         this.textInput.focus();
     }
 
+    /**
+     * Animate the background of the item
+     */
+    animateBackground() {
+        Animated.timing(this.animatedBackgroundColor, {
+            toValue: 1,
+            duration: 0,
+            useNativeDriver: false,
+        }).start(() => {
+            Animated.timing(this.animatedBackgroundColor, {
+                toValue: 0,
+                duration: 5500,
+                useNativeDriver: false,
+            }).start();
+        });
+    }
+
     /**
      * Show the ReportActionContextMenu modal popover.
      *
@@ -166,7 +209,7 @@ class ReportActionItem extends Component {
             >
                 <Hoverable resetsOnClickOutside>
                     {hovered => (
-                        <View>
+                        <Animated.View style={this.animatedBackgroundStyle}>
                             {this.props.shouldDisplayNewIndicator && (
                                 <UnreadActionIndicator />
                             )}
@@ -201,7 +244,7 @@ class ReportActionItem extends Component {
                                 }
                                 draftMessage={this.props.draftMessage}
                             />
-                        </View>
+                        </Animated.View>
                     )}
                 </Hoverable>
                 <View style={styles.reportActionSystemMessageContainer}>

src/pages/home/report/ReportActionsList.js

@@ -35,6 +35,12 @@ const propTypes = {
         hasOutstandingIOU: PropTypes.bool,
     }).isRequired,
 
+    /** The reportActionID provided in the URL */
+    reportActionID: PropTypes.string.isRequired,
+
+    /** Should the reportActionID be highlighted */
+    shouldHighlightReportActionID: PropTypes.bool.isRequired,
+
     /** Sorted actions prepared for display */
     sortedReportActions: PropTypes.arrayOf(PropTypes.shape({
         /** Index of the action in the array */
@@ -56,6 +62,12 @@ const propTypes = {
     /** Callback executed on scroll */
     onScroll: PropTypes.func.isRequired,
 
+    /** Callback for when the item is rendered */
+    onItemRendered: PropTypes.func.isRequired,
+
+    /** Callback for when measurement is done */
+    onMeasurementEnd: PropTypes.func.isRequired,
+
     /** Function to load more chats */
     loadMoreChats: PropTypes.func.isRequired,
 
@@ -115,6 +127,7 @@ class ReportActionsList extends React.Component {
     renderItem({
         item,
         index,
+        shouldTrackItemRendered,
     }) {
         const shouldDisplayNewIndicator = this.props.report.newMarkerSequenceNumber > 0
             && item.action.sequenceNumber === this.props.report.newMarkerSequenceNumber;
@@ -127,6 +140,8 @@ class ReportActionsList extends React.Component {
                 isMostRecentIOUReportAction={item.action.sequenceNumber === this.props.mostRecentIOUReportSequenceNumber}
                 hasOutstandingIOU={this.props.report.hasOutstandingIOU}
                 index={index}
+                shouldHighlight={this.props.shouldHighlightReportActionID && this.props.reportActionID === item.action.reportActionID}
+                onItemRendered={shouldTrackItemRendered ? this.props.onItemRendered : () => {}}
             />
         );
     }
@@ -177,6 +192,8 @@ class ReportActionsList extends React.Component {
                 onLayout={this.props.onLayout}
                 onScroll={this.props.onScroll}
                 extraData={extraData}
+                measurementPadding={shouldShowReportRecipientLocalTime ? 0 : styles.chatContentScrollView.paddingVertical}
+                onMeasurementEnd={this.props.onMeasurementEnd}
             />
         );
     }