Add feature flag 'feature_new_room_decoration_ui' and segrate legacy …

…UI component (#11345)

* Move RoomHeader to LegacyRoomHeader

* Create new RoomHeader component

cypress/e2e/create-room/create-room.spec.ts

@@ -59,7 +59,7 @@ describe("Create Room", () => {
 
         cy.url().should("contain", "/#/room/#test-room-1:localhost");
 
-        cy.get(".mx_RoomHeader").within(() => {
+        cy.get(".mx_LegacyRoomHeader").within(() => {
             cy.findByText(name);
             cy.findByText(topic);
         });

cypress/e2e/invite/invite-dialog.spec.ts

@@ -166,8 +166,8 @@ describe("Invite dialog", function () {
 
         // Assert that the hovered user name on invitation UI does not have background color
         // TODO: implement the test on room-header.spec.ts
-        cy.get(".mx_RoomHeader").within(() => {
-            cy.get(".mx_RoomHeader_name--textonly")
+        cy.get(".mx_LegacyRoomHeader").within(() => {
+            cy.get(".mx_LegacyRoomHeader_name--textonly")
                 .realHover()
                 .should("have.css", "background-color", "rgba(0, 0, 0, 0)");
         });

cypress/e2e/lazy-loading/lazy-loading.spec.ts

@@ -116,7 +116,7 @@ describe("Lazy Loading", () => {
     }
 
     function openMemberlist(): void {
-        cy.get(".mx_RoomHeader").within(() => {
+        cy.get(".mx_LegacyRoomHeader").within(() => {
             cy.findByRole("button", { name: "Room info" }).click();
         });
 

cypress/e2e/one-to-one-chat/one-to-one-chat.spec.ts

@@ -45,7 +45,7 @@ describe("1:1 chat room", () => {
 
     it("should open new 1:1 chat room after leaving the old one", () => {
         // leave 1:1 chat room
-        cy.get(".mx_RoomHeader_nametext").within(() => {
+        cy.get(".mx_LegacyRoomHeader_nametext").within(() => {
             cy.findByText(username).click();
         });
         cy.findByRole("menuitem", { name: "Leave" }).click();
@@ -60,7 +60,7 @@ describe("1:1 chat room", () => {
 
         // open new 1:1 chat room
         cy.visit(`/#/user/${user2.userId}?action=chat`);
-        cy.get(".mx_RoomHeader_nametext").within(() => {
+        cy.get(".mx_LegacyRoomHeader_nametext").within(() => {
             cy.findByText(username);
         });
     });

cypress/e2e/room/room-header.spec.ts

@@ -38,8 +38,8 @@ describe("Room Header", () => {
     it("should render default buttons properly", () => {
         cy.createRoom({ name: "Test Room" }).viewRoomByName("Test Room");
 
-        cy.get(".mx_RoomHeader").within(() => {
-            // Names (aria-label) of every button rendered on mx_RoomHeader by default
+        cy.get(".mx_LegacyRoomHeader").within(() => {
+            // Names (aria-label) of every button rendered on mx_LegacyRoomHeader by default
             const expectedButtonNames = [
                 "Room options", // The room name button next to the room avatar, which renders dropdown menu on click
                 "Voice call",
@@ -55,11 +55,11 @@ describe("Room Header", () => {
                 cy.findByRole("button", { name }).should("be.visible");
             }
 
-            // Assert that just those seven buttons exist on mx_RoomHeader by default
+            // Assert that just those seven buttons exist on mx_LegacyRoomHeader by default
             cy.findAllByRole("button").should("have.length", 7);
         });
 
-        cy.get(".mx_RoomHeader").percySnapshotElement("Room header");
+        cy.get(".mx_LegacyRoomHeader").percySnapshotElement("Room header");
     });
 
     it("should render the pin button for pinned messages card", () => {
@@ -73,7 +73,7 @@ describe("Room Header", () => {
 
         cy.findByRole("menuitem", { name: "Pin" }).should("be.visible").click();
 
-        cy.get(".mx_RoomHeader").within(() => {
+        cy.get(".mx_LegacyRoomHeader").within(() => {
             cy.findByRole("button", { name: "Pinned messages" }).should("be.visible");
         });
     });
@@ -88,30 +88,30 @@ describe("Room Header", () => {
 
         cy.createRoom({ name: LONG_ROOM_NAME }).viewRoomByName(LONG_ROOM_NAME);
 
-        cy.get(".mx_RoomHeader").within(() => {
+        cy.get(".mx_LegacyRoomHeader").within(() => {
             // Wait until the room name is set
-            cy.get(".mx_RoomHeader_nametext").within(() => {
+            cy.get(".mx_LegacyRoomHeader_nametext").within(() => {
                 cy.findByText(LONG_ROOM_NAME).should("exist");
             });
 
             // Assert the size of buttons on RoomHeader are specified and the buttons are not compressed
-            // Note these assertions do not check the size of mx_RoomHeader_name button
-            cy.get(".mx_RoomHeader_button")
+            // Note these assertions do not check the size of mx_LegacyRoomHeader_name button
+            cy.get(".mx_LegacyRoomHeader_button")
                 .should("have.length", 6)
                 .should("be.visible")
                 .should("have.css", "height", "32px")
                 .should("have.css", "width", "32px");
         });
 
-        cy.get(".mx_RoomHeader").percySnapshotElement("Room header - with a long room name", {
+        cy.get(".mx_LegacyRoomHeader").percySnapshotElement("Room header - with a long room name", {
             widths: [300, 600], // Magic numbers to emulate the narrow RoomHeader on the actual UI
         });
     });
 
     it("should have buttons highlighted by being clicked", () => {
         cy.createRoom({ name: "Test Room" }).viewRoomByName("Test Room");
 
-        cy.get(".mx_RoomHeader").within(() => {
+        cy.get(".mx_LegacyRoomHeader").within(() => {
             // Check these buttons
             const buttonsHighlighted = ["Threads", "Notifications", "Room info"];
 
@@ -120,7 +120,7 @@ describe("Room Header", () => {
             }
         });
 
-        cy.get(".mx_RoomHeader").percySnapshotElement("Room header - with a highlighted button");
+        cy.get(".mx_LegacyRoomHeader").percySnapshotElement("Room header - with a highlighted button");
     });
 
     describe("with a video room", () => {
@@ -144,7 +144,7 @@ describe("Room Header", () => {
         it("should render buttons for room options, beta pill, invite, chat, and room info", () => {
             createVideoRoom();
 
-            cy.get(".mx_RoomHeader").within(() => {
+            cy.get(".mx_LegacyRoomHeader").within(() => {
                 // Names (aria-label) of the buttons on the video room header
                 const expectedButtonNames = [
                     "Room options",
@@ -163,13 +163,13 @@ describe("Room Header", () => {
                 cy.findAllByRole("button").should("have.length", 7);
             });
 
-            cy.get(".mx_RoomHeader").percySnapshotElement("Room header - with a video room");
+            cy.get(".mx_LegacyRoomHeader").percySnapshotElement("Room header - with a video room");
         });
 
         it("should render a working chat button which opens the timeline on a right panel", () => {
             createVideoRoom();
 
-            cy.get(".mx_RoomHeader").findByRole("button", { name: "Chat" }).click();
+            cy.get(".mx_LegacyRoomHeader").findByRole("button", { name: "Chat" }).click();
 
             // Assert that the video is rendered
             cy.get(".mx_CallView video").should("exist");
@@ -250,20 +250,20 @@ describe("Room Header", () => {
             // Assert that AppsDrawer is rendered
             cy.get(".mx_AppsDrawer").should("exist");
 
-            cy.get(".mx_RoomHeader").within(() => {
+            cy.get(".mx_LegacyRoomHeader").within(() => {
                 // Assert that "Hide Widgets" button is rendered and aria-checked is set to true
                 cy.findByRole("button", { name: "Hide Widgets" })
                     .should("exist")
                     .should("have.attr", "aria-checked", "true");
             });
 
-            cy.get(".mx_RoomHeader").percySnapshotElement("Room header - with apps button (highlighted)");
+            cy.get(".mx_LegacyRoomHeader").percySnapshotElement("Room header - with apps button (highlighted)");
         });
 
         it("should support hiding a widget", () => {
             cy.get(".mx_AppsDrawer").should("exist");
 
-            cy.get(".mx_RoomHeader").within(() => {
+            cy.get(".mx_LegacyRoomHeader").within(() => {
                 // Click the apps button to hide AppsDrawer
                 cy.findByRole("button", { name: "Hide Widgets" }).should("exist").click();
 
@@ -276,7 +276,7 @@ describe("Room Header", () => {
             // Assert that AppsDrawer is not rendered
             cy.get(".mx_AppsDrawer").should("not.exist");
 
-            cy.get(".mx_RoomHeader").percySnapshotElement("Room header - with apps button (not highlighted)");
+            cy.get(".mx_LegacyRoomHeader").percySnapshotElement("Room header - with apps button (not highlighted)");
         });
     });
 });

cypress/e2e/spotlight/spotlight.spec.ts

@@ -114,7 +114,7 @@ Cypress.Commands.add(
 Cypress.Commands.add(
     "roomHeaderName",
     (options?: Partial<Loggable & Timeoutable & Withinable & Shadow>): Chainable<JQuery<HTMLElement>> => {
-        return cy.get(".mx_RoomHeader_nametext", options);
+        return cy.get(".mx_LegacyRoomHeader_nametext", options);
     },
 );
 
@@ -204,7 +204,7 @@ describe("Spotlight", () => {
                 });
         });
         // wait for the room to have the right name
-        cy.get(".mx_RoomHeader").within(() => {
+        cy.get(".mx_LegacyRoomHeader").within(() => {
             cy.findByText(room1Name);
         });
     });

cypress/e2e/threads/threads.spec.ts

@@ -279,7 +279,7 @@ describe("Threads", () => {
         });
 
         cy.findByRole("button", { name: "Threads" })
-            .should("have.class", "mx_RoomHeader_button--unread") // User asserts thread list unread indicator
+            .should("have.class", "mx_LegacyRoomHeader_button--unread") // User asserts thread list unread indicator
             .click(); // User opens thread list
 
         // User asserts thread with correct root & latest events & unread dot

cypress/e2e/timeline/timeline.spec.ts

@@ -755,7 +755,7 @@ describe("Timeline", () => {
                 sendEvent(roomId, true);
                 cy.visit("/#/room/" + roomId);
 
-                cy.get(".mx_RoomHeader").findByRole("button", { name: "Search" }).click();
+                cy.get(".mx_LegacyRoomHeader").findByRole("button", { name: "Search" }).click();
 
                 cy.get(".mx_SearchBar").percySnapshotElement("Search bar on the timeline", {
                     // Emulate narrow timeline
@@ -791,7 +791,7 @@ describe("Timeline", () => {
                     .should("have.class", "mx_TextualEvent");
 
                 // Display the room search bar
-                cy.get(".mx_RoomHeader").findByRole("button", { name: "Search" }).click();
+                cy.get(".mx_LegacyRoomHeader").findByRole("button", { name: "Search" }).click();
 
                 // Search the string to display both the message and TextualEvent on search results panel
                 cy.get(".mx_SearchBar").within(() => {

res/css/_components.pcss

@@ -275,6 +275,7 @@
 @import "./views/rooms/_HistoryTile.pcss";
 @import "./views/rooms/_IRCLayout.pcss";
 @import "./views/rooms/_JumpToBottomButton.pcss";
+@import "./views/rooms/_LegacyRoomHeader.pcss";
 @import "./views/rooms/_LinkPreviewGroup.pcss";
 @import "./views/rooms/_LinkPreviewWidget.pcss";
 @import "./views/rooms/_LiveContentSummary.pcss";

res/css/structures/_MainSplit.pcss

@@ -27,7 +27,7 @@ limitations under the License.
     /* The resizer should be centered: only half of the gap-width is handled by the right panel. */
     /* The other half by the RoomView. */
     padding-left: calc(var(--container-gap-width) / 2);
-    height: calc(100vh - 51px); /* height of .mx_RoomHeader.light-panel */
+    height: calc(100vh - 51px); /* height of .mx_LegacyRoomHeader.light-panel */
 
     &:hover .mx_ResizeHandle--horizontal::before {
         position: absolute;

res/css/structures/_RoomView.pcss

@@ -190,7 +190,7 @@ limitations under the License.
 }
 
 /* Rooms with immersive content */
-.mx_RoomView_immersive .mx_RoomHeader_wrapper {
+.mx_RoomView_immersive .mx_LegacyRoomHeader_wrapper {
     border: unset;
 }