UI for room invitations/removals

src/CONST.ts

@@ -516,6 +516,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',
@@ -550,6 +552,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: {
@@ -1423,6 +1430,7 @@ const CONST = {
     REPORT_DETAILS_MENU_ITEM: {
         SHARE_CODE: 'shareCode',
         MEMBERS: 'member',
+        INVITE: 'invite',
         SETTINGS: 'settings',
         LEAVE_ROOM: 'leaveRoom',
         WELCOME_MESSAGE: 'welcomeMessage',

src/ROUTES.ts

@@ -209,6 +209,14 @@ export default {
         route: 'r/:reportID/notes/:accountID/edit',
         getRoute: (reportID: string, accountID: string | number) => `r/${reportID}/notes/${accountID}/edit`,
     },
+    ROOM_MEMBERS: {
+        route: 'r/:reportID/members',
+        getRoute: (reportID: string) => `r/${reportID}/members`,
+    },
+    ROOM_INVITE: {
+        route: 'r/:reportID/invite',
+        getRoute: (reportID: string) => `r/${reportID}/invite`,
+    },
 
     // To see the available iouType, please refer to CONST.IOU.MONEY_REQUEST_TYPE
     MONEY_REQUEST: {

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/languages/en.ts

@@ -1590,13 +1590,18 @@ export default {
         selectAWorkspace: 'Select a workspace',
         growlMessageOnRenameError: 'Unable to rename policy room, please check your connection and try again.',
         visibilityOptions: {
-            restricted: 'Restricted',
+            restricted: 'Workspace', // the translation for "restricted" visibility is actually workspace. This is so we can display restricted visibility rooms as "workspace" without having to change what's stored.
             private: 'Private',
             public: 'Public',
             // eslint-disable-next-line @typescript-eslint/naming-convention
             public_announce: 'Public Announce',
         },
     },
+    roomMembersPage: {
+        memberNotFound: 'Member not found. To invite a new member to the room, please use the Invite button above.',
+        notAuthorized: `You do not have access to this page. Are you trying to join the room? Please reach out to a member of this room so they can add you as a member! Something else? Reach out to ${CONST.EMAIL.CONCIERGE}`,
+        removeMembersPrompt: 'Are you sure you want to remove the selected members from the room?',
+    },
     newTaskPage: {
         assignTask: 'Assign task',
         assignMe: 'Assign to me',

src/languages/es.ts

@@ -1614,13 +1614,18 @@ export default {
         selectAWorkspace: 'Seleccionar un espacio de trabajo',
         growlMessageOnRenameError: 'No se ha podido cambiar el nombre del espacio de trabajo, por favor, comprueba tu conexión e inténtalo de nuevo.',
         visibilityOptions: {
-            restricted: 'Restringida',
+            restricted: 'Espacio de trabajo', // the translation for "restricted" visibility is actually workspace. This is so we can display restricted visibility rooms as "workspace" without having to change what's stored.
             private: 'Privada',
             public: 'Público',
             // eslint-disable-next-line @typescript-eslint/naming-convention
             public_announce: 'Anuncio Público',
         },
     },
+    roomMembersPage: {
+        memberNotFound: 'Miembro no encontrado. Para invitar a un nuevo miembro a la sala de chat, por favor, utiliza el botón Invitar que está más arriba.',
+        notAuthorized: `No tienes acceso a esta página. ¿Estás tratando de unirte a la sala de chat? Comunícate con el propietario de esta sala de chat para que pueda añadirte como miembro. ¿Necesitas algo más? Comunícate con ${CONST.EMAIL.CONCIERGE}`,
+        removeMembersPrompt: '¿Estás seguro de que quieres eliminar a los miembros seleccionados de la sala de chat?',
+    },
     newTaskPage: {
         assignTask: 'Asignar tarea',
         assignMe: 'Asignar a mí mismo',

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/Navigation/AppNavigator/ModalStackNavigators.js

@@ -91,6 +91,14 @@ const ReportParticipantsModalStackNavigator = createModalStackNavigator({
     ReportParticipants_Root: () => require('../../../pages/ReportParticipantsPage').default,
 });
 
+const RoomMembersModalStackNavigator = createModalStackNavigator({
+    RoomMembers_Root: () => require('../../../pages/RoomMembersPage').default,
+});
+
+const RoomInviteModalStackNavigator = createModalStackNavigator({
+    RoomInvite_Root: () => require('../../../pages/RoomInvitePage').default,
+});
+
 const SearchModalStackNavigator = createModalStackNavigator({
     Search_Root: () => require('../../../pages/SearchPage').default,
 });
@@ -230,4 +238,6 @@ export {
     PrivateNotesModalStackNavigator,
     NewTeachersUniteNavigator,
     SignInModalStackNavigator,
+    RoomMembersModalStackNavigator,
+    RoomInviteModalStackNavigator,
 };

src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js

@@ -64,6 +64,14 @@ function RightModalNavigator(props) {
                         name="Participants"
                         component={ModalStackNavigators.ReportParticipantsModalStackNavigator}
                     />
+                    <Stack.Screen
+                        name="RoomMembers"
+                        component={ModalStackNavigators.RoomMembersModalStackNavigator}
+                    />
+                    <Stack.Screen
+                        name="RoomInvite"
+                        component={ModalStackNavigators.RoomInviteModalStackNavigator}
+                    />
                     <Stack.Screen
                         name="MoneyRequest"
                         component={ModalStackNavigators.MoneyRequestModalStackNavigator}

src/libs/Navigation/linkingConfig.js

@@ -325,6 +325,16 @@ export default {
                             ReportParticipants_Root: ROUTES.REPORT_PARTICIPANTS.route,
                         },
                     },
+                    RoomInvite: {
+                        screens: {
+                            RoomInvite_Root: ROUTES.ROOM_INVITE.route,
+                        },
+                    },
+                    RoomMembers: {
+                        screens: {
+                            RoomMembers_Root: ROUTES.ROOM_MEMBERS.route,
+                        },
+                    },
                     MoneyRequest: {
                         screens: {
                             Money_Request: {

src/libs/PolicyUtils.js

@@ -155,6 +155,14 @@ function isExpensifyGuideTeam(email) {
  */
 const isPolicyAdmin = (policy) => lodashGet(policy, 'role') === CONST.POLICY.ROLE.ADMIN;
 
+/**
+ *
+ * @param {String} policyID
+ * @param {Object} policies
+ * @returns {Boolean}
+ */
+const isPolicyMember = (policyID, policies) => _.reduce(policies, (isMember, policy) => isMember || policy.id === policyID, false);
+
 /**
  * @param {Object} policyMembers
  * @param {Object} personalDetails
@@ -276,6 +284,7 @@ export {
     isPolicyAdmin,
     getMemberAccountIDsForWorkspace,
     getIneligibleInvitees,
+    isPolicyMember,
     getTag,
     getTagListName,
     getTagList,

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}
@@ -344,7 +348,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.REMOVE_FROM_ROOM) {
+        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/libs/ReportUtils.js

@@ -3156,7 +3156,7 @@ function shouldReportBeInOptionList(report, currentReportId, isInGSDMode, betas,
         (report.participantAccountIDs &&
             report.participantAccountIDs.length === 0 &&
             !isChatThread(report) &&
-            !isPublicRoom(report) &&
+            !isUserCreatedPolicyRoom(report) &&
             !isArchivedRoom(report) &&
             !isMoneyRequestReport(report) &&
             !isTaskReport(report))

src/libs/SidebarUtils.js

@@ -354,6 +354,31 @@ function getOptionData(report, reportActions, personalDetails, preferredLocale,
             result.alternateText = `${Localize.translate(preferredLocale, 'task.messages.reopened')}`;
         } else if (lastAction && lastAction.actionName === CONST.REPORT.ACTIONS.TYPE.TASKCOMPLETED) {
             result.alternateText = `${Localize.translate(preferredLocale, 'task.messages.completed')}`;
+        } else if (
+            lastAction &&
+            _.includes(
+                [
+                    CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG.INVITE_TO_ROOM,
+                    CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG.REMOVE_FROM_ROOM,
+                    CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.INVITE_TO_ROOM,
+                    CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.REMOVE_FROM_ROOM,
+                ],
+                lastAction.actionName,
+            )
+        ) {
+            const targetAccountIDs = lodashGet(lastAction, 'originalMessage.targetAccountIDs', []);
+            const verb =
+                lastAction.actionName === CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG.INVITE_TO_ROOM || lastAction.actionName === CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.INVITE_TO_ROOM
+                    ? 'invited'
+                    : 'removed';
+            const users = targetAccountIDs.length > 1 ? 'users' : 'user';
+            result.alternateText = `${verb} ${targetAccountIDs.length} ${users}`;
+
+            const roomName = lodashGet(lastAction, 'originalMessage.roomName', '');
+            if (roomName) {
+                const preposition = CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG.INVITE_TO_ROOM || lastAction === CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.INVITE_TO_ROOM ? ' to' : ' from';
+                result.alternateText += `${preposition} ${roomName}`;
+            }
         } else if (lastAction && lastAction.actionName !== CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && lastActorDisplayName && lastMessageTextFromReport) {
             result.alternateText = `${lastActorDisplayName}: ${lastMessageText}`;
         } else {