From 1644169ff3f1e4d10b4559e452315b0d244665a7 Mon Sep 17 00:00:00 2001 From: R Midhun Suresh Date: Tue, 21 Jan 2025 16:31:32 +0530 Subject: [PATCH] Implement changes to memberlist from feedback (#29029) * Add a separator between joined and invited members * Fix user label in tile having wrong color * Changes to member tiles - ThreePidInviteTile now contains an user label showing "(Invited)" and an email icon. - RoomMemberTile now includes an icon similar to above. - Refactors a bunch of code to make this change sensible. * Remove redundant css code * Fix tests * Update src/components/viewmodels/memberlist/MemberListViewModel.tsx Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> * Update year in license * Fix lint error --------- Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> --- .../with-four-members-linux.png | Bin 17967 -> 18344 bytes res/css/_components.pcss | 1 + res/css/views/rooms/_InvitedIconView.pcss | 10 ++++ res/css/views/rooms/_MemberListView.pcss | 6 ++ res/css/views/rooms/_MemberTileView.pcss | 17 +----- .../memberlist/MemberListViewModel.tsx | 43 ++++++++++---- .../tiles/ThreePidTileViewModel.tsx | 5 ++ .../rooms/MemberList/MemberListHeaderView.tsx | 6 +- .../views/rooms/MemberList/MemberListView.tsx | 53 ++++++++++++++---- .../MemberList/tiles/RoomMemberTileView.tsx | 21 ++++--- .../tiles/ThreePidInviteTileView.tsx | 15 ++++- .../tiles/common/InvitedIconView.tsx | 25 +++++++++ ...emberTileLayout.tsx => MemberTileView.tsx} | 15 +++-- .../MemberTileView-test.tsx.snap | 24 +++++++- 14 files changed, 180 insertions(+), 61 deletions(-) create mode 100644 res/css/views/rooms/_InvitedIconView.pcss create mode 100644 src/components/views/rooms/MemberList/tiles/common/InvitedIconView.tsx rename src/components/views/rooms/MemberList/tiles/common/{MemberTileLayout.tsx => MemberTileView.tsx} (76%) diff --git a/playwright/snapshots/right-panel/memberlist.spec.ts/with-four-members-linux.png b/playwright/snapshots/right-panel/memberlist.spec.ts/with-four-members-linux.png index f0e14ee55cf0c7489e8bb91dfeb41b2880f323dd..8e99fefd8750b3769cb677517800baa4e315c129 100644 GIT binary patch literal 18344 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 diff --git a/res/css/_components.pcss b/res/css/_components.pcss index e0f9a5788de..88e4617b132 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -283,6 +283,7 @@ @import "./views/rooms/_EventTile.pcss"; @import "./views/rooms/_HistoryTile.pcss"; @import "./views/rooms/_IRCLayout.pcss"; +@import "./views/rooms/_InvitedIconView.pcss"; @import "./views/rooms/_JumpToBottomButton.pcss"; @import "./views/rooms/_LinkPreviewGroup.pcss"; @import "./views/rooms/_LinkPreviewWidget.pcss"; diff --git a/res/css/views/rooms/_InvitedIconView.pcss b/res/css/views/rooms/_InvitedIconView.pcss new file mode 100644 index 00000000000..504f4498af9 --- /dev/null +++ b/res/css/views/rooms/_InvitedIconView.pcss @@ -0,0 +1,10 @@ +/* +Copyright 2025 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +.mx_InvitedIconView { + color: var(--cpd-color-icon-tertiary); +} diff --git a/res/css/views/rooms/_MemberListView.pcss b/res/css/views/rooms/_MemberListView.pcss index e13b17b226e..0aee9cb1596 100644 --- a/res/css/views/rooms/_MemberListView.pcss +++ b/res/css/views/rooms/_MemberListView.pcss @@ -14,4 +14,10 @@ Please see LICENSE files in the repository root for full details. .mx_MemberListView_container { height: 100%; } + + .mx_MemberListView_separator { + margin: 0; + border: none; + border-top: 2px solid var(--cpd-color-bg-subtle-primary); + } } diff --git a/res/css/views/rooms/_MemberTileView.pcss b/res/css/views/rooms/_MemberTileView.pcss index 702edd8f9d2..a8acb8975a6 100644 --- a/res/css/views/rooms/_MemberTileView.pcss +++ b/res/css/views/rooms/_MemberTileView.pcss @@ -31,9 +31,10 @@ Please see LICENSE files in the repository root for full details. min-width: 0; } - .mx_MemberTileView_user_label { + .mx_MemberTileView_userLabel { font: var(--cpd-font-body-sm-regular); font-size: 13px; + color: var(--cpd-color-text-secondary); } .mx_MemberTileView_avatar { @@ -41,18 +42,4 @@ Please see LICENSE files in the repository root for full details. height: 32px; width: 32px; } - - .mx_E2EIconView { - display: flex; - justify-content: center; - align-items: center; - } - - .mx_E2EIconView_warning { - color: var(--cpd-color-icon-critical-primary); - } - - .mx_E2EIconView_verified { - color: var(--cpd-color-icon-success-primary); - } } diff --git a/src/components/viewmodels/memberlist/MemberListViewModel.tsx b/src/components/viewmodels/memberlist/MemberListViewModel.tsx index 88eacb1b931..6955746c358 100644 --- a/src/components/viewmodels/memberlist/MemberListViewModel.tsx +++ b/src/components/viewmodels/memberlist/MemberListViewModel.tsx @@ -99,8 +99,12 @@ export function sdkRoomMemberToRoomMember(member: SdkRoomMember): Member { }; } +export const SEPARATOR = "SEPARATOR"; +export type MemberWithSeparator = Member | typeof SEPARATOR; + export interface MemberListViewState { - members: Member[]; + members: MemberWithSeparator[]; + memberCount: number; search: (searchQuery: string) => void; isPresenceEnabled: boolean; shouldShowInvite: boolean; @@ -118,10 +122,16 @@ export function useMemberListViewModel(roomId: string): MemberListViewState { } const sdkContext = useContext(SDKContext); - const [memberMap, setMemberMap] = useState>(new Map()); + const [memberMap, setMemberMap] = useState>(new Map()); const [isLoading, setIsLoading] = useState(true); // This is the last known total number of members in this room. const [totalMemberCount, setTotalMemberCount] = useState(0); + /** + * This is the current number of members in the list. + * This number will be less than the total number of members + * in the room when the search functionality is used. + */ + const [memberCount, setMemberCount] = useState(0); const loadMembers = useMemo( () => @@ -131,24 +141,34 @@ export function useMemberListViewModel(roomId: string): MemberListViewState { roomId, searchQuery, ); - const newMemberMap = new Map(); - // First add the invited room members + const threePidInvited = getPending3PidInvites(room, searchQuery); + + const newMemberMap = new Map(); + + // First add the joined room members + for (const member of joinedSdk) { + const roomMember = sdkRoomMemberToRoomMember(member); + newMemberMap.set(member.userId, roomMember); + } + + // Then a separator if needed + if (joinedSdk.length > 0 && (invitedSdk.length > 0 || threePidInvited.length > 0)) + newMemberMap.set(SEPARATOR, SEPARATOR); + + // Then add the invited room members for (const member of invitedSdk) { const roomMember = sdkRoomMemberToRoomMember(member); newMemberMap.set(member.userId, roomMember); } - // Then add the third party invites - const threePidInvited = getPending3PidInvites(room, searchQuery); + + // Finally add the third party invites for (const invited of threePidInvited) { const key = invited.threePidInvite!.event.getContent().display_name; newMemberMap.set(key, invited); } - // Finally add the joined room members - for (const member of joinedSdk) { - const roomMember = sdkRoomMemberToRoomMember(member); - newMemberMap.set(member.userId, roomMember); - } + setMemberMap(newMemberMap); + setMemberCount(joinedSdk.length + invitedSdk.length + threePidInvited.length); if (!searchQuery) { /** * Since searching for members only gives you the relevant @@ -241,6 +261,7 @@ export function useMemberListViewModel(roomId: string): MemberListViewState { return { members: Array.from(memberMap.values()), + memberCount, search: loadMembers, shouldShowInvite, isPresenceEnabled, diff --git a/src/components/viewmodels/memberlist/tiles/ThreePidTileViewModel.tsx b/src/components/viewmodels/memberlist/tiles/ThreePidTileViewModel.tsx index daeb8d899f4..26c493be2bc 100644 --- a/src/components/viewmodels/memberlist/tiles/ThreePidTileViewModel.tsx +++ b/src/components/viewmodels/memberlist/tiles/ThreePidTileViewModel.tsx @@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details. import dis from "../../../../dispatcher/dispatcher"; import { Action } from "../../../../dispatcher/actions"; import { ThreePIDInvite } from "../../../../models/rooms/ThreePIDInvite"; +import { _t } from "../../../../languageHandler"; interface ThreePidTileViewModelProps { threePidInvite: ThreePIDInvite; @@ -16,6 +17,7 @@ interface ThreePidTileViewModelProps { export interface ThreePidTileViewState { name: string; onClick: () => void; + userLabel?: string; } export function useThreePidTileViewModel(props: ThreePidTileViewModelProps): ThreePidTileViewState { @@ -28,8 +30,11 @@ export function useThreePidTileViewModel(props: ThreePidTileViewModelProps): Thr }); }; + const userLabel = `(${_t("member_list|invited_label")})`; + return { name, onClick, + userLabel, }; } diff --git a/src/components/views/rooms/MemberList/MemberListHeaderView.tsx b/src/components/views/rooms/MemberList/MemberListHeaderView.tsx index 7b7531b1e9b..4dd5fd73c47 100644 --- a/src/components/views/rooms/MemberList/MemberListHeaderView.tsx +++ b/src/components/views/rooms/MemberList/MemberListHeaderView.tsx @@ -88,12 +88,10 @@ function getHeaderLabelJSX(vm: MemberListViewState): React.ReactNode { ); } - - const filteredMemberCount = vm.members.length; - if (filteredMemberCount === 0) { + if (vm.memberCount === 0) { return _t("member_list|no_matches"); } - return _t("member_list|count", { count: filteredMemberCount }); + return _t("member_list|count", { count: vm.memberCount }); } export const MemberListHeaderView: React.FC = (props: Props) => { diff --git a/src/components/views/rooms/MemberList/MemberListView.tsx b/src/components/views/rooms/MemberList/MemberListView.tsx index 8dd0a0995b5..f45b15eff1b 100644 --- a/src/components/views/rooms/MemberList/MemberListView.tsx +++ b/src/components/views/rooms/MemberList/MemberListView.tsx @@ -11,7 +11,11 @@ import { List, ListRowProps } from "react-virtualized/dist/commonjs/List"; import { AutoSizer } from "react-virtualized"; import { Flex } from "../../../utils/Flex"; -import { useMemberListViewModel } from "../../../viewmodels/memberlist/MemberListViewModel"; +import { + MemberWithSeparator, + SEPARATOR, + useMemberListViewModel, +} from "../../../viewmodels/memberlist/MemberListViewModel"; import { RoomMemberTileView } from "./tiles/RoomMemberTileView"; import { ThreePidInviteTileView } from "./tiles/ThreePidInviteTileView"; import { MemberListHeaderView } from "./MemberListHeaderView"; @@ -26,10 +30,41 @@ interface IProps { const MemberListView: React.FC = (props: IProps) => { const vm = useMemberListViewModel(props.roomId); - const memberCount = vm.members.length; + const totalRows = vm.members.length; + + const getRowComponent = (item: MemberWithSeparator): React.JSX.Element => { + if (item === SEPARATOR) { + return
; + } else if (item.member) { + return ; + } else { + return ; + } + }; + + const getRowHeight = ({ index }: { index: number }): number => { + if (vm.members[index] === SEPARATOR) { + /** + * This is a separator of 2px height rendered between + * joined and invited members. + */ + return 2; + } else if (totalRows && index === totalRows) { + /** + * The empty spacer div rendered at the bottom should + * have a height of 32px. + */ + return 32; + } else { + /** + * The actual member tiles have a height of 56px. + */ + return 56; + } + }; const rowRenderer = ({ key, index, style }: ListRowProps): React.JSX.Element => { - if (index === memberCount) { + if (index === totalRows) { // We've rendered all the members, // now we render an empty div to add some space to the end of the list. return
; @@ -37,11 +72,7 @@ const MemberListView: React.FC = (props: IProps) => { const item = vm.members[index]; return (
- {item.member ? ( - - ) : ( - - )} + {getRowComponent(item)}
); }; @@ -63,11 +94,9 @@ const MemberListView: React.FC = (props: IProps) => { {({ height, width }) => ( (index === memberCount ? 32 : 56)} + rowHeight={getRowHeight} // The +1 refers to the additional empty div that we render at the end of the list. - rowCount={memberCount + 1} + rowCount={totalRows + 1} // Subtract the height of MemberlistHeaderView so that the parent div does not overflow. height={height - 113} width={width} diff --git a/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx b/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx index c0109e619bc..7aeb32a343b 100644 --- a/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx +++ b/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx @@ -14,7 +14,8 @@ import { E2EIconView } from "./common/E2EIconView"; import AvatarPresenceIconView from "./common/PresenceIconView"; import BaseAvatar from "../../../avatars/BaseAvatar"; import { _t } from "../../../../../languageHandler"; -import { MemberTileLayout } from "./common/MemberTileLayout"; +import { MemberTileView } from "./common/MemberTileView"; +import { InvitedIconView } from "./common/InvitedIconView"; interface IProps { member: RoomMember; @@ -43,25 +44,23 @@ export function RoomMemberTileView(props: IProps): JSX.Element { presenceJSX = ; } - let userLabelJSX; - if (vm.userLabel) { - userLabelJSX =
{vm.userLabel}
; - } - - let e2eIcon; + let iconJsx; if (vm.e2eStatus) { - e2eIcon = ; + iconJsx = ; + } + if (member.isInvite) { + iconJsx = ; } return ( - ); } diff --git a/src/components/views/rooms/MemberList/tiles/ThreePidInviteTileView.tsx b/src/components/views/rooms/MemberList/tiles/ThreePidInviteTileView.tsx index f6890cc034f..5a177eb5bf0 100644 --- a/src/components/views/rooms/MemberList/tiles/ThreePidInviteTileView.tsx +++ b/src/components/views/rooms/MemberList/tiles/ThreePidInviteTileView.tsx @@ -10,7 +10,8 @@ import React from "react"; import { useThreePidTileViewModel } from "../../../../viewmodels/memberlist/tiles/ThreePidTileViewModel"; import { ThreePIDInvite } from "../../../../../models/rooms/ThreePIDInvite"; import BaseAvatar from "../../../avatars/BaseAvatar"; -import { MemberTileLayout } from "./common/MemberTileLayout"; +import { MemberTileView } from "./common/MemberTileView"; +import { InvitedIconView } from "./common/InvitedIconView"; interface Props { threePidInvite: ThreePIDInvite; @@ -19,5 +20,15 @@ interface Props { export function ThreePidInviteTileView(props: Props): JSX.Element { const vm = useThreePidTileViewModel(props); const av =
diff --git a/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap b/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap index 6feb72ea62d..a4969824e09 100644 --- a/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap +++ b/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap @@ -224,7 +224,29 @@ exports[`MemberTileView ThreePidInviteTileView renders ThreePidInvite correctly
+ > +
+ (Invited) +
+
+ + + +
+