refactor: rename RoomListView as RoomListPanel (#29361)

playwright/e2e/left-panel/room-list-view/room-list-view.spec.ts → playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts

@@ -9,7 +9,7 @@ import { type Page } from "@playwright/test";
 
 import { test, expect } from "../../../element-web-test";
 
-test.describe("Search section of the room list", () => {
+test.describe("Room list panel", () => {
     test.use({
         labsFlags: ["feature_new_room_list"],
     });
@@ -19,16 +19,16 @@ test.describe("Search section of the room list", () => {
      * @param page
      */
     function getRoomListView(page: Page) {
-        return page.getByTestId("room-list-view");
+        return page.getByTestId("room-list-panel");
     }
 
     test.beforeEach(async ({ page, app, user }) => {
         // The notification toast is displayed above the search section
         await app.closeNotificationToast();
     });
 
-    test("should render the room list view", { tag: "@screenshot" }, async ({ page, app, user }) => {
+    test("should render the room list panel", { tag: "@screenshot" }, async ({ page, app, user }) => {
         const roomListView = getRoomListView(page);
-        await expect(roomListView).toMatchScreenshot("room-list-view.png");
+        await expect(roomListView).toMatchScreenshot("room-list-panel.png");
     });
 });

res/css/_components.pcss

@@ -269,9 +269,9 @@
 @import "./views/right_panel/_VerificationPanel.pcss";
 @import "./views/right_panel/_WidgetCard.pcss";
 @import "./views/room_settings/_AliasSettings.pcss";
-@import "./views/rooms/RoomListView/_RoomListHeaderView.pcss";
-@import "./views/rooms/RoomListView/_RoomListSearch.pcss";
-@import "./views/rooms/RoomListView/_RoomListView.pcss";
+@import "./views/rooms/RoomListPanel/_RoomListHeaderView.pcss";
+@import "./views/rooms/RoomListPanel/_RoomListPanel.pcss";
+@import "./views/rooms/RoomListPanel/_RoomListSearch.pcss";
 @import "./views/rooms/_AppsDrawer.pcss";
 @import "./views/rooms/_Autocomplete.pcss";
 @import "./views/rooms/_AuxPanel.pcss";

res/css/views/rooms/RoomListView/_RoomListView.pcss → res/css/views/rooms/RoomListPanel/_RoomListPanel.pcss

@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-.mx_RoomListView {
+.mx_RoomListPanel {
     background-color: var(--cpd-color-bg-canvas-default);
     height: 100%;
     border-right: 1px solid var(--cpd-color-bg-subtle-primary);

src/components/structures/LeftPanel.tsx

@@ -37,7 +37,7 @@ import PosthogTrackers from "../../PosthogTrackers";
 import type PageType from "../../PageTypes";
 import { Landmark, LandmarkNavigation } from "../../accessibility/LandmarkNavigation";
 import SettingsStore from "../../settings/SettingsStore";
-import { RoomListView } from "../views/rooms/RoomListView";
+import { RoomListPanel } from "../views/rooms/RoomListPanel";
 
 interface IProps {
     isMinimized: boolean;
@@ -390,7 +390,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
             return (
                 <div className={containerClasses}>
                     <div className="mx_LeftPanel_roomListContainer">
-                        <RoomListView activeSpace={this.state.activeSpace} />
+                        <RoomListPanel activeSpace={this.state.activeSpace} />
                     </div>
                 </div>
             );

src/components/views/rooms/RoomListView/RoomListView.tsx → src/components/views/rooms/RoomListPanel/RoomListPanel.tsx

@@ -12,7 +12,7 @@ import { UIComponent } from "../../../../settings/UIFeature";
 import { RoomListSearch } from "./RoomListSearch";
 import { RoomListHeaderView } from "./RoomListHeaderView";
 
-type RoomListViewProps = {
+type RoomListPanelProps = {
     /**
      * Current active space
      * See {@link RoomListSearch}
@@ -21,13 +21,13 @@ type RoomListViewProps = {
 };
 
 /**
- * A view component for the room list.
+ * The panel of the room list
  */
-export const RoomListView: React.FC<RoomListViewProps> = ({ activeSpace }) => {
+export const RoomListPanel: React.FC<RoomListPanelProps> = ({ activeSpace }) => {
     const displayRoomSearch = shouldShowComponent(UIComponent.FilterContainer);
 
     return (
-        <section className="mx_RoomListView" data-testid="room-list-view">
+        <section className="mx_RoomListPanel" data-testid="room-list-panel">
             {displayRoomSearch && <RoomListSearch activeSpace={activeSpace} />}
             <RoomListHeaderView />
         </section>

src/components/views/rooms/RoomListView/index.ts → src/components/views/rooms/RoomListPanel/index.ts

@@ -5,4 +5,4 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-export { RoomListView } from "./RoomListView";
+export { RoomListPanel } from "./RoomListPanel";

test/unit-tests/components/views/rooms/RoomListView/RoomListHeaderView-test.tsx → test/unit-tests/components/views/rooms/RoomListPanel/RoomListHeaderView-test.tsx

@@ -14,7 +14,7 @@ import {
     type RoomListHeaderViewState,
     useRoomListHeaderViewModel,
 } from "../../../../../../src/components/viewmodels/roomlist/RoomListHeaderViewModel";
-import { RoomListHeaderView } from "../../../../../../src/components/views/rooms/RoomListView/RoomListHeaderView";
+import { RoomListHeaderView } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomListHeaderView";
 
 jest.mock("../../../../../../src/components/viewmodels/roomlist/RoomListHeaderViewModel", () => ({
     useRoomListHeaderViewModel: jest.fn(),

test/unit-tests/components/views/rooms/RoomListView/RoomListView-test.tsx → test/unit-tests/components/views/rooms/RoomListPanel/RoomListPanel-test.tsx

@@ -9,17 +9,17 @@ import React from "react";
 import { render, screen } from "jest-matrix-react";
 import { mocked } from "jest-mock";
 
-import { RoomListView } from "../../../../../../src/components/views/rooms/RoomListView";
+import { RoomListPanel } from "../../../../../../src/components/views/rooms/RoomListPanel";
 import { shouldShowComponent } from "../../../../../../src/customisations/helpers/UIComponents";
 import { MetaSpace } from "../../../../../../src/stores/spaces";
 
 jest.mock("../../../../../../src/customisations/helpers/UIComponents", () => ({
     shouldShowComponent: jest.fn(),
 }));
 
-describe("<RoomListView />", () => {
+describe("<RoomListPanel />", () => {
     function renderComponent() {
-        return render(<RoomListView activeSpace={MetaSpace.Home} />);
+        return render(<RoomListPanel activeSpace={MetaSpace.Home} />);
     }
 
     beforeEach(() => {

test/unit-tests/components/views/rooms/RoomListView/RoomListSearch-test.tsx → test/unit-tests/components/views/rooms/RoomListPanel/RoomListSearch-test.tsx

@@ -10,7 +10,7 @@ import { render, screen } from "jest-matrix-react";
 import { mocked } from "jest-mock";
 import userEvent from "@testing-library/user-event";
 
-import { RoomListSearch } from "../../../../../../src/components/views/rooms/RoomListView/RoomListSearch";
+import { RoomListSearch } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomListSearch";
 import { MetaSpace } from "../../../../../../src/stores/spaces";
 import { shouldShowComponent } from "../../../../../../src/customisations/helpers/UIComponents";
 import defaultDispatcher from "../../../../../../src/dispatcher/dispatcher";

test/unit-tests/components/views/rooms/RoomListView/__snapshots__/RoomListView-test.tsx.snap → test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPanel-test.tsx.snap

@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<RoomListView /> should not render the RoomListSearch component when UIComponent.FilterContainer is at false 1`] = `
+exports[`<RoomListPanel /> should not render the RoomListSearch component when UIComponent.FilterContainer is at false 1`] = `
 <DocumentFragment>
   <section
-    class="mx_RoomListView"
-    data-testid="room-list-view"
+    class="mx_RoomListPanel"
+    data-testid="room-list-panel"
   >
     <header
       aria-label="Room options"
@@ -25,11 +25,11 @@ exports[`<RoomListView /> should not render the RoomListSearch component when UI
 </DocumentFragment>
 `;
 
-exports[`<RoomListView /> should render the RoomListSearch component when UIComponent.FilterContainer is at true 1`] = `
+exports[`<RoomListPanel /> should render the RoomListSearch component when UIComponent.FilterContainer is at true 1`] = `
 <DocumentFragment>
   <section
-    class="mx_RoomListView"
-    data-testid="room-list-view"
+    class="mx_RoomListPanel"
+    data-testid="room-list-panel"
   >
     <div
       class="mx_Flex mx_RoomListSearch"