Remove SpaceScopeHeader (#12785)

* Remove SpaceScopeHeader

It is no longer necessary as we no longer offer the ability to open the member list for a space from any random room.

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove stale test

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

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

@@ -138,12 +138,10 @@ test.describe("RightPanel", () => {
                 .getByRole("button", { name: /\d member/ })
                 .click();
             await expect(page.locator(".mx_MemberList")).toBeVisible();
-            await expect(page.locator(".mx_SpaceScopeHeader").getByText(SPACE_NAME)).toBeVisible();
 
             await getMemberTileByName(page, NAME).click();
             await expect(page.locator(".mx_UserInfo")).toBeVisible();
             await expect(page.locator(".mx_UserInfo_profile").getByText(NAME)).toBeVisible();
-            await expect(page.locator(".mx_SpaceScopeHeader").getByText(SPACE_NAME)).toBeVisible();
 
             await page.getByTestId("base-card-back-button").click();
             await expect(page.locator(".mx_MemberList")).toBeVisible();

res/css/_components.pcss

@@ -312,7 +312,6 @@
 @import "./views/rooms/_RoomTile.pcss";
 @import "./views/rooms/_RoomUpgradeWarningBar.pcss";
 @import "./views/rooms/_SendMessageComposer.pcss";
-@import "./views/rooms/_SpaceScopeHeader.pcss";
 @import "./views/rooms/_Stickers.pcss";
 @import "./views/rooms/_ThirdPartyMemberInfo.pcss";
 @import "./views/rooms/_ThreadSummary.pcss";

res/css/views/rooms/_SpaceScopeHeader.pcss

@@ -1,29 +0,0 @@
-/*
-Copyright 2023 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.
-*/
-
-.mx_SpaceScopeHeader {
-    text-align: center;
-
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-    overflow: hidden;
-
-    .mx_BaseAvatar {
-        margin-right: var(--cpd-space-2x);
-        vertical-align: middle;
-    }
-}

src/components/views/right_panel/UserInfo.tsx

@@ -80,7 +80,6 @@ import { DirectoryMember, startDmOnFirstMessage } from "../../../utils/direct-me
 import { SdkContextClass } from "../../../contexts/SDKContext";
 import { asyncSome } from "../../../utils/arrays";
 import UIStore from "../../../stores/UIStore";
-import { createSpaceScopeHeader } from "../rooms/SpaceScopeHeader";
 
 export interface IDevice extends Device {
     ambiguous?: boolean;
@@ -1778,7 +1777,7 @@ const UserInfo: React.FC<IProps> = ({ user, room, onClose, phase = RightPanelPha
     return (
         <BaseCard
             className={classes.join(" ")}
-            header={createSpaceScopeHeader(room) ?? _t("common|profile")}
+            header={_t("common|profile")}
             onClose={onClose}
             closeLabel={closeLabel}
             cardState={cardState}

src/components/views/rooms/MemberList.tsx

@@ -55,7 +55,6 @@ import { SDKContext } from "../../../contexts/SDKContext";
 import { canInviteTo } from "../../../utils/room/canInviteTo";
 import { inviteToRoom } from "../../../utils/room/inviteToRoom";
 import { Action } from "../../../dispatcher/actions";
-import { createSpaceScopeHeader } from "./SpaceScopeHeader";
 
 const INITIAL_LOAD_NUM_MEMBERS = 30;
 const INITIAL_LOAD_NUM_INVITED = 5;
@@ -429,7 +428,6 @@ export default class MemberList extends React.Component<IProps, IState> {
                 className="mx_MemberList"
                 ariaLabelledBy="memberlist-panel-tab"
                 role="tabpanel"
-                header={createSpaceScopeHeader(room)}
                 hideHeaderButtons={this.props.hideHeaderButtons}
                 footer={footer}
                 onClose={this.props.onClose}

src/components/views/rooms/SpaceScopeHeader.tsx

@@ -1,54 +0,0 @@
-/*
-Copyright 2023 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 React from "react";
-import { Room } from "matrix-js-sdk/src/matrix";
-import { Text } from "@vector-im/compound-web";
-
-import RoomAvatar from "../avatars/RoomAvatar";
-import { useRoomName } from "../../../hooks/useRoomName";
-
-/**
- * Returns a space scope header if needed
- * @param room The room object
- * @returns rendered component if the room is a space room, otherwise returns null
- */
-export function createSpaceScopeHeader(room?: Room | null): React.JSX.Element | null {
-    if (room?.isSpaceRoom()) return <SpaceScopeHeader room={room} />;
-    else return null;
-}
-
-/**
- * Scope header used to decorate right panels that are scoped to a space.
- * It renders room avatar and name.
- */
-export const SpaceScopeHeader: React.FC<{ room: Room }> = ({ room }) => {
-    const roomName = useRoomName(room);
-
-    return (
-        <Text
-            as="div"
-            size="lg"
-            weight="semibold"
-            className="mx_SpaceScopeHeader"
-            title={roomName}
-            data-testid="space-header"
-        >
-            <RoomAvatar room={room} size="32px" />
-            {roomName}
-        </Text>
-    );
-};

src/components/views/rooms/ThirdPartyMemberInfo.tsx

@@ -28,7 +28,6 @@ import { Action } from "../../../dispatcher/actions";
 import ErrorDialog from "../dialogs/ErrorDialog";
 import BaseCard from "../right_panel/BaseCard";
 import { Flex } from "../../utils/Flex";
-import { createSpaceScopeHeader } from "./SpaceScopeHeader";
 
 interface IProps {
     event: MatrixEvent;
@@ -134,7 +133,7 @@ export default class ThirdPartyMemberInfo extends React.Component<IProps, IState
         }
 
         return (
-            <BaseCard header={createSpaceScopeHeader(this.room)} onClose={this.props.onClose}>
+            <BaseCard onClose={this.props.onClose}>
                 <Flex className="mx_ThirdPartyMemberInfo" direction="column" gap="var(--cpd-space-4x)">
                     <Flex direction="column" as="section" justify="start" gap="var(--cpd-space-2x)">
                         {/* same as userinfo name style */}

test/components/views/right_panel/UserInfo-test.tsx

@@ -302,15 +302,6 @@ describe("<UserInfo />", () => {
             expect(screen.queryByTestId("space-header")).not.toBeInTheDocument();
         });
 
-        it("renders space header when room is a space room", () => {
-            const spaceRoom = {
-                ...mockRoom,
-                isSpaceRoom: jest.fn().mockReturnValue(true),
-            };
-            renderComponent({ room: spaceRoom });
-            expect(screen.getByTestId("space-header")).toBeInTheDocument();
-        });
-
         it("renders encryption info panel without pending verification", () => {
             renderComponent({ phase: RightPanelPhases.EncryptionPanel, room: mockRoom });
             expect(screen.getByRole("heading", { name: /encryption/i })).toBeInTheDocument();