Fix: Right panel keeps showing chat when unmaximizing widget. (#11697)

* Right panel chat closes when unmaximising widget

* Basic right panel tests added

* Accessible selectors used for new tests

* Test added to check if chat exists in right panel

---------

Co-authored-by: Manan Sadana <manan.sadana@cnhteam.onmicrosoft.com>
Co-authored-by: Florian Duros <florianduros@element.io>

Author: 3 people

cypress/e2e/widgets/layout.spec.ts

@@ -129,4 +129,20 @@ describe("Widget Layout", () => {
 
         cy.get('iframe[title="widget"]').invoke("height").should("be.greaterThan", 400);
     });
+    it("open right panel with chat when maximizing widget", () => {
+        cy.get('iframe[title="widget"]').invoke("height").should("be.lessThan", 250);
+        cy.findByRole("button", { name: "Maximise" }).click();
+        cy.get(".mx_RightPanel").within(() => {
+            cy.get(".mx_BaseCard_header").should("contain", "Chat");
+        });
+    });
+    it("close right panel with chat when unmaximizing widget", () => {
+        cy.get('iframe[title="widget"]').invoke("height").should("be.lessThan", 250);
+        cy.findByRole("button", { name: "Maximise" }).click();
+        cy.get(".mx_RightPanel").within(() => {
+            cy.get(".mx_BaseCard_header").should("contain", "Chat");
+        });
+        cy.findByRole("button", { name: "Un-maximise" }).click();
+        cy.get(".mx_RightPanel").should("not.exist");
+    });
 });

src/components/structures/RoomView.tsx

@@ -539,6 +539,9 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         if (this.context.widgetLayoutStore.hasMaximisedWidget(this.state.room)) {
             // Show chat in right panel when a widget is maximised
             this.context.rightPanelStore.setCard({ phase: RightPanelPhases.Timeline });
+        } else {
+            // Close the chat in right panel when the widget is unmaximised
+            this.context.rightPanelStore.togglePanel(null);
         }
         this.checkWidgets(this.state.room);
     };