Use new UpdatePolicyRoomName api command

src/components/MenuItem.js

@@ -42,7 +42,7 @@ const defaultProps = {
     onPress: () => {},
     interactive: true,
     fallbackIcon: Expensicons.FallbackAvatar,
-    brickRoadIndicator: undefined,
+    brickRoadIndicator: null,
 };
 
 const MenuItem = props => (
@@ -132,11 +132,11 @@ const MenuItem = props => (
                             </Text>
                         </View>
                     )}
-                    {props.brickRoadIndicator && (
+                    {Boolean(props.brickRoadIndicator) && (
                         <View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
                             <Icon
                                 src={Expensicons.DotIndicator}
-                                fill={props.brickRoadIndicator === 'error' ? colors.red : colors.green}
+                                fill={props.brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR ? colors.red : colors.green}
                                 height={variables.iconSizeSmall}
                                 width={variables.iconSizeSmall}
                             />

src/components/RoomNameInput.js

@@ -43,6 +43,9 @@ const propTypes = {
         /** ID of the policy */
         id: PropTypes.string,
     }).isRequired,
+
+    /** A ref forwarded to the TextInput */
+    forwardedRef: PropTypes.func,
 };
 
 const defaultProps = {
@@ -51,6 +54,7 @@ const defaultProps = {
     disabled: false,
     errorText: '',
     ...fullPolicyDefaultProps,
+    forwardedRef: () => {},
 };
 
 class RoomNameInput extends Component {
@@ -91,6 +95,7 @@ class RoomNameInput extends Component {
     render() {
         return (
             <TextInput
+                ref={this.props.forwardedRef}
                 disabled={this.props.disabled}
                 label={this.props.translate('newRoomPage.roomName')}
                 prefixCharacter={CONST.POLICY.ROOM_PREFIX}
@@ -118,4 +123,7 @@ export default compose(
             key: ONYXKEYS.COLLECTION.POLICY,
         },
     }),
-)(RoomNameInput);
+)(React.forwardRef((props, ref) => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <RoomNameInput {...props} forwardedRef={ref} />
+)));

src/components/menuItemPropTypes.js

@@ -67,9 +67,9 @@ const propTypes = {
     /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
     fallbackIcon: PropTypes.func,
 
-    /** If we need to show a brick road indicator or not. For now only value allowed is `error`,
-     * but we will add `success` later for manual requests */
-    brickRoadIndicator: PropTypes.oneOf(['error']),
+    /** If we need to show a brick road indicator or not. For now only value allowed is 'error' or '',
+     * but we will add 'success' later for manual requests */
+    brickRoadIndicator: PropTypes.oneOf([CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR, '']),
 };
 
 export default propTypes;

src/libs/OptionsListUtils.js

@@ -191,18 +191,26 @@ function hasReportDraftComment(report, reportsWithDraft = {}) {
 }
 
 /**
+ * If the report or the report actions have errors, return
+ * CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR, otherwise an empty string.
+ *
  * @param {Object} report
  * @param {Object} reportActions
  * @returns {String}
  */
 function getBrickRoadIndicatorStatusForReport(report, reportActions) {
+    const errors = lodashGet(report, 'errors', {});
+    const errorFields = lodashGet(report, 'errorFields', {});
     const reportID = lodashGet(report, 'reportID');
     const reportsActions = lodashGet(reportActions, `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {});
-    if (_.isEmpty(reportsActions)) {
+
+    const hasFieldErrors = _.some(errorFields, fieldErrors => !_.isEmpty(fieldErrors));
+    const hasReportActionErrors = _.some(reportsActions, action => !_.isEmpty(action.errors));
+
+    if (_.isEmpty(errors) && !hasFieldErrors && !hasReportActionErrors) {
         return '';
     }
-
-    return _.find(reportsActions, action => !_.isEmpty(action.errors)) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '';
+    return CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR;
 }
 
 /**

src/libs/ReportUtils.js

@@ -523,6 +523,14 @@ function generateReportID() {
     return Math.floor(Math.random() * (Number.MAX_SAFE_INTEGER - 98000000)) + 98000000;
 }
 
+/**
+ * @param {Object} report
+ * @returns {Boolean}
+ */
+function hasReportNameError(report) {
+    return !_.isEmpty(lodashGet(report, 'errorFields.reportName', {}));
+}
+
 export {
     getReportParticipantsTitle,
     isReportMessageAttachment,
@@ -552,4 +560,5 @@ export {
     getReportName,
     navigateToDetailsPage,
     generateReportID,
+    hasReportNameError,
 };

src/libs/actions/Report.js

@@ -1403,6 +1403,68 @@ function renameReport(reportID, reportName) {
         .finally(() => Onyx.set(ONYXKEYS.IS_LOADING_RENAME_POLICY_ROOM, false));
 }
 
+/**
+ * Update the policy room name.
+ *
+ * @param {Object} policyRoomReport
+ * @param {String} policyRoomName The updated name for the policy room
+ */
+function updatePolicyRoomName(policyRoomReport, policyRoomName) {
+    const reportID = policyRoomReport.reportID;
+    const previousName = policyRoomReport.reportName;
+    const optimisticData = [
+        {
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
+            value: {
+                reportName: policyRoomName,
+                pendingFields: {
+                    reportName: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                },
+            },
+        },
+    ];
+    const successData = [
+        {
+
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
+            value: {
+                pendingFields: {
+                    reportName: null,
+                },
+            },
+        },
+    ];
+    const failureData = [
+        {
+
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
+            value: {
+                reportName: previousName,
+            },
+        },
+    ];
+    API.write('UpdatePolicyRoomName', {reportID, policyRoomName}, {optimisticData, successData, failureData});
+}
+
+/**
+ * Clear policy room name errors.
+ *
+ * @param {Number} reportID The reportID of the policy room.
+ */
+function clearPolicyRoomNameErrors(reportID) {
+    Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {
+        errorFields: {
+            reportName: null,
+        },
+        pendingFields: {
+            reportName: null,
+        },
+    });
+}
+
 /**
  * @param {Number} reportID
  * @param {Boolean} isComposerFullSize
@@ -1555,4 +1617,6 @@ export {
     openReport,
     openPaymentDetailsPage,
     createOptimisticReport,
+    updatePolicyRoomName,
+    clearPolicyRoomNameErrors,
 };

src/pages/ReportDetailsPage.js

@@ -20,6 +20,7 @@ import * as Expensicons from '../components/Icon/Expensicons';
 import ROUTES from '../ROUTES';
 import MenuItem from '../components/MenuItem';
 import Text from '../components/Text';
+import CONST from '../CONST';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -156,6 +157,12 @@ class ReportDetailsPage extends Component {
                     </View>
                     {_.map(this.menuItems, (item) => {
                         const keyTitle = item.translationKey ? this.props.translate(item.translationKey) : item.title;
+                        const brickRoadIndicator = (
+                            ReportUtils.hasReportNameError(this.props.report)
+                            && item.translationKey === 'common.settings'
+                        )
+                            ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR
+                            : '';
                         return (
                             <MenuItem
                                 key={keyTitle}
@@ -166,6 +173,7 @@ class ReportDetailsPage extends Component {
                                 iconStyles={item.iconStyles}
                                 iconFill={item.iconFill}
                                 shouldShowRightIcon
+                                brickRoadIndicator={brickRoadIndicator}
                             />
                         );
                     })}

src/pages/ReportSettingsPage.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {View, ScrollView} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
+import lodashGet from 'lodash/get';
 import CONST from '../CONST';
 import ONYXKEYS from '../ONYXKEYS';
 import styles from '../styles/styles';
@@ -20,6 +21,7 @@ import Picker from '../components/Picker';
 import withFullPolicy, {fullPolicyDefaultProps, fullPolicyPropTypes} from './workspace/withFullPolicy';
 import * as ValidationUtils from '../libs/ValidationUtils';
 import Growl from '../libs/Growl';
+import OfflineWithFeedback from '../components/OfflineWithFeedback';
 
 const propTypes = {
     /** Route params */
@@ -107,14 +109,41 @@ class ReportSettingsPage extends Component {
             },
         };
 
+        this.roomNameInputRef = null;
+
         this.state = {
             newRoomName: this.props.report.reportName,
             errors: {},
         };
 
+        this.setRoomNameInputRef = this.setRoomNameInputRef.bind(this);
+        this.resetToPreviousName = this.resetToPreviousName.bind(this);
         this.validateAndRenameReport = this.validateAndRenameReport.bind(this);
     }
 
+    /**
+     * Set the room name input ref
+     *
+     * @param {Element} el
+     */
+    setRoomNameInputRef(el) {
+        this.roomNameInputRef = el;
+    }
+
+    /**
+     * When the user dismisses the error updating the policy room name,
+     * reset the report name to the previously saved name and clear errors.
+     */
+    resetToPreviousName() {
+        this.setState({newRoomName: this.props.report.reportName});
+
+        // Reset the input's value back to the previously saved report name
+        if (this.roomNameInputRef) {
+            this.roomNameInputRef.value = this.props.report.reportName.replace(CONST.POLICY.ROOM_PREFIX, '');
+        }
+        Report.clearPolicyRoomNameErrors(this.props.report.reportID);
+    }
+
     validateAndRenameReport() {
         if (!this.validate()) {
             return;
@@ -123,7 +152,7 @@ class ReportSettingsPage extends Component {
             Growl.success(this.props.translate('newRoomPage.policyRoomRenamed'));
             return;
         }
-        Report.renameReport(this.props.report.reportID, this.state.newRoomName);
+        Report.updatePolicyRoomName(this.props.report, this.state.newRoomName);
     }
 
     validate() {
@@ -195,42 +224,49 @@ class ReportSettingsPage extends Component {
                     </View>
                     {shouldShowRoomName && (
                         <View style={styles.mt4}>
-                            <View style={[styles.flexRow]}>
-                                <View style={[styles.flex3]}>
-                                    {shouldDisableRename ? (
-                                        <View>
-                                            <Text style={[styles.textLabelSupporting, styles.lh16, styles.mb1]} numberOfLines={1}>
-                                                {this.props.translate('newRoomPage.roomName')}
-                                            </Text>
-                                            <Text numberOfLines={1} style={[styles.optionAlternateText]}>
-                                                {this.state.newRoomName}
-                                            </Text>
-                                        </View>
-                                    )
-                                        : (
-                                            <RoomNameInput
-                                                initialValue={this.state.newRoomName}
-                                                policyID={linkedWorkspace && linkedWorkspace.id}
-                                                errorText={this.state.errors.newRoomName}
-                                                onChangeText={newRoomName => this.clearErrorAndSetValue('newRoomName', newRoomName)}
-                                                disabled={shouldDisableRename}
-                                            />
-                                        )}
+                            <OfflineWithFeedback
+                                pendingAction={lodashGet(this.props.report, 'pendingFields.reportName', null)}
+                                errors={lodashGet(this.props.report, 'errorFields.reportName', null)}
+                                onClose={this.resetToPreviousName}
+                            >
+                                <View style={[styles.flexRow]}>
+                                    <View style={[styles.flex3]}>
+                                        {shouldDisableRename ? (
+                                            <View>
+                                                <Text style={[styles.textLabelSupporting, styles.lh16, styles.mb1]} numberOfLines={1}>
+                                                    {this.props.translate('newRoomPage.roomName')}
+                                                </Text>
+                                                <Text numberOfLines={1} style={[styles.optionAlternateText]}>
+                                                    {this.state.newRoomName}
+                                                </Text>
+                                            </View>
+                                        )
+                                            : (
+                                                <RoomNameInput
+                                                    ref={this.setRoomNameInputRef}
+                                                    initialValue={this.state.newRoomName}
+                                                    policyID={linkedWorkspace && linkedWorkspace.id}
+                                                    errorText={this.state.errors.newRoomName}
+                                                    onChangeText={newRoomName => this.clearErrorAndSetValue('newRoomName', newRoomName)}
+                                                    disabled={shouldDisableRename}
+                                                />
+                                            )}
+                                    </View>
+                                    {!shouldDisableRename && (
+                                        <Button
+                                            large
+                                            success={!shouldDisableRename}
+                                            text={this.props.translate('common.save')}
+                                            onPress={this.validateAndRenameReport}
+                                            style={[styles.ml2, styles.flex1]}
+                                            textStyles={[styles.label]}
+                                            innerStyles={[styles.ph5]}
+                                            isLoading={this.props.isLoadingRenamePolicyRoom}
+                                            isDisabled={shouldDisableRename}
+                                        />
+                                    )}
                                 </View>
-                                {!shouldDisableRename && (
-                                    <Button
-                                        large
-                                        success={!shouldDisableRename}
-                                        text={this.props.translate('common.save')}
-                                        onPress={this.validateAndRenameReport}
-                                        style={[styles.ml2, styles.flex1]}
-                                        textStyles={[styles.label]}
-                                        innerStyles={[styles.ph5]}
-                                        isLoading={this.props.isLoadingRenamePolicyRoom}
-                                        isDisabled={shouldDisableRename}
-                                    />
-                                )}
-                            </View>
+                            </OfflineWithFeedback>
                         </View>
                     )}
                     {linkedWorkspace && (