Show a back button when viewing a space member (#9095)

cypress/e2e/6-spaces/spaces.spec.ts

@@ -27,12 +27,8 @@ function openSpaceCreateMenu(): Chainable<JQuery> {
     return cy.get(".mx_SpaceCreateMenu_wrapper .mx_ContextualMenu");
 }
 
-function getSpacePanelButton(spaceName: string): Chainable<JQuery> {
-    return cy.get(`.mx_SpaceButton[aria-label="${spaceName}"]`);
-}
-
 function openSpaceContextMenu(spaceName: string): Chainable<JQuery> {
-    getSpacePanelButton(spaceName).rightclick();
+    cy.getSpacePanelButton(spaceName).rightclick();
     return cy.get(".mx_SpacePanel_contextMenu");
 }
 
@@ -200,14 +196,14 @@ describe("Spaces", () => {
         cy.createSpace({
             name: "My Space",
         });
-        getSpacePanelButton("My Space").should("exist");
+        cy.getSpacePanelButton("My Space").should("exist");
 
         cy.getBot(synapse, { displayName: "BotBob" }).then({ timeout: 10000 }, async bot => {
             const { room_id: roomId } = await bot.createRoom(spaceCreateOptions("Space Space"));
             await bot.invite(roomId, user.userId);
         });
         // Assert that `Space Space` is above `My Space` due to it being an invite
-        getSpacePanelButton("Space Space").should("exist")
+        cy.getSpacePanelButton("Space Space").should("exist")
             .parent().next().find('.mx_SpaceButton[aria-label="My Space"]').should("exist");
     });
 
@@ -234,7 +230,7 @@ describe("Spaces", () => {
         });
 
         cy.get("@spaceId").then(() => {
-            getSpacePanelButton(spaceName).dblclick(); // Open space home
+            cy.viewSpaceHomeByName(spaceName);
         });
         cy.get(".mx_SpaceRoomView .mx_SpaceHierarchy_list").within(() => {
             cy.get(".mx_SpaceHierarchy_roomTile").contains("Music").should("exist");

cypress/e2e/right-panel/right-panel.spec.ts

@@ -0,0 +1,139 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/// <reference types="cypress" />
+
+import { SynapseInstance } from "../../plugins/synapsedocker";
+import Chainable = Cypress.Chainable;
+
+const ROOM_NAME = "Test room";
+const SPACE_NAME = "Test space";
+const NAME = "Alice";
+
+const getMemberTileByName = (name: string): Chainable<JQuery<HTMLElement>> => {
+    return cy.get(`.mx_EntityTile, [title="${name}"]`);
+};
+
+const goBack = (): Chainable<JQuery<HTMLElement>> => {
+    return cy.get(".mx_BaseCard_back").click();
+};
+
+const viewRoomSummaryByName = (name: string): Chainable<JQuery<HTMLElement>> => {
+    cy.viewRoomByName(name);
+    cy.get(".mx_RightPanel_roomSummaryButton").click();
+    return checkRoomSummaryCard(name);
+};
+
+const checkRoomSummaryCard = (name: string): Chainable<JQuery<HTMLElement>> => {
+    cy.get(".mx_RoomSummaryCard").should("have.length", 1);
+    return cy.get(".mx_BaseCard_header").should("contain", name);
+};
+
+describe("RightPanel", () => {
+    let synapse: SynapseInstance;
+
+    beforeEach(() => {
+        cy.startSynapse("default").then(data => {
+            synapse = data;
+            cy.initTestUser(synapse, NAME).then(() =>
+                cy.window({ log: false }).then(() => {
+                    cy.createRoom({ name: ROOM_NAME });
+                    cy.createSpace({ name: SPACE_NAME });
+                }),
+            );
+        });
+    });
+
+    afterEach(() => {
+        cy.stopSynapse(synapse);
+    });
+
+    describe("in rooms", () => {
+        it("should handle clicking add widgets", () => {
+            viewRoomSummaryByName(ROOM_NAME);
+
+            cy.get(".mx_RoomSummaryCard_appsGroup .mx_AccessibleButton").click();
+            cy.get(".mx_IntegrationManager").should("have.length", 1);
+        });
+
+        it("should handle viewing export chat", () => {
+            viewRoomSummaryByName(ROOM_NAME);
+
+            cy.get(".mx_RoomSummaryCard_icon_export").click();
+            cy.get(".mx_ExportDialog").should("have.length", 1);
+        });
+
+        it("should handle viewing share room", () => {
+            viewRoomSummaryByName(ROOM_NAME);
+
+            cy.get(".mx_RoomSummaryCard_icon_share").click();
+            cy.get(".mx_ShareDialog").should("have.length", 1);
+        });
+
+        it("should handle viewing room settings", () => {
+            viewRoomSummaryByName(ROOM_NAME);
+
+            cy.get(".mx_RoomSummaryCard_icon_settings").click();
+            cy.get(".mx_RoomSettingsDialog").should("have.length", 1);
+            cy.get(".mx_Dialog_title").should("contain", ROOM_NAME);
+        });
+
+        it("should handle viewing files", () => {
+            viewRoomSummaryByName(ROOM_NAME);
+
+            cy.get(".mx_RoomSummaryCard_icon_files").click();
+            cy.get(".mx_FilePanel").should("have.length", 1);
+            cy.get(".mx_FilePanel_empty").should("have.length", 1);
+
+            goBack();
+            checkRoomSummaryCard(ROOM_NAME);
+        });
+
+        it("should handle viewing room member", () => {
+            viewRoomSummaryByName(ROOM_NAME);
+
+            cy.get(".mx_RoomSummaryCard_icon_people").click();
+            cy.get(".mx_MemberList").should("have.length", 1);
+
+            getMemberTileByName(NAME).click();
+            cy.get(".mx_UserInfo").should("have.length", 1);
+            cy.get(".mx_UserInfo_profile").should("contain", NAME);
+
+            goBack();
+            cy.get(".mx_MemberList").should("have.length", 1);
+
+            goBack();
+            checkRoomSummaryCard(ROOM_NAME);
+        });
+    });
+
+    describe("in spaces", () => {
+        it("should handle viewing space member", () => {
+            cy.viewSpaceHomeByName(SPACE_NAME);
+            cy.get(".mx_RoomInfoLine_members").click();
+            cy.get(".mx_MemberList").should("have.length", 1);
+            cy.get(".mx_RightPanel_scopeHeader").should("contain", SPACE_NAME);
+
+            getMemberTileByName(NAME).click();
+            cy.get(".mx_UserInfo").should("have.length", 1);
+            cy.get(".mx_UserInfo_profile").should("contain", NAME);
+            cy.get(".mx_RightPanel_scopeHeader").should("contain", SPACE_NAME);
+
+            goBack();
+            cy.get(".mx_MemberList").should("have.length", 1);
+        });
+    });
+});

cypress/support/views.ts

@@ -28,6 +28,27 @@ declare global {
              * @param name The room name to find and click on/open.
              */
             viewRoomByName(name: string): Chainable<JQuery<HTMLElement>>;
+
+            /**
+             * Returns the space panel space button based on a name. The space
+             * must be visible in the space panel
+             * @param name The space name to find
+             */
+            getSpacePanelButton(name: string): Chainable<JQuery<HTMLElement>>;
+
+            /**
+             * Opens the given space home by name. The space must be visible in
+             * the space list.
+             * @param name The space name to find and click on/open.
+             */
+            viewSpaceHomeByName(name: string): Chainable<JQuery<HTMLElement>>;
+
+            /**
+             * Opens the given space by name. The space must be visible in the
+             * space list.
+             * @param name The space name to find and click on/open.
+             */
+            viewSpaceByName(name: string): Chainable<JQuery<HTMLElement>>;
         }
     }
 }
@@ -36,5 +57,17 @@ Cypress.Commands.add("viewRoomByName", (name: string): Chainable<JQuery<HTMLElem
     return cy.get(`.mx_RoomTile[aria-label="${name}"]`).click();
 });
 
