Fix for: IOU threads don't have pin options

src/components/HeaderWithCloseButton.js

@@ -18,6 +18,7 @@ import withKeyboardState, {keyboardStatePropTypes} from './withKeyboardState';
 import AvatarWithDisplayName from './AvatarWithDisplayName';
 import iouReportPropTypes from '../pages/iouReportPropTypes';
 import participantPropTypes from './participantPropTypes';
+import PinButton from './PinButton';
 
 const propTypes = {
     /** Title of the Header */
@@ -50,6 +51,9 @@ const propTypes = {
     /** Whether we should show a get assistance (question mark) button */
     shouldShowGetAssistanceButton: PropTypes.bool,
 
+    /** Whether we should show a pin button */
+    shouldShowPinButton: PropTypes.bool,
+
     /** Whether we should show a more options (threedots) button */
     shouldShowThreeDotsButton: PropTypes.bool,
 
@@ -83,6 +87,9 @@ const propTypes = {
     /** Whether we should show an avatar */
     shouldShowAvatarWithDisplay: PropTypes.bool,
 
+    /** Parent report, if provided it will override props.report for AvatarWithDisplay */
+    parentReport: iouReportPropTypes,
+
     /** Report, if we're showing the details for one and using AvatarWithDisplay */
     report: iouReportPropTypes,
 
@@ -112,10 +119,12 @@ const defaultProps = {
     shouldShowDownloadButton: false,
     shouldShowGetAssistanceButton: false,
     shouldShowThreeDotsButton: false,
+    shouldShowPinButton: false,
     shouldShowCloseButton: true,
     shouldShowStepCounter: true,
     shouldShowAvatarWithDisplay: false,
     report: null,
+    parentReport: null,
     policies: {},
     personalDetails: {},
     guidesCallTaskID: '',
@@ -168,7 +177,7 @@ class HeaderWithCloseButton extends Component {
                     )}
                     {this.props.shouldShowAvatarWithDisplay && (
                         <AvatarWithDisplayName
-                            report={this.props.report}
+                            report={this.props.parentReport || this.props.report}
                             policies={this.props.policies}
                             personalDetails={this.props.personalDetails}
                         />
@@ -212,6 +221,8 @@ class HeaderWithCloseButton extends Component {
                             </Tooltip>
                         )}
 
+                        {this.props.shouldShowPinButton && <PinButton report={this.props.report} />}
+
                         {this.props.shouldShowThreeDotsButton && (
                             <ThreeDotsMenu
                                 menuItems={this.props.threeDotsMenuItems}

src/components/MoneyRequestHeader.js

@@ -93,6 +93,7 @@ const MoneyRequestHeader = (props) => {
         <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
             <HeaderWithCloseButton
                 shouldShowAvatarWithDisplay
+                shouldShowPinButton={props.isSingleTransactionView}
                 shouldShowThreeDotsButton={!isPayer && !isSettled && props.isSingleTransactionView}
                 threeDotsMenuItems={[
                     {
@@ -102,7 +103,8 @@ const MoneyRequestHeader = (props) => {
                     },
                 ]}
                 threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(props.windowWidth)}
-                report={moneyRequestReport}
+                report={props.report}
+                parentReport={moneyRequestReport}
                 policies={props.policies}
                 personalDetails={props.personalDetails}
                 shouldShowCloseButton={false}

src/components/PinButton.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import {Pressable} from 'react-native';
+import styles from '../styles/styles';
+import themeColors from '../styles/themes/default';
+import Icon from './Icon';
+import Tooltip from './Tooltip';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import reportPropTypes from '../pages/reportPropTypes';
+import * as Report from '../libs/actions/Report';
+import * as Expensicons from './Icon/Expensicons';
+import * as Session from '../libs/actions/Session';
+
+const propTypes = {
+    /** Report to pin */
+    report: reportPropTypes,
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    report: null,
+};
+
+const PinButton = (props) => (
+    <Tooltip text={props.report.isPinned ? props.translate('common.unPin') : props.translate('common.pin')}>
+        <Pressable
+            onPress={Session.checkIfActionIsAllowed(() => Report.togglePinnedState(props.report.reportID, props.report.isPinned))}
+            style={[styles.touchableButtonImage]}
+        >
+            <Icon
+                src={Expensicons.Pin}
+                fill={props.report.isPinned ? themeColors.heading : themeColors.icon}
+            />
+        </Pressable>
+    </Tooltip>
+);
+
+PinButton.displayName = 'PinButton';
+PinButton.propTypes = propTypes;
+PinButton.defaultProps = defaultProps;
+
+export default withLocalize(PinButton);

src/pages/home/HeaderView.js

@@ -9,7 +9,6 @@ import themeColors from '../../styles/themes/default';
 import Icon from '../../components/Icon';
 import * as Expensicons from '../../components/Icon/Expensicons';
 import compose from '../../libs/compose';
-import * as Report from '../../libs/actions/Report';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
 import MultipleAvatars from '../../components/MultipleAvatars';
 import SubscriptAvatar from '../../components/SubscriptAvatar';
@@ -28,7 +27,7 @@ import ONYXKEYS from '../../ONYXKEYS';
 import ThreeDotsMenu from '../../components/ThreeDotsMenu';
 import * as Task from '../../libs/actions/Task';
 import reportActionPropTypes from './report/reportActionPropTypes';
-import * as Session from '../../libs/actions/Session';
+import PinButton from '../../components/PinButton';
 
 const propTypes = {
     /** Toggles the navigationMenu open and closed */
@@ -196,17 +195,7 @@ const HeaderView = (props) => {
                                     guideCalendarLink={guideCalendarLink}
                                 />
                             )}
-                            <Tooltip text={props.report.isPinned ? props.translate('common.unPin') : props.translate('common.pin')}>
-                                <Pressable
-                                    onPress={Session.checkIfActionIsAllowed(() => Report.togglePinnedState(props.report.reportID, props.report.isPinned))}
-                                    style={[styles.touchableButtonImage]}
-                                >
-                                    <Icon
-                                        src={Expensicons.Pin}
-                                        fill={props.report.isPinned ? themeColors.heading : themeColors.icon}
-                                    />
-                                </Pressable>
-                            </Tooltip>
+                            <PinButton report={props.report} />
                             {shouldShowThreeDotsButton && (
                                 <ThreeDotsMenu
                                     anchorPosition={styles.threeDotsPopoverOffset(props.windowWidth)}