Use new UpdatePolicyRoomName api command

src/CONST.js

@@ -780,6 +780,12 @@ const CONST = {
     BRICK_ROAD_INDICATOR_STATUS: {
         ERROR: 'error',
     },
+    REPORT_DETAILS_MENU_ITEM: {
+        MEMBERS: 'member',
+        SETTINGS: 'settings',
+        INVITE: 'invite',
+        LEAVE_ROOM: 'leaveRoom',
+    },
 };
 
 export default CONST;

src/ONYXKEYS.js

@@ -167,9 +167,6 @@ export default {
     // Are we loading the create policy room command
     IS_LOADING_CREATE_POLICY_ROOM: 'isLoadingCratePolicyRoom',
 
-    // Are we loading the rename policy room command
-    IS_LOADING_RENAME_POLICY_ROOM: 'isLoadingRenamePolicyRoom',
-
     // Is Keyboard shortcuts modal open?
     IS_SHORTCUTS_MODAL_OPEN: 'isShortcutsModalOpen',
 

src/components/MenuItem.js

@@ -42,7 +42,7 @@ const defaultProps = {
     onPress: () => {},
     interactive: true,
     fallbackIcon: Expensicons.FallbackAvatar,
-    brickRoadIndicator: undefined,
+    brickRoadIndicator: '',
 };
 
 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,8 @@ 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']),
+    /** The type of brick road indicator to show. */
+    brickRoadIndicator: PropTypes.oneOf([CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR, '']),
 };
 
 export default propTypes;

src/languages/en.js

