Add ReportActionItemThread and Thread Replies UI

src/languages/en.js

@@ -1274,4 +1274,8 @@ export default {
         chatUserDisplayNames: 'Chat user display names',
         scrollToNewestMessages: 'Scroll to newest messages',
     },
+    threads: {
+        lastReplyAt: 'Last Reply at',
+        replies: 'Replies',
+    },
 };

src/languages/es.js

@@ -1735,4 +1735,8 @@ export default {
         chatUserDisplayNames: 'Nombres de los usuarios del chat',
         scrollToNewestMessages: 'Desplázate a los mensajes más recientes',
     },
+    threads: {
+        lastReplyAt: 'Última respuesta a las',
+        replies: 'Respuestas',
+    },
 };

src/libs/actions/Report.js

@@ -311,6 +311,7 @@ function addComment(reportID, text) {
  * @param {String} reportID
  * @param {Array} participantList The list of users that are included in a new chat, not including the user creating it
  * @param {Object} newReportObject The optimistic report object created when making a new chat, saved as optimistic data
+ * @param {String} parentReportActionID The report action that a thread was created off of (only passed for threads)
  */
 function openReport(reportID, participantList = [], newReportObject = {}) {
     const optimisticReportData = {

src/pages/home/report/ReportActionItem.js

@@ -17,6 +17,7 @@ import ReportActionItemMessage from './ReportActionItemMessage';
 import UnreadActionIndicator from '../../../components/UnreadActionIndicator';
 import ReportActionItemMessageEdit from './ReportActionItemMessageEdit';
 import ReportActionItemCreated from './ReportActionItemCreated';
+import ReportActionItemThread from './ReportActionItemThread';
 import compose from '../../../libs/compose';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import ControlSelection from '../../../libs/ControlSelection';
@@ -163,6 +164,7 @@ class ReportActionItem extends Component {
             this.checkIfContextMenuActive,
             ReportUtils.isArchivedRoom(this.props.report),
             ReportUtils.chatIncludesChronos(this.props.report),
+            this.props.action.childReportID,
         );
     }
 
@@ -244,6 +246,7 @@ class ReportActionItem extends Component {
                         toggleReaction={this.toggleReaction}
                     />
                 )}
+                <ReportActionItemThread numberOfReplies={7} mostRecentReply={'1:03pm'} icons={ReportUtils.getIcons(this.props.report, this.props.personalDetails)} />
             </>
         );
     }
@@ -354,6 +357,7 @@ class ReportActionItem extends Component {
                                 }
                                 draftMessage={this.props.draftMessage}
                                 isChronosReport={ReportUtils.chatIncludesChronos(this.props.report)}
+                                childReportActionID={this.props.action.childReportActionID}
                             />
                         </View>
                     )}

src/pages/home/report/ReportActionItemThread.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import {View, Pressable, Text} from 'react-native';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import lodashGet from 'lodash/get';
+import styles from '../../../styles/styles';
+import ReportActionItemFragment from './ReportActionItemFragment';
+import reportActionPropTypes from './reportActionPropTypes';
+import * as Report from '../../../libs/actions/Report';
+import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
+import CONST from "../../../CONST";
+import avatarPropTypes from "../../../components/avatarPropTypes";
+import themeColors from "../../../styles/themes/default";
+import MultipleAvatars from '../../../components/MultipleAvatars';
+
+const propTypes = {
+    // childReportID: PropTypes.number.isRequired,
+
+    icons: PropTypes.arrayOf(avatarPropTypes).isRequired,
+
+    numberOfReplies: PropTypes.number.isRequired,
+
+    mostRecentReply: PropTypes.string.isRequired,
+
+    childReportID: PropTypes.string.isRequired,
+
+    /** localization props */
+    ...withLocalizePropTypes,
+};
+
+const ReportActionItemThread = props => (
+    <View style={[styles.chatItemMessage]}>
+        <Pressable
+            onPress={() => {
+                // Report.OpenChildReport(props.childReportID)
+                return '';
+            }}
+        >
+            <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt2]}>
+                <MultipleAvatars
+                    size={CONST.AVATAR_SIZE.SMALLER}
+                    icons={props.icons}
+                    shouldStackHorizontally
+                    avatarTooltips={_.map(props.icons, icon => icon.name)}
+                />
+                <View style={[styles.flexRow, styles.lhPercent, styles.alignItemsEnd]}>
+                    <Text style={[styles.link, styles.ml2, styles.h4]}>{`${props.numberOfReplies} ${props.translate('threads.replies')}`}</Text>
+                    <Text style={[styles.ml2, styles.textMicroSupporting]}>{`${props.translate('threads.lastReplyAt')} ${props.mostRecentReply}`}</Text>
+                </View>
+            </View>
+
+        </Pressable>
+    </View>
+);
+
+ReportActionItemThread.propTypes = propTypes;
+ReportActionItemThread.displayName = 'ReportActionItemThread';
+
+export default withLocalize(ReportActionItemThread);

src/styles/styles.js

@@ -1004,6 +1004,10 @@ const styles = {
         lineHeight: 16,
     },
 
+    lhPercent: {
+        lineHeight: '140%',
+    },
+
     formHelp: {
         color: themeColors.textSupporting,
         fontSize: variables.fontSizeLabel,