RoomTile2 -> RoomTile

res/css/_components.scss

@@ -181,7 +181,7 @@
 @import "./views/rooms/_RoomPreviewBar.scss";
 @import "./views/rooms/_RoomRecoveryReminder.scss";
 @import "./views/rooms/_RoomSublist2.scss";
-@import "./views/rooms/_RoomTile2.scss";
+@import "./views/rooms/_RoomTile.scss";
 @import "./views/rooms/_RoomTileIcon.scss";
 @import "./views/rooms/_RoomUpgradeWarningBar.scss";
 @import "./views/rooms/_SearchBar.scss";

res/css/views/avatars/_DecoratedRoomAvatar.scss

@@ -24,7 +24,7 @@ limitations under the License.
         right: 0;
     }
 
-    .mx_NotificationBadge, .mx_RoomTile2_badgeContainer {
+    .mx_NotificationBadge, .mx_RoomTile_badgeContainer {
         position: absolute;
         top: 0;
         right: 0;

res/css/views/rooms/_RoomTile.scss

@@ -14,29 +14,27 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
-
 // Note: the room tile expects to be in a flexbox column container
-.mx_RoomTile2 {
+.mx_RoomTile {
     margin-bottom: 4px;
     padding: 4px;
 
     // The tile is also a flexbox row itself
     display: flex;
 
-    &.mx_RoomTile2_selected,
+    &.mx_RoomTile_selected,
     &:hover,
     &:focus-within,
-    &.mx_RoomTile2_hasMenuOpen {
+    &.mx_RoomTile_hasMenuOpen {
         background-color: $roomtile2-selected-bg-color;
         border-radius: 8px;
     }
 
-    .mx_DecoratedRoomAvatar, .mx_RoomTile2_avatarContainer {
+    .mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
         margin-right: 8px;
     }
 
-    .mx_RoomTile2_nameContainer {
+    .mx_RoomTile_nameContainer {
         flex-grow: 1;
         min-width: 0; // allow flex to shrink it
         margin-right: 8px; // spacing to buttons/badges
@@ -46,8 +44,8 @@ limitations under the License.
         flex-direction: column;
         justify-content: center;
 
-        .mx_RoomTile2_name,
+        .mx_RoomTile_name,
-        .mx_RoomTile2_messagePreview {
+        .mx_RoomTile_messagePreview {
             margin: 0 2px;
             width: 100%;
 
@@ -57,31 +55,31 @@ limitations under the License.
             white-space: nowrap;
         }
 
-        .mx_RoomTile2_name {
+        .mx_RoomTile_name {
             font-size: $font-14px;
             line-height: $font-18px;
         }
 
-        .mx_RoomTile2_name.mx_RoomTile2_nameHasUnreadEvents {
+        .mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents {
             font-weight: 600;
         }
 
-        .mx_RoomTile2_messagePreview {
+        .mx_RoomTile_messagePreview {
             font-size: $font-13px;
             line-height: $font-18px;
             color: $roomtile2-preview-color;
         }
 
-        .mx_RoomTile2_nameWithPreview {
+        .mx_RoomTile_nameWithPreview {
             margin-top: -4px; // shift the name up a bit more
         }
     }
 
-    .mx_RoomTile2_notificationsButton {
+    .mx_RoomTile_notificationsButton {
         margin-left: 4px; // spacing between buttons
     }
 
-    .mx_RoomTile2_badgeContainer {
+    .mx_RoomTile_badgeContainer {
         height: 16px;
         // don't set width so that it takes no space when there is no badge to show
         margin: auto 0; // vertically align
@@ -102,8 +100,8 @@ limitations under the License.
     }
 
     // The context menu buttons are hidden by default
-    .mx_RoomTile2_menuButton,
+    .mx_RoomTile_menuButton,
-    .mx_RoomTile2_notificationsButton {
+    .mx_RoomTile_notificationsButton {
         width: 20px;
         min-width: 20px; // yay flex
         height: 20px;
@@ -127,62 +125,62 @@ limitations under the License.
     }
 
     // If the room has an overriden notification setting then we always show the notifications menu button
-    .mx_RoomTile2_notificationsButton.mx_RoomTile2_notificationsButton_show {
+    .mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
         display: block;
     }
 
-    .mx_RoomTile2_menuButton::before {
+    .mx_RoomTile_menuButton::before {
         mask-image: url('$(res)/img/element-icons/context-menu.svg');
     }
 
-    &:not(.mx_RoomTile2_minimized) {
+    &:not(.mx_RoomTile_minimized) {
         &:hover,
         &:focus-within,
-        &.mx_RoomTile2_hasMenuOpen {
+        &.mx_RoomTile_hasMenuOpen {
             // Hide the badge container on hover because it'll be a menu button
-            .mx_RoomTile2_badgeContainer {
+            .mx_RoomTile_badgeContainer {
                 width: 0;
                 height: 0;
                 display: none;
             }
 
-            .mx_RoomTile2_notificationsButton,
+            .mx_RoomTile_notificationsButton,
-            .mx_RoomTile2_menuButton {
+            .mx_RoomTile_menuButton {
                 display: block;
             }
         }
     }
 
-    &.mx_RoomTile2_minimized {
+    &.mx_RoomTile_minimized {
         flex-direction: column;
         align-items: center;
         position: relative;
 
-        .mx_DecoratedRoomAvatar, .mx_RoomTile2_avatarContainer {
+        .mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
             margin-right: 0;
         }
     }
 }
 
 // We use these both in context menus and the room tiles
-.mx_RoomTile2_iconBell::before {
+.mx_RoomTile_iconBell::before {
     mask-image: url('$(res)/img/element-icons/notifications.svg');
 }
-.mx_RoomTile2_iconBellDot::before {
+.mx_RoomTile_iconBellDot::before {
     mask-image: url('$(res)/img/element-icons/roomlist/notifications-default.svg');
 }
-.mx_RoomTile2_iconBellCrossed::before {
+.mx_RoomTile_iconBellCrossed::before {
     mask-image: url('$(res)/img/element-icons/roomlist/notifications-off.svg');
 }
-.mx_RoomTile2_iconBellMentions::before {
+.mx_RoomTile_iconBellMentions::before {
     mask-image: url('$(res)/img/element-icons/roomlist/notifications-dm.svg');
 }
-.mx_RoomTile2_iconCheck::before {
+.mx_RoomTile_iconCheck::before {
     mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
 }
 
-.mx_RoomTile2_contextMenu {
+.mx_RoomTile_contextMenu {
-    .mx_RoomTile2_contextMenu_redRow {
+    .mx_RoomTile_contextMenu_redRow {
         .mx_AccessibleButton {
             color: $warning-color !important; // !important to override styles from context menu
         }
@@ -192,7 +190,7 @@ limitations under the License.
         }
     }
 
-    .mx_RoomTile2_contextMenu_activeRow {
+    .mx_RoomTile_contextMenu_activeRow {
         &.mx_AccessibleButton, .mx_AccessibleButton {
             color: $accent-color !important; // !important to override styles from context menu
         }
@@ -219,23 +217,23 @@ limitations under the License.
         }
     }
 
-    .mx_RoomTile2_iconStar::before {
+    .mx_RoomTile_iconStar::before {
         mask-image: url('$(res)/img/element-icons/roomlist/favorite.svg');
     }
 
-    .mx_RoomTile2_iconFavorite::before {
+    .mx_RoomTile_iconFavorite::before {
         mask-image: url('$(res)/img/feather-customised/favourites.svg');
     }
 
-    .mx_RoomTile2_iconArrowDown::before {
+    .mx_RoomTile_iconArrowDown::before {
         mask-image: url('$(res)/img/element-icons/roomlist/low-priority.svg');
     }
 
-    .mx_RoomTile2_iconSettings::before {
+    .mx_RoomTile_iconSettings::before {
         mask-image: url('$(res)/img/element-icons/settings.svg');
     }
 
-    .mx_RoomTile2_iconSignOut::before {
+    .mx_RoomTile_iconSignOut::before {
         mask-image: url('$(res)/img/element-icons/leave.svg');
     }
 }

src/components/structures/LeftPanel.tsx

@@ -51,7 +51,7 @@ const cssClasses = [
     "mx_RoomSearch_input",
     "mx_RoomSearch_icon", // minimized <RoomSearch />
     "mx_RoomSublist2_headerText",
-    "mx_RoomTile2",
+    "mx_RoomTile",
     "mx_RoomSublist2_showNButton",
 ];
 
@@ -264,7 +264,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
     };
 
     private onEnter = () => {
-        const firstRoom = this.listContainerRef.current.querySelector<HTMLDivElement>(".mx_RoomTile2");
+        const firstRoom = this.listContainerRef.current.querySelector<HTMLDivElement>(".mx_RoomTile");
         if (firstRoom) {
             firstRoom.click();
             return true; // to get the field to clear

src/components/views/rooms/RoomSublist2.tsx

@@ -23,7 +23,7 @@ import classNames from 'classnames';
 import { RovingAccessibleButton, RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
 import { _t } from "../../../languageHandler";
 import AccessibleButton from "../../views/elements/AccessibleButton";
-import RoomTile2 from "./RoomTile2";
+import RoomTile from "./RoomTile";
 import { ListLayout } from "../../../stores/room-list/ListLayout";
 import {
     ChevronFace,
@@ -252,7 +252,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
 
     private focusRoomTile = (index: number) => {
         if (!this.sublistRef.current) return;
-        const elements = this.sublistRef.current.querySelectorAll<HTMLDivElement>(".mx_RoomTile2");
+        const elements = this.sublistRef.current.querySelectorAll<HTMLDivElement>(".mx_RoomTile");
         const element = elements && elements[index];
         if (element) {
             element.focus();
@@ -370,7 +370,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                     this.toggleCollapsed();
                 } else if (this.sublistRef.current) {
                     // otherwise focus the first room
-                    const element = this.sublistRef.current.querySelector(".mx_RoomTile2") as HTMLDivElement;
+                    const element = this.sublistRef.current.querySelector(".mx_RoomTile") as HTMLDivElement;
                     if (element) {
                         element.focus();
                     }
@@ -405,7 +405,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
             const visibleRooms = this.props.rooms.slice(0, this.numVisibleTiles);
             for (const room of visibleRooms) {
                 tiles.push(
-                    <RoomTile2
+                    <RoomTile
                         room={room}
                         key={`room-${room.roomId}`}
                         showMessagePreview={this.layout.showPreviews}

src/components/views/rooms/RoomTile.tsx

@@ -77,7 +77,7 @@ interface IState {
     generalMenuPosition: PartialDOMRect;
 }
 
-const messagePreviewId = (roomId: string) => `mx_RoomTile2_messagePreview_${roomId}`;
+const messagePreviewId = (roomId: string) => `mx_RoomTile_messagePreview_${roomId}`;
 
 const contextMenuBelow = (elementRect: PartialDOMRect) => {
     // align the context menu's icons with the icon which opened the context menu
@@ -96,12 +96,12 @@ interface INotifOptionProps {
 
 const NotifOption: React.FC<INotifOptionProps> = ({active, onClick, iconClassName, label}) => {
     const classes = classNames({
-        mx_RoomTile2_contextMenu_activeRow: active,
+        mx_RoomTile_contextMenu_activeRow: active,
     });
 
     let activeIcon;
     if (active) {
-        activeIcon = <span className="mx_IconizedContextMenu_icon mx_RoomTile2_iconCheck" />;
+        activeIcon = <span className="mx_IconizedContextMenu_icon mx_RoomTile_iconCheck" />;
     }
 
     return (
@@ -113,7 +113,7 @@ const NotifOption: React.FC<INotifOptionProps> = ({active, onClick, iconClassNam
     );
 };
 
-export default class RoomTile2 extends React.Component<IProps, IState> {
+export default class RoomTile extends React.Component<IProps, IState> {
     private dispatcherRef: string;
     private roomTileRef = createRef<HTMLDivElement>();
 
@@ -328,30 +328,30 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
         if (this.state.notificationsMenuPosition) {
             contextMenu = (
                 <ContextMenu {...contextMenuBelow(this.state.notificationsMenuPosition)} onFinished={this.onCloseNotificationsMenu}>
-                    <div className="mx_IconizedContextMenu mx_IconizedContextMenu_compact mx_RoomTile2_contextMenu">
+                    <div className="mx_IconizedContextMenu mx_IconizedContextMenu_compact mx_RoomTile_contextMenu">
                         <div className="mx_IconizedContextMenu_optionList">
                             <NotifOption
                                 label={_t("Use default")}
                                 active={state === ALL_MESSAGES}
-                                iconClassName="mx_RoomTile2_iconBell"
+                                iconClassName="mx_RoomTile_iconBell"
                                 onClick={this.onClickAllNotifs}
                             />
                             <NotifOption
                                 label={_t("All messages")}
                                 active={state === ALL_MESSAGES_LOUD}
-                                iconClassName="mx_RoomTile2_iconBellDot"
+                                iconClassName="mx_RoomTile_iconBellDot"
                                 onClick={this.onClickAlertMe}
                             />
                             <NotifOption
                                 label={_t("Mentions & Keywords")}
                                 active={state === MENTIONS_ONLY}
-                                iconClassName="mx_RoomTile2_iconBellMentions"
+                                iconClassName="mx_RoomTile_iconBellMentions"
                                 onClick={this.onClickMentions}
                             />
                             <NotifOption
                                 label={_t("None")}
                                 active={state === MUTE}
-                                iconClassName="mx_RoomTile2_iconBellCrossed"
+                                iconClassName="mx_RoomTile_iconBellCrossed"
                                 onClick={this.onClickMute}
                             />
                         </div>
@@ -360,16 +360,16 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
             );
         }
 
-        const classes = classNames("mx_RoomTile2_notificationsButton", {
+        const classes = classNames("mx_RoomTile_notificationsButton", {
             // Show bell icon for the default case too.
-            mx_RoomTile2_iconBell: state === ALL_MESSAGES,
+            mx_RoomTile_iconBell: state === ALL_MESSAGES,
-            mx_RoomTile2_iconBellDot: state === ALL_MESSAGES_LOUD,
+            mx_RoomTile_iconBellDot: state === ALL_MESSAGES_LOUD,
-            mx_RoomTile2_iconBellMentions: state === MENTIONS_ONLY,
+            mx_RoomTile_iconBellMentions: state === MENTIONS_ONLY,
-            mx_RoomTile2_iconBellCrossed: state === MUTE,
+            mx_RoomTile_iconBellCrossed: state === MUTE,
 
             // Only show the icon by default if the room is overridden to muted.
             // TODO: [FTUE Notifications] Probably need to detect global mute state
-            mx_RoomTile2_notificationsButton_show: state === MUTE,
+            mx_RoomTile_notificationsButton_show: state === MUTE,
         });
 
         return (
@@ -392,18 +392,18 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
         const roomTags = RoomListStore.instance.getTagsForRoom(this.props.room);
 
         const isFavorite = roomTags.includes(DefaultTagID.Favourite);
-        const favouriteIconClassName = isFavorite ? "mx_RoomTile2_iconFavorite" : "mx_RoomTile2_iconStar";
+        const favouriteIconClassName = isFavorite ? "mx_RoomTile_iconFavorite" : "mx_RoomTile_iconStar";
-        const favouriteLabelClassName = isFavorite ? "mx_RoomTile2_contextMenu_activeRow" : "";
+        const favouriteLabelClassName = isFavorite ? "mx_RoomTile_contextMenu_activeRow" : "";
         const favouriteLabel = isFavorite ? _t("Favourited") : _t("Favourite");
 
         let contextMenu = null;
         if (this.state.generalMenuPosition && this.props.tag === DefaultTagID.Archived) {
             contextMenu = (
                 <ContextMenu {...contextMenuBelow(this.state.generalMenuPosition)} onFinished={this.onCloseGeneralMenu}>
-                    <div className="mx_IconizedContextMenu mx_IconizedContextMenu_compact mx_RoomTile2_contextMenu">
+                    <div className="mx_IconizedContextMenu mx_IconizedContextMenu_compact mx_RoomTile_contextMenu">
-                        <div className="mx_IconizedContextMenu_optionList mx_RoomTile2_contextMenu_redRow">
+                        <div className="mx_IconizedContextMenu_optionList mx_RoomTile_contextMenu_redRow">
                             <MenuItem onClick={this.onForgetRoomClick} label={_t("Leave Room")}>
-                                <span className="mx_IconizedContextMenu_icon mx_RoomTile2_iconSignOut" />
+                                <span className="mx_IconizedContextMenu_icon mx_RoomTile_iconSignOut" />
                                 <span className="mx_IconizedContextMenu_label">{_t("Forget Room")}</span>
                             </MenuItem>
                         </div>
@@ -413,7 +413,7 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
         } else if (this.state.generalMenuPosition) {
             contextMenu = (
                 <ContextMenu {...contextMenuBelow(this.state.generalMenuPosition)} onFinished={this.onCloseGeneralMenu}>
-                    <div className="mx_IconizedContextMenu mx_IconizedContextMenu_compact mx_RoomTile2_contextMenu">
+                    <div className="mx_IconizedContextMenu mx_IconizedContextMenu_compact mx_RoomTile_contextMenu">
                         <div className="mx_IconizedContextMenu_optionList">
                             <MenuItemCheckbox
                                 className={favouriteLabelClassName}
@@ -425,13 +425,13 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
                                 <span className="mx_IconizedContextMenu_label">{favouriteLabel}</span>
                             </MenuItemCheckbox>
                             <MenuItem onClick={this.onOpenRoomSettings} label={_t("Settings")}>
-                                <span className="mx_IconizedContextMenu_icon mx_RoomTile2_iconSettings" />
+                                <span className="mx_IconizedContextMenu_icon mx_RoomTile_iconSettings" />
                                 <span className="mx_IconizedContextMenu_label">{_t("Settings")}</span>
                             </MenuItem>
                         </div>
-                        <div className="mx_IconizedContextMenu_optionList mx_RoomTile2_contextMenu_redRow">
+                        <div className="mx_IconizedContextMenu_optionList mx_RoomTile_contextMenu_redRow">
                             <MenuItem onClick={this.onLeaveRoomClick} label={_t("Leave Room")}>
-                                <span className="mx_IconizedContextMenu_icon mx_RoomTile2_iconSignOut" />
+                                <span className="mx_IconizedContextMenu_icon mx_RoomTile_iconSignOut" />
                                 <span className="mx_IconizedContextMenu_label">{_t("Leave Room")}</span>
                             </MenuItem>
                         </div>
@@ -443,7 +443,7 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
         return (
             <React.Fragment>
                 <ContextMenuTooltipButton
-                    className="mx_RoomTile2_menuButton"
+                    className="mx_RoomTile_menuButton"
                     onClick={this.onGeneralMenuOpenClick}
                     title={_t("Room options")}
                     isExpanded={!!this.state.generalMenuPosition}
@@ -455,10 +455,10 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
 
     public render(): React.ReactElement {
         const classes = classNames({
-            'mx_RoomTile2': true,
+            'mx_RoomTile': true,
-            'mx_RoomTile2_selected': this.state.selected,
+            'mx_RoomTile_selected': this.state.selected,
-            'mx_RoomTile2_hasMenuOpen': !!(this.state.generalMenuPosition || this.state.notificationsMenuPosition),
+            'mx_RoomTile_hasMenuOpen': !!(this.state.generalMenuPosition || this.state.notificationsMenuPosition),
-            'mx_RoomTile2_minimized': this.props.isMinimized,
+            'mx_RoomTile_minimized': this.props.isMinimized,
         });
 
         const roomAvatar = <DecoratedRoomAvatar
@@ -472,7 +472,7 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
         if (!this.props.isMinimized) {
             // aria-hidden because we summarise the unread count/highlight status in a manual aria-label below
             badge = (
-                <div className="mx_RoomTile2_badgeContainer" aria-hidden="true">
+                <div className="mx_RoomTile_badgeContainer" aria-hidden="true">
                     <NotificationBadge
                         notification={this.state.notificationState}
                         forceCount={false}
@@ -494,7 +494,7 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
             // Only show the preview if there is one to show.
             if (text) {
                 messagePreview = (
-                    <div className="mx_RoomTile2_messagePreview" id={messagePreviewId(this.props.room.roomId)}>
+                    <div className="mx_RoomTile_messagePreview" id={messagePreviewId(this.props.room.roomId)}>
                         {text}
                     </div>
                 );
@@ -502,13 +502,13 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
         }
 
         const nameClasses = classNames({
-            "mx_RoomTile2_name": true,
+            "mx_RoomTile_name": true,
-            "mx_RoomTile2_nameWithPreview": !!messagePreview,
+            "mx_RoomTile_nameWithPreview": !!messagePreview,
-            "mx_RoomTile2_nameHasUnreadEvents": this.state.notificationState.isUnread,
+            "mx_RoomTile_nameHasUnreadEvents": this.state.notificationState.isUnread,
         });
 
         let nameContainer = (
-            <div className="mx_RoomTile2_nameContainer">
+            <div className="mx_RoomTile_nameContainer">
                 <div title={name} className={nameClasses} tabIndex={-1} dir="auto">
                     {name}
                 </div>

src/components/views/rooms/TemporaryTile.tsx

@@ -59,10 +59,10 @@ export default class TemporaryTile extends React.Component<IProps, IState> {
     public render(): React.ReactElement {
         // XXX: We copy classes because it's easier
         const classes = classNames({
-            'mx_RoomTile2': true,
+            'mx_RoomTile': true,
             'mx_TemporaryTile': true,
-            'mx_RoomTile2_selected': this.props.isSelected,
+            'mx_RoomTile_selected': this.props.isSelected,
-            'mx_RoomTile2_minimized': this.props.isMinimized,
+            'mx_RoomTile_minimized': this.props.isMinimized,
         });
 
         const badge = (
@@ -77,12 +77,12 @@ export default class TemporaryTile extends React.Component<IProps, IState> {
         name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
 
         const nameClasses = classNames({
-            "mx_RoomTile2_name": true,
+            "mx_RoomTile_name": true,
-            "mx_RoomTile2_nameHasUnreadEvents": this.props.notificationState.isUnread,
+            "mx_RoomTile_nameHasUnreadEvents": this.props.notificationState.isUnread,
         });
 
         let nameContainer = (
-            <div className="mx_RoomTile2_nameContainer">
+            <div className="mx_RoomTile_nameContainer">
                 <div title={name} className={nameClasses} tabIndex={-1} dir="auto">
                     {name}
                 </div>
@@ -105,11 +105,11 @@ export default class TemporaryTile extends React.Component<IProps, IState> {
                     role="treeitem"
                     title={this.props.isMinimized ? name : undefined}
                 >
-                    <div className="mx_RoomTile2_avatarContainer">
+                    <div className="mx_RoomTile_avatarContainer">
                         {this.props.avatar}
                     </div>
                     {nameContainer}
-                    <div className="mx_RoomTile2_badgeContainer">
+                    <div className="mx_RoomTile_badgeContainer">
                         {badge}
                     </div>
                 </Button>

test/components/views/rooms/RoomList-test.js

@@ -132,7 +132,7 @@ describe('RoomList', () => {
 
     function expectRoomInSubList(room, subListTest) {
         const RoomSubList = sdk.getComponent('views.rooms.RoomSublist2');
-        const RoomTile = sdk.getComponent('views.rooms.RoomTile2');
+        const RoomTile = sdk.getComponent('views.rooms.RoomTile');
 
         const subLists = ReactTestUtils.scryRenderedComponentsWithType(root, RoomSubList);
         const containingSubList = subLists.find(subListTest);

test/end-to-end-tests/src/usecases/accept-invite.js

@@ -20,7 +20,7 @@ const {findSublist} = require("./create-room");
 module.exports = async function acceptInvite(session, name) {
     session.log.step(`accepts "${name}" invite`);
     const inviteSublist = await findSublist(session, "invites");
-    const invitesHandles = await inviteSublist.$$(".mx_RoomTile2_name");
+    const invitesHandles = await inviteSublist.$$(".mx_RoomTile_name");
     const invitesWithText = await Promise.all(invitesHandles.map(async (inviteHandle) => {
         const text = await session.innerText(inviteHandle);
         return {inviteHandle, text};