webfix/27090 In Header Workspace, members are not shown.

src/pages/ReportDetailsPage.js

@@ -1,4 +1,4 @@
-import React, {useMemo} from 'react';
+import React, {useCallback, useEffect, useMemo} from 'react';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -16,6 +16,7 @@ import * as OptionsListUtils from '../libs/OptionsListUtils';
 import * as ReportUtils from '../libs/ReportUtils';
 import * as PolicyUtils from '../libs/PolicyUtils';
 import * as Report from '../libs/actions/Report';
+import * as Policy from '../libs/actions/Policy';
 import participantPropTypes from '../components/participantPropTypes';
 import * as Expensicons from '../components/Icon/Expensicons';
 import ROUTES from '../ROUTES';
@@ -72,7 +73,12 @@ function ReportDetailsPage(props) {
     const chatRoomSubtitle = useMemo(() => ReportUtils.getChatRoomSubtitle(props.report), [props.report, policy]);
     const parentNavigationSubtitleData = ReportUtils.getParentNavigationSubtitle(props.report);
     const canLeaveRoom = useMemo(() => ReportUtils.canLeaveRoom(props.report, !_.isEmpty(policy)), [policy, props.report]);
-    const participants = useMemo(() => ReportUtils.getParticipantsIDs(props.report), [props.report]);
+    const workspaceMembers = useMemo(() => _.keys(PolicyUtils.getMemberAccountIDsForWorkspace(props.policyMembers, props.personalDetails)), [props.policyMembers, props.personalDetails]);
+
+    const participants = useMemo(
+        () => (props.report.policyID && !ReportUtils.isAdminRoom(props.report) ? workspaceMembers : ReportUtils.getParticipantsIDs(props.report)),
+        [props.report, workspaceMembers],
+    );
 
     const isGroupDMChat = useMemo(() => ReportUtils.isDM(props.report) && participants.length > 1, [props.report, participants.length]);
 
@@ -156,6 +162,16 @@ function ReportDetailsPage(props) {
             {chatRoomSubtitle}
         </Text>
     ) : null;
+    const getWorkspaceMembers = useCallback(() => {
+        Policy.openWorkspaceMembersPage(props.report.policyID, workspaceMembers);
+    }, [props.report.policyID, workspaceMembers]);
+
+    useEffect(() => {
+        if (!props.report.policyID || ReportUtils.isAdminRoom(props.report)) {
+            return;
+        }
+        getWorkspaceMembers();
+    }, [getWorkspaceMembers, props.report]);
 
     return (
         <ScreenWrapper testID={ReportDetailsPage.displayName}>
@@ -243,5 +259,8 @@ export default compose(
         policies: {
             key: ONYXKEYS.COLLECTION.POLICY,
         },
+        policyMembers: {
+            key: (props) => `${ONYXKEYS.COLLECTION.POLICY_MEMBERS}${props.report.policyID}`,
+        },
     }),
 )(ReportDetailsPage);

src/pages/ReportParticipantsPage.js

@@ -4,6 +4,7 @@ import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
+import lodashUniqBy from 'lodash/uniqBy';
 import styles from '../styles/styles';
 import ONYXKEYS from '../ONYXKEYS';
 import HeaderWithBackButton from '../components/HeaderWithBackButton';
@@ -83,7 +84,39 @@ const getAllParticipants = (report, personalDetails, translate) =>
         .value();
 
 function ReportParticipantsPage(props) {
-    const participants = _.map(getAllParticipants(props.report, props.personalDetails, props.translate), (participant) => ({
+    const getMemberOptions = () => {
+        let result = [];
+        _.each(props.policyMembers, (__, accountID) => {
+            const details = lodashGet(props.personalDetails, accountID, {displayName: props.personalDetails.displayName || props.translate('common.hidden'), avatar: ''});
+
+            result.push({
+                keyForList: accountID,
+                accountID: Number(accountID),
+                text: details.displayName,
+                displayName: details.displayName,
+                alternateText: details.login,
+                icons: [
+                    {
+                        id: accountID,
+                        source: UserUtils.getAvatar(details.avatar, accountID),
+                        name: details.login,
+                        type: CONST.ICON_TYPE_AVATAR,
+                    },
+                ],
+            });
+        });
+
+        result = _.sortBy(lodashUniqBy(result, 'alternateText'), (value) => (value.text || '').toLowerCase());
+
+        return result;
+    };
+
+    const data =
+        props.report.policyID && props.policyMembers && !ReportUtils.isAdminRoom(props.report)
+            ? getMemberOptions()
+            : getAllParticipants(props.report, props.personalDetails, props.translate);
+
+    const participants = _.map(data, (participant) => ({
         ...participant,
         isDisabled: ReportUtils.isOptimisticPersonalDetail(participant.accountID),
     }));
@@ -150,5 +183,8 @@ export default compose(
         personalDetails: {
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,
         },
+        policyMembers: {
+            key: (props) => `${ONYXKEYS.COLLECTION.POLICY_MEMBERS}${props.report.policyID}`,
+        },
     }),
 )(ReportParticipantsPage);