@@ -955,7 +955,6 @@ export default {
         restrictedDescription: 'People in your workspace can find this room',
         privateDescription: 'People invited to this room can find it',
         createRoom: 'Create Room',
-        policyRoomRenamed: 'Policy room renamed!',
         roomAlreadyExistsError: 'A room with this name already exists',
         roomNameReservedError: 'A room on this workspace already uses this name',
         pleaseEnterRoomName: 'Please enter a room name',

src/languages/es.js

@@ -957,7 +957,6 @@ export default {
         restrictedDescription: 'Sólo las personas en tu espacio de trabajo pueden encontrar esta sala',
         privateDescription: 'Sólo las personas que están invitadas a esta sala pueden encontrarla',
         createRoom: 'Crea una sala de chat',
-        policyRoomRenamed: '¡Espacio de trabajo renombrado!',
         roomAlreadyExistsError: 'Ya existe una sala con este nombre',
         roomNameReservedError: 'Una sala en este espacio de trabajo ya usa este nombre',
         pleaseEnterRoomName: 'Por favor escribe el nombre de una sala',

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 reportErrors = lodashGet(report, 'errors', {});
+    const reportErrorFields = lodashGet(report, 'errorFields', {});
     const reportID = lodashGet(report, 'reportID');
     const reportsActions = lodashGet(reportActions, `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {});
-    if (_.isEmpty(reportsActions)) {
+
+    const hasReportFieldErrors = _.some(reportErrorFields, fieldErrors => !_.isEmpty(fieldErrors));
+    const hasReportActionErrors = _.some(reportsActions, action => !_.isEmpty(action.errors));
+
+    if (_.isEmpty(reportErrors) && !hasReportFieldErrors && !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

@@ -1377,30 +1377,66 @@ function createPolicyRoom(policyID, reportName, visibility) {
 }
 
 /**
- * Renames a user created Policy Room.
- * @param {String} reportID
- * @param {String} reportName
+ * @param {Object} policyRoomReport
+ * @param {Number} policyRoomReport.reportID
+ * @param {String} policyRoomReport.reportName
+ * @param {String} policyRoomName The updated name for the policy room
  */
-function renameReport(reportID, reportName) {
-    Onyx.set(ONYXKEYS.IS_LOADING_RENAME_POLICY_ROOM, true);
-    DeprecatedAPI.RenameReport({reportID, reportName})
-        .then((response) => {
-            if (response.jsonCode === CONST.JSON_CODE.UNABLE_TO_RETRY) {
-                Growl.error(Localize.translateLocal('newRoomPage.growlMessageOnRenameError'));
-                return;
-            }
+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,
+                },
+                errorFields: {
+                    reportName: null,
+                },
+            },
+        },
+    ];
+    const successData = [
+        {
 
-            if (response.jsonCode !== CONST.JSON_CODE.SUCCESS) {
-                Growl.error(response.message);
-                return;
-            }
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
+            value: {
+                pendingFields: {
+                    reportName: null,
+                },
+            },
+        },
+    ];
+    const failureData = [
+        {
 
-            Growl.success(Localize.translateLocal('newRoomPage.policyRoomRenamed'));
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
+            value: {
+                reportName: previousName,
+            },
+        },
+    ];
+    API.write('UpdatePolicyRoomName', {reportID, policyRoomName}, {optimisticData, successData, failureData});
+}
 
-            // Update the report name so that the LHN and header display the updated name
-            Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {reportName});
-        })
-        .finally(() => Onyx.set(ONYXKEYS.IS_LOADING_RENAME_POLICY_ROOM, false));
+/**
+ * @param {Number} reportID The reportID of the policy room.
+ */
+function clearPolicyRoomNameErrors(reportID) {
+    Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {
+        errorFields: {
+            reportName: null,
+        },
+        pendingFields: {
+            reportName: null,
+        },
+    });
 }
 
 /**
@@ -1547,12 +1583,13 @@ export {
     setReportWithDraft,
     fetchInitialActions,
     createPolicyRoom,
-    renameReport,
     setIsComposerFullSize,
     markCommentAsUnread,
     readNewestAction,
     readOldestAction,
     openReport,
     openPaymentDetailsPage,
     createOptimisticReport,
+    updatePolicyRoomName,
+    clearPolicyRoomNameErrors,
 };

src/libs/deprecatedAPI.js

@@ -622,19 +622,6 @@ function CreatePolicyRoom(parameters) {
     return Network.post(commandName, parameters);
 }
 
-/**
- * Renames a user-created policy room
- * @param {Object} parameters
- * @param {String} parameters.reportID
- * @param {String} parameters.reportName
- * @return {Promise}
- */
-function RenameReport(parameters) {
-    const commandName = 'RenameReport';
-    requireParameters(['reportID', 'reportName'], parameters, commandName);
-    return Network.post(commandName, parameters);
-}
-
 /**
  * Transfer Wallet balance and takes either the bankAccoundID or fundID
  * @param {Object} parameters
@@ -668,7 +655,6 @@ export {
     CreateChatReport,
     CreateLogin,
     CreatePolicyRoom,
-    RenameReport,
     DeleteLogin,
     DeleteBankAccount,
     Get,

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,
@@ -73,6 +74,7 @@ class ReportDetailsPage extends Component {
 
         // All nonarchived chats should let you see their members
         this.menuItems.push({
+            key: CONST.REPORT_DETAILS_MENU_ITEM.MEMBERS,
             translationKey: 'common.members',
             icon: Expensicons.Users,
             subtitle: props.report.participants.length,
@@ -81,6 +83,7 @@ class ReportDetailsPage extends Component {
 
         if (ReportUtils.isPolicyExpenseChat(this.props.report) || ReportUtils.isChatRoom(this.props.report)) {
             this.menuItems.push({
+                key: CONST.REPORT_DETAILS_MENU_ITEM.SETTINGS,
                 translationKey: 'common.settings',
                 icon: Expensicons.Gear,
                 action: () => { Navigation.navigate(ROUTES.getReportSettingsRoute(props.report.reportID)); },
@@ -89,11 +92,13 @@ class ReportDetailsPage extends Component {
 
         if (ReportUtils.isUserCreatedPolicyRoom(this.props.report)) {
             this.menuItems.push({
+                key: CONST.REPORT_DETAILS_MENU_ITEM.INVITE,
                 translationKey: 'common.invite',
                 icon: Expensicons.Plus,
                 action: () => { /* Placeholder for when inviting other users is built in */ },
             },
             {
+                key: CONST.REPORT_DETAILS_MENU_ITEM.LEAVE_ROOM,
                 translationKey: 'common.leaveRoom',
                 icon: Expensicons.Exit,
                 action: () => { /* Placeholder for when leaving rooms is built in */ },
@@ -155,17 +160,21 @@ class ReportDetailsPage extends Component {
                         </View>
                     </View>
                     {_.map(this.menuItems, (item) => {
-                        const keyTitle = item.translationKey ? this.props.translate(item.translationKey) : item.title;
+                        const brickRoadIndicator = (
+                            ReportUtils.hasReportNameError(this.props.report)
+                            && item.key === CONST.REPORT_DETAILS_MENU_ITEM.SETTINGS
+                        )
+                            ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR
+                            : '';
                         return (
                             <MenuItem
-                                key={keyTitle}
-                                title={keyTitle}
+                                key={item.key}
+                                title={this.props.translate(item.translationKey)}
                                 subtitle={item.subtitle}
                                 icon={item.icon}
                                 onPress={item.action}
-                                iconStyles={item.iconStyles}
-                                iconFill={item.iconFill}
                                 shouldShowRightIcon
+                                brickRoadIndicator={brickRoadIndicator}
                             />
                         );
                     })}