Render room change logs

src/CONST.ts

@@ -505,6 +505,8 @@ const CONST = {
                     DELETE_TAG: 'POLICYCHANGELOG_DELETE_TAG',
                     IMPORT_CUSTOM_UNIT_RATES: 'POLICYCHANGELOG_IMPORT_CUSTOM_UNIT_RATES',
                     IMPORT_TAGS: 'POLICYCHANGELOG_IMPORT_TAGS',
+                    INVITE_TO_ROOM: 'POLICYCHANGELOG_INVITETOROOM',
+                    REMOVE_FROM_ROOM: 'POLICYCHANGELOG_REMOVEFROMROOM',
                     SET_AUTOREIMBURSEMENT: 'POLICYCHANGELOG_SET_AUTOREIMBURSEMENT',
                     SET_AUTO_JOIN: 'POLICYCHANGELOG_SET_AUTO_JOIN',
                     SET_CATEGORY_NAME: 'POLICYCHANGELOG_SET_CATEGORY_NAME',
@@ -539,6 +541,11 @@ const CONST = {
                     UPDATE_TIME_ENABLED: 'POLICYCHANGELOG_UPDATE_TIME_ENABLED',
                     UPDATE_TIME_RATE: 'POLICYCHANGELOG_UPDATE_TIME_RATE',
                 },
+                ROOMCHANGELOG: {
+                    INVITE_TO_ROOM: 'INVITETOROOM',
+                    REMOVE_FROM_ROOM: 'REMOVEFROMROOM',
+                    JOIN_ROOM: 'JOINROOM',
+                },
             },
         },
         ARCHIVE_REASON: {

src/components/FormAlertWrapper.js

@@ -66,7 +66,7 @@ function FormAlertWrapper(props) {
             </Text>
         );
     } else if (props.isMessageHtml) {
-        children = <RenderHTML html={`<muted-text>${props.message}</muted-text>`} />;
+        children = <RenderHTML html={`<alert-text>${props.message}</alert-text>`} />;
     }
     return (
         <View style={props.containerStyles}>

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js

@@ -29,9 +29,13 @@ const customHTMLElementModels = {
     edited: defaultHTMLElementModels.span.extend({
         tagName: 'edited',
     }),
+    'alert-text': defaultHTMLElementModels.div.extend({
+        tagName: 'alert-text',
+        mixedUAStyles: {...styles.formError, ...styles.mb0},
+    }),
     'muted-text': defaultHTMLElementModels.div.extend({
         tagName: 'muted-text',
-        mixedUAStyles: {...styles.formError, ...styles.mb0},
+        mixedUAStyles: {...styles.colorMuted, ...styles.mb0},
     }),
     comment: defaultHTMLElementModels.div.extend({
         tagName: 'comment',

src/libs/Environment/Environment.js

@@ -39,11 +39,15 @@ function isInternalTestBuild() {
 /**
  * Get the URL based on the environment we are in
  *
+ * @param {String} [environment]
  * @returns {Promise}
  */
-function getEnvironmentURL() {
+function getEnvironmentURL(environment) {
+    if (environment) {
+        return ENVIRONMENT_URLS[environment];
+    }
     return new Promise((resolve) => {
-        getEnvironment().then((environment) => resolve(ENVIRONMENT_URLS[environment]));
+        getEnvironment().then((env) => resolve(ENVIRONMENT_URLS[env]));
     });
 }
 

src/libs/ReportActionsUtils.js

@@ -9,6 +9,7 @@ import CONST from '../CONST';
 import ONYXKEYS from '../ONYXKEYS';
 import Log from './Log';
 import isReportMessageAttachment from './isReportMessageAttachment';
+import * as Environment from './Environment/Environment';
 
 const allReports = {};
 Onyx.connect({
@@ -42,6 +43,9 @@ Onyx.connect({
     callback: (val) => (isNetworkOffline = lodashGet(val, 'isOffline', false)),
 });
 
+let environmentURL;
+Environment.getEnvironmentURL().then((url) => (environmentURL = url));
+
 /**
  * @param {Object} reportAction
  * @returns {Boolean}
@@ -347,7 +351,11 @@ function shouldReportActionBeVisible(reportAction, key) {
     }
 
     // Filter out any unsupported reportAction types
-    if (!Object.values(CONST.REPORT.ACTIONS.TYPE).includes(reportAction.actionName) && !Object.values(CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG).includes(reportAction.actionName)) {
+    if (
+        !Object.values(CONST.REPORT.ACTIONS.TYPE).includes(reportAction.actionName) &&
+        !Object.values(CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG).includes(reportAction.actionName) &&
+        !Object.values(CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG).includes(reportAction.actionName)
+    ) {
         return false;
     }
 
@@ -388,6 +396,22 @@ function shouldReportActionBeVisibleAsLastAction(reportAction) {
     );
 }
 
+/**
+ * For invite to room and remove from room policy change logs, report URLs are generated in the server,
+ * which includes a baseURL placeholder that's replaced in the client.
+ * 
+ * @param {Object} reportAction
+ * @returns {Object}
+ */
+function replaceBaseURL(reportAction) {
+    if (reportAction.actionName !== CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.INVITE_TO_ROOM && reportAction.actionName !== CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.REMOVEFROMROOM) {
+        return reportAction;
+    }
+    const updatedReportAction = _.clone(reportAction);
+    updatedReportAction.message[0].html = reportAction.message[0].html.replace('%baseURL', environmentURL);
+    return updatedReportAction;
+}
+
 /**
  * @param {String} reportID
  * @param {Object} [actionsToMerge]
@@ -464,7 +488,8 @@ function filterOutDeprecatedReportActions(reportActions) {
  */
 function getSortedReportActionsForDisplay(reportActions) {
     const filteredReportActions = _.filter(reportActions, (reportAction, key) => shouldReportActionBeVisible(reportAction, key));
-    return getSortedReportActions(filteredReportActions, true);
+    const baseURLAdjustedReportActions = _.map(filteredReportActions, (reportAction) => replaceBaseURL(reportAction));
+    return getSortedReportActions(baseURLAdjustedReportActions, true);
 }
 
 /**

src/pages/NewChatSelectorPage.js

@@ -3,7 +3,6 @@ import {withOnyx} from 'react-native-onyx';
 import OnyxTabNavigator, {TopTab} from '../libs/Navigation/OnyxTabNavigator';
 import TabSelector from '../components/TabSelector/TabSelector';
 import Navigation from '../libs/Navigation/Navigation';
-import Permissions from '../libs/Permissions';
 import NewChatPage from './NewChatPage';
 import WorkspaceNewRoomPage from './workspace/WorkspaceNewRoomPage';
 import CONST from '../CONST';

src/pages/home/report/ReportActionItemFragment.js

@@ -116,7 +116,6 @@ function ReportActionItemFragment(props) {
             // Threaded messages display "[Deleted message]" instead of being hidden altogether.
             // While offline we display the previous message with a strikethrough style. Once online we want to
             // immediately display "[Deleted message]" while the delete action is pending.
-
             if ((!props.network.isOffline && props.isThreadParentMessage && props.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) || props.fragment.isDeletedParentAction) {
                 return <RenderHTML html={`<comment>${props.translate('parentReportAction.deletedMessage')}</comment>`} />;
             }