From b4b146f55124fb2e095d268fbdf4afdfd2dec77a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 25 Jul 2022 13:46:19 +0200 Subject: [PATCH] Show a back button when viewing a space member (#9095) --- cypress/e2e/6-spaces/spaces.spec.ts | 12 +- cypress/e2e/right-panel/right-panel.spec.ts | 139 ++++++++++++++++++++ cypress/support/views.ts | 33 +++++ src/components/structures/SpaceRoomView.tsx | 13 +- 4 files changed, 187 insertions(+), 10 deletions(-) create mode 100644 cypress/e2e/right-panel/right-panel.spec.ts diff --git a/cypress/e2e/6-spaces/spaces.spec.ts b/cypress/e2e/6-spaces/spaces.spec.ts index 8adfb34c51c..029a123737d 100644 --- a/cypress/e2e/6-spaces/spaces.spec.ts +++ b/cypress/e2e/6-spaces/spaces.spec.ts @@ -27,12 +27,8 @@ function openSpaceCreateMenu(): Chainable { return cy.get(".mx_SpaceCreateMenu_wrapper .mx_ContextualMenu"); } -function getSpacePanelButton(spaceName: string): Chainable { - return cy.get(`.mx_SpaceButton[aria-label="${spaceName}"]`); -} - function openSpaceContextMenu(spaceName: string): Chainable { - 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"); diff --git a/cypress/e2e/right-panel/right-panel.spec.ts b/cypress/e2e/right-panel/right-panel.spec.ts new file mode 100644 index 00000000000..604fa0049d6 --- /dev/null +++ b/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. +*/ + +/// + +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> => { + return cy.get(`.mx_EntityTile, [title="${name}"]`); +}; + +const goBack = (): Chainable> => { + return cy.get(".mx_BaseCard_back").click(); +}; + +const viewRoomSummaryByName = (name: string): Chainable> => { + cy.viewRoomByName(name); + cy.get(".mx_RightPanel_roomSummaryButton").click(); + return checkRoomSummaryCard(name); +}; + +const checkRoomSummaryCard = (name: string): Chainable> => { + 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); + }); + }); +}); diff --git a/cypress/support/views.ts b/cypress/support/views.ts index c7f55b4ac9c..6b853e47221 100644 --- a/cypress/support/views.ts +++ b/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>; + + /** + * 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>; + + /** + * 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>; + + /** + * 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>; } } } @@ -36,5 +57,17 @@ Cypress.Commands.add("viewRoomByName", (name: string): Chainable> => { + return cy.get(`.mx_SpaceButton[aria-label="${name}"]`); +}); + +Cypress.Commands.add("viewSpaceByName", (name: string): Chainable> => { + return cy.getSpacePanelButton(name).click(); +}); + +Cypress.Commands.add("viewSpaceHomeByName", (name: string): Chainable> => { + return cy.getSpacePanelButton(name).dblclick(); +}); + // Needed to make this file a module export { }; diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx index 6ccfe4dd5dd..a1ee2d5094b 100644 --- a/src/components/structures/SpaceRoomView.tsx +++ b/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 { 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,