+Cypress.Commands.add("getSpacePanelButton", (name: string): Chainable<JQuery<HTMLElement>> => {
+    return cy.get(`.mx_SpaceButton[aria-label="${name}"]`);
+});
+
+Cypress.Commands.add("viewSpaceByName", (name: string): Chainable<JQuery<HTMLElement>> => {
+    return cy.getSpacePanelButton(name).click();
+});
+
+Cypress.Commands.add("viewSpaceHomeByName", (name: string): Chainable<JQuery<HTMLElement>> => {
+    return cy.getSpacePanelButton(name).dblclick();
+});
+
 // Needed to make this file a module
 export { };

src/components/structures/SpaceRoomView.tsx

@@ -38,6 +38,7 @@ import { inviteMultipleToRoom, showRoomInviteDialog } from "../../RoomInvite";
 import { UIComponent } from "../../settings/UIFeature";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import RightPanelStore from "../../stores/right-panel/RightPanelStore";
+import { IRightPanelCard } from "../../stores/right-panel/RightPanelStoreIPanelState";
 import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import {
@@ -617,10 +618,18 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
         if (payload.action !== Action.ViewUser && payload.action !== "view_3pid_invite") return;
 
         if (payload.action === Action.ViewUser && payload.member) {
-            RightPanelStore.instance.setCard({
+            const spaceMemberInfoCard: IRightPanelCard = {
                 phase: RightPanelPhases.SpaceMemberInfo,
                 state: { spaceId: this.props.space.roomId, member: payload.member },
-            });
+            };
+            if (payload.push) {
+                RightPanelStore.instance.pushCard(spaceMemberInfoCard);
+            } else {
+                RightPanelStore.instance.setCards([
+                    { phase: RightPanelPhases.SpaceMemberList, state: { spaceId: this.props.space.roomId } },
+                    spaceMemberInfoCard,
+                ]);
+            }
         } else if (payload.action === "view_3pid_invite" && payload.event) {
             RightPanelStore.instance.setCard({
                 phase: RightPanelPhases.Space3pidMemberInfo,