[hold for payment 2024-09-17] [$500] Make the Details > Members view of rooms, groups, and reports consistent

[shawnborton]

As part of the group chat clean up, we updated the Details > Members section look like a table view:

This view matches more closely with what the Members section of the workspace editor looks like.

However, we did not update this same view when viewing certain chat rooms, like this:

So let's make this part of the app consistent and use the updated members table style everywhere.

cc @marcaaron @JmillsExpensify

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01cc3a8881c60b2cb7
• Upwork Job ID: 1820807133375331083
• Last Price Increase: 2024-08-15
• Automatic offers:
• paultsimura | Reviewer | 103430717
• rayane-djouah | Contributor | 103430718

Issue Owner

Current Issue Owner: @paultsimura

[melvin-bot]

Triggered auto assignment to @joekaufmanexpensify (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @dannymcclain (NewFeature)

[rayane-d]

Edited by proposal-police: This proposal was edited at 2024-08-06 13:57:41 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

We need to make the members list of rooms and reports consistent with groups and workspace members list

What is the root cause of that problem?

New feature

What changes do you think we should make in order to solve the problem?

We should update the SelectionList usage in RoomMembersPage to use TableListItem instead of UserListItem:

App/src/pages/RoomMembersPage.tsx

Line 307 in 412fc60

ListItem={UserListItem}

if we need to align the select all checkbox with the other checkboxes, we need to add a listHeaderWrapperStyle like this:

  listHeaderWrapperStyle={[styles.ph9]}

Result:

If we want to use the dynamic button with a dropdown we should:

• Use the SelectionListWithModal instead of SelectionList
• Add props like:

  turnOnSelectionModeOnLongPress
  onTurnOnSelectionMode={(item) => item && toggleUser(item)}
  onSelectRow={openRoomMemberDetails}
  onCheckboxPress={(item) => toggleUser(item)}
  listHeaderWrapperStyle={[styles.ph9]}

• Add dropdown selection button logic similar to here and here but witout including a "make admin" option
• add openRoomMemberDetails function:

    /** Opens the room member details page */
    const openMemberDetails = useCallback(
        (item: ListItem) => {
            Navigation.navigate(ROUTES.ROOM_MEMBERS_DETAILS.getRoute(report.reportID, item?.accountID ?? -1));
        },
        [report],
    );

• add a new route:

    ROOM_MEMBERS_DETAILS: {
        route: 'r/:reportID/members/:accountID',
        getRoute: (reportID: string, accountID: number) => `r/${reportID}/members/${accountID}` as const,
    },

• Implement a new page component ReportMemberDetails for the ROOM_MEMBERS_DETAILS route similar to ReportParticipantDetails here (but without member role and without role menu item) with a "Remove from room" button instead of "Remove from group"

We can also refactor ReportParticipantDetailsPage with condition checks to use it for reports and rooms instead of creating a new page.

[neonbhai]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Make the Details > Members view of rooms, groups, and reports consistent

What is the root cause of that problem?

Feature Request

What changes do you think we should make in order to solve the problem?

We will:

• Use the SelectionListWithModal component

• Change the list item type for room members page to UserListItem
  

  App/src/pages/RoomMembersPage.tsx

  Line 307 in e909496

  ListItem={UserListItem}

• Add Selection Mode to this page:

  • Add props turnOnSelectionModeOnLongPress && onTurnOnSelectionMode={(item) => item && toggleUser(item?.accountID)}

• Add logic for Dropdown Header Button same as here. Render it as

  <View style={[styles.pl5, styles.pr5]}>{headerButtons}</View>
  

• Delete the Remove button, Add a 'Invite Members' button similar to workspace members page here

      const headerContent = useMemo(() => {
        return <Text style={[styles.pl5, styles.mb4, styles.mt6, styles.textSupporting]}>{'List of all room members'}</Text>;
    }, [styles, translate]);
  
    const bulkActionsButtonOptions = useMemo(() => {
        const options: Array<DropdownOption<WorkspaceMemberBulkActionType>> = [
            {
                text: translate('workspace.people.removeMembersTitle'),
                value: CONST.POLICY.MEMBERS_BULK_ACTION_TYPES.REMOVE,
                icon: Expensicons.RemoveMembers,
                onSelected: () => setRemoveMembersConfirmModalVisible(true),
            },
        ];
  
        return options;
    }, [translate, setRemoveMembersConfirmModalVisible, selectedMembers, report.participants]);
  
    const headerButtons = useMemo(() => {
        return (
            <View style={styles.w100}>
                {(selectedMembers.length > 0) ? (
                    <ButtonWithDropdownMenu<WorkspaceMemberBulkActionType>
                        shouldAlwaysShowDropdownMenu
                        pressOnEnter
                        customText={translate('workspace.common.selected', {selectedNumber: selectedMembers.length})}
                        buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
                        onPress={() => null}
                        options={bulkActionsButtonOptions}
                        style={[styles.flexGrow1]}
                        isDisabled={!selectedMembers.length}
                    />
                ) : (
                    <Button
                        medium
                        success
                        onPress={inviteUser}
                        text={translate('workspace.invite.member')}
                        icon={Expensicons.Plus}
                        innerStyles={[styles.alignItemsCenter]}
                        style={[styles.flexGrow1]}
                    />
                )}
            </View>
        );
    }, [bulkActionsButtonOptions, inviteUser, selectedMembers, styles, translate]);

• Remove the SearchValue state.

[rayane-d]

Proposal

Updated to align the "select all" checkbox with other checkboxes

[github-actions]

@user Your proposal will be dismissed because you did not follow the proposal template.

[rayane-d]

Hmm, @shawnborton - Do we need to update the room members page to use the new selection mode and remove the search input? I thought we only need to update the style of the list