Rename Policy Rooms

src/CONST.js

@@ -213,6 +213,7 @@ const CONST = {
             TYPE: {
                 IOU: 'IOU',
                 ADDCOMMENT: 'ADDCOMMENT',
+                RENAMED: 'RENAMED',
             },
         },
         ERROR: {

src/ONYXKEYS.js

@@ -166,6 +166,9 @@ 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/ReportActionItem/RenameAction.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import lodashGet from 'lodash/get';
+import Text from '../Text';
+import styles from '../../styles/styles';
+import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+
+const propTypes = {
+    /** All the data of the action */
+    action: PropTypes.shape(reportActionPropTypes).isRequired,
+
+    ...withLocalizePropTypes,
+};
+
+const RenameAction = (props) => {
+    const displayName = lodashGet(props.action, ['message', 0, 'text']);
+    const oldName = lodashGet(props.action, 'originalMessage.oldName', '');
+    const newName = lodashGet(props.action, 'originalMessage.newName', '');
+
+    return (
+        <Text style={[styles.pv3, styles.ph5, styles.textAlignCenter, styles.textLabelSupporting]}>
+            <Text style={[styles.textLabelSupporting, styles.textStrong]}>
+                {displayName}
+            </Text>
+            {props.translate('newRoomPage.renamedRoomAction', {oldName, newName})}
+        </Text>
+    );
+};
+
+RenameAction.propTypes = propTypes;
+RenameAction.displayName = 'RenameAction';
+
+export default withLocalize(RenameAction);

src/languages/en.js

@@ -884,11 +884,14 @@ export default {
         restrictedDescription: 'People in your workspace are able to find this room using Search',
         privateDescription: 'Only people invited to this room are able to find it',
         createRoom: 'Create Room',
+        policyRoomRenamed: 'Policy room renamed!',
         roomAlreadyExistsError: 'A room with this name already exists',
         roomNameReservedError: 'This name is reserved and cannot be used',
+        renamedRoomAction: ({oldName, newName}) => ` renamed this room from ${oldName} to ${newName}`,
         social: 'social',
         selectAWorkspace: 'Select a workspace',
         growlMessageOnError: 'Unable to create policy room, please check your connection and try again.',
+        growlMessageOnRenameError: 'Unable to rename policy room, please check your connection and try again.',
         visibilityOptions: {
             restricted: 'Restricted',
             private: 'Private',

src/languages/es.js

@@ -886,11 +886,14 @@ export default {
         restrictedDescription: 'Sólo las personas en tu espacio de trabajo pueden encontrar esta sala a través de "Buscar"',
         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: 'Este nombre está reservado y no puede usarse',
+        renamedRoomAction: ({oldName, newName}) => ` cambió el nombre de la sala de ${oldName} a ${newName}`,
         social: 'social',
         selectAWorkspace: 'Seleccionar un espacio de trabajo',
         growlMessageOnError: 'No ha sido posible crear el espacio de trabajo, por favor comprueba tu conexión e inténtalo de nuevo.',
+        growlMessageOnRenameError: 'No ha sido posible cambiar el nomdre del espacio de trabajo, por favor comprueba tu conexión e inténtalo de nuevo.',
         visibilityOptions: {
             restricted: 'Restringida',
             private: 'Privada',

src/libs/API.js

@@ -1168,6 +1168,19 @@ 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
@@ -1195,6 +1208,7 @@ export {
     CreateChatReport,
     CreateLogin,
     CreatePolicyRoom,
+    RenameReport,
     DeleteFund,
     DeleteLogin,
     DeleteBankAccount,

src/libs/actions/Report.js

@@ -584,7 +584,10 @@ function updateReportWithNewAction(
         setLocalLastRead(reportID, newMaxSequenceNumber);
     }
 
-    const messageText = lodashGet(reportAction, ['message', 0, 'text'], '');
+    let messageText = lodashGet(reportAction, ['message', 0, 'text'], '');
+    if (reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.RENAMED) {
+        messageText = lodashGet(reportAction, 'originalMessage.html', '');
+    }
 
     // Always merge the reportID into Onyx
     // If the report doesn't exist in Onyx yet, then all the rest of the data will be filled out
@@ -1531,6 +1534,30 @@ function createPolicyRoom(policyID, reportName, visibility) {
         .finally(() => Onyx.set(ONYXKEYS.IS_LOADING_CREATE_POLICY_ROOM, false));
 }
 
+/**
+ * Renames a user created Policy Room.
+ * @param {String} reportID
+ * @param {String} reportName
+ */
+function renameReport(reportID, reportName) {
+    Onyx.set(ONYXKEYS.IS_LOADING_RENAME_POLICY_ROOM, true);
+    API.RenameReport({reportID, reportName})
+        .then((response) => {
+            if (response.jsonCode !== 200) {
+                Growl.error(response.message);
+                return;
+            }
+            Growl.success(Localize.translateLocal('newRoomPage.policyRoomRenamed'));
+
+            // Update the report name so that the LHN and header display the updated name
+            Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {reportName});
+        })
+        .catch(() => {
+            Growl.error(Localize.translateLocal('newRoomPage.growlMessageOnRenameError'));
+        })
+        .finally(() => Onyx.set(ONYXKEYS.IS_LOADING_RENAME_POLICY_ROOM, false));
+}
+
 export {
     fetchAllReports,
     fetchActions,
@@ -1560,5 +1587,6 @@ export {
     setReportWithDraft,
     fetchActionsWithLoadingState,
     createPolicyRoom,
+    renameReport,
     getLastReadSequenceNumber,
 };

src/pages/ReportSettingsPage.js

@@ -89,7 +89,7 @@ class ReportSettingsPage extends Component {
     }
 
     render() {
-        const shouldDisableRename = ReportUtils.isDefaultRoom(this.props.report) || ReportUtils.isArchivedRoom(this.props.report);
+        const shouldDisableRename = ReportUtils.isDefaultRoom(this.props.report) || ReportUtils.isArchivedRoom(this.props.report) || this.props.isLoadingRenamePolicyRoom;
         const linkedWorkspace = _.find(this.props.policies, policy => policy.id === this.props.report.policyID);
 
         return (
@@ -141,17 +141,16 @@ class ReportSettingsPage extends Component {
                             <Button
                                 success={!shouldDisableRename}
                                 text={this.props.translate('common.save')}
-                                onPress={() => {
-                                    // When renaming is built, this will use that API command
-                                }}
-                                style={[styles.ml2]}
+                                onPress={() => Report.renameReport(this.props.report.reportID, this.state.newRoomName)}
+                                style={[styles.ml2, styles.flex1]}
                                 textStyles={[styles.label]}
                                 innerStyles={[styles.reportSettingsChangeNameButton]}
                                 isDisabled={Boolean(
                                     shouldDisableRename
                                     || this.state.newRoomName === this.props.report.reportName
                                     || this.state.error,
                                 )}
+                                isLoading={this.props.isLoadingRenamePolicyRoom}
                             />
                         </View>
                     </View>
@@ -200,5 +199,8 @@ export default compose(
         policies: {
             key: ONYXKEYS.COLLECTION.POLICY,
         },
+        isLoadingRenamePolicyRoom: {
+            key: ONYXKEYS.IS_LOADING_RENAME_POLICY_ROOM,
+        },
     }),
 )(ReportSettingsPage);

src/pages/home/report/ReportActionItem.js

@@ -24,6 +24,7 @@ import * as ReportActionContextMenu from './ContextMenu/ReportActionContextMenu'
 import * as ContextMenuActions from './ContextMenu/ContextMenuActions';
 import {withReportActionsDrafts} from '../../../components/OnyxProvider';
 import * as ReportUtils from '../../../libs/reportUtils';
+import RenameAction from '../../../components/ReportActionItem/RenameAction';
 
 const propTypes = {
     /** The ID of the report this action is on. */
@@ -117,6 +118,10 @@ class ReportActionItem extends Component {
     }
 
     render() {
+        if (this.props.action.actionName === CONST.REPORT.ACTIONS.TYPE.RENAMED) {
+            return <RenameAction action={this.props.action} />;
+        }
+
         let children;
         if (this.props.action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU) {
             children = (

src/pages/home/report/ReportActionsView.js

@@ -339,7 +339,8 @@ class ReportActionsView extends React.Component {
         this.sortedReportActions = _.chain(reportActions)
             .sortBy('sequenceNumber')
             .filter(action => action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU
-                    || action.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT)
+                    || action.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT
+                    || action.actionName === CONST.REPORT.ACTIONS.TYPE.RENAMED)
             .map((item, index) => ({action: item, index}))
             .value()
             .reverse();
@@ -371,6 +372,12 @@ class ReportActionsView extends React.Component {
             return false;
         }
 
+        // Do not group if previous or current action was a renamed action
+        if (previousAction.action.actionName === CONST.REPORT.ACTIONS.TYPE.RENAMED
+            || currentAction.action.actionName === CONST.REPORT.ACTIONS.TYPE.RENAMED) {
+            return false;
+        }
+
         return currentAction.action.actorEmail === previousAction.action.actorEmail;
     }