matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-07-31 13:44:28 +03:00
Code Activity

Room header UI updates (#11507)

Browse Source 
* Fix performance issues with useRoomMembers

With the current implementation it would create a new function, with leading: true, rendering the whole throttling useless

* Add public room indicator

* Format room members count better

* Add public room test

* Add search to room summary card

* Update settings UI

* Update snapshot

* Remove default title attribute
This commit is contained in:
Germain
2023-09-01 10:45:50 +01:00
committed by GitHub
parent 30d997e21c
commit d551469543
32 changed files with 176 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
test/components/structures/__snapshots__/RoomView-test.tsx.snap
View File

@ -24,7 +24,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
data-type="round"
role="presentation"
style="--cpd-avatar-size: 24px;"
title=""
title="@user:example.com"
>
u
</span>
@ -107,7 +107,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
data-type="round"
role="presentation"
style="--cpd-avatar-size: 24px;"
title=""
title="@user:example.com"
>
u
</span>
@ -187,7 +187,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
data-type="round"
role="button"
style="--cpd-avatar-size: 52px;"
title=""
title="@user:example.com"
>
u
</button>
@ -276,7 +276,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
data-type="round"
role="presentation"
style="--cpd-avatar-size: 24px;"
title=""
title="@user:example.com"
>
u
</span>
@ -356,7 +356,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
data-type="round"
role="button"
style="--cpd-avatar-size: 52px;"
title=""
title="@user:example.com"
>
u
</button>
@ -520,7 +520,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
data-type="round"
role="presentation"
style="--cpd-avatar-size: 24px;"
title=""
title="@user:example.com"
>
u
</span>
@ -599,7 +599,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
data-type="round"
role="button"
style="--cpd-avatar-size: 52px;"
title=""
title="@user:example.com"
>
u
</button>

8
test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
View File

@ -77,7 +77,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
data-type="round"
role="presentation"
style="--cpd-avatar-size: 20px;"
title=""
title="room-id-2"
>
U
</span>
@ -148,7 +148,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
data-type="round"
role="presentation"
style="--cpd-avatar-size: 20px;"
title=""
title="room-id-3"
>
U
</span>
@ -220,7 +220,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
data-type="round"
role="presentation"
style="--cpd-avatar-size: 20px;"
title=""
title="space-id-4"
>
N
</span>
@ -298,7 +298,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
data-type="round"
role="presentation"
style="--cpd-avatar-size: 20px;"
title=""
title="room-id-5"
>
N
</span>

2
test/components/structures/__snapshots__/UserMenu-test.tsx.snap
View File

@ -24,7 +24,7 @@ exports[`<UserMenu> when rendered should render as expected 1`] = `
data-type="round"
role="presentation"
style="--cpd-avatar-size: 32px;"
title=""
title="@userId:matrix.org"
>
u
</span>

6
test/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap
View File

@ -9,7 +9,7 @@ exports[`RoomAvatar should render as expected for a DM room 1`] = `
data-type="round"
role="presentation"
style="--cpd-avatar-size: 36px;"
title=""
title="@dm_user@example.com"
>
D
</span>
@ -25,7 +25,7 @@ exports[`RoomAvatar should render as expected for a LocalRoom 1`] = `
data-type="round"
role="presentation"
style="--cpd-avatar-size: 36px;"
title=""
title="@local_room_user@example.com"
>
l
</span>
@ -41,7 +41,7 @@ exports[`RoomAvatar should render as expected for a Room 1`] = `
data-type="round"
role="presentation"
style="--cpd-avatar-size: 36px;"
title=""
title="!room:example.com"
>
t
</span>

2
test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
View File

@ -77,7 +77,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
data-type="round"
role="presentation"
style="--cpd-avatar-size: 20px;"
title=""
title="!space:server"
>
O
</span>

3
test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
View File

@ -120,7 +120,6 @@ exports[`AppTile for a pinned widget should render 1`] = `
loading="lazy"
referrerpolicy="no-referrer"
src="image-file-stub"
title=""
width="20px"
/>
</span>
@ -209,7 +208,6 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
loading="lazy"
referrerpolicy="no-referrer"
src="image-file-stub"
title=""
width="20px"
/>
</span>
@ -366,7 +364,6 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
loading="lazy"
referrerpolicy="no-referrer"
src="image-file-stub"
title=""
width="20px"
/>
</span>

2
test/components/views/elements/__snapshots__/FacePile-test.tsx.snap
View File

@ -16,7 +16,7 @@ exports[`<FacePile /> renders with a tooltip 1`] = `
data-type="round"
role="presentation"
style="--cpd-avatar-size: 36px;"
title=""
title="456"
>
4
</span>

16
test/components/views/elements/__snapshots__/Pill-test.tsx.snap
View File

@ -41,7 +41,7 @@ exports[`<Pill> should render the expected pill for @room 1`] = `
data-type="round"
role="presentation"
style="--cpd-avatar-size: 16px;"
title=""
title="!room1:example.com"
>
R
</span>
@ -73,7 +73,7 @@ exports[`<Pill> should render the expected pill for a known user not in the room
data-type="round"
role="presentation"
style="--cpd-avatar-size: 16px;"
title=""
title="@user2:example.com"
>
U
</span>
@ -105,7 +105,7 @@ exports[`<Pill> should render the expected pill for a message in another room 1`
data-type="round"
role="presentation"
style="--cpd-avatar-size: 16px;"
title=""
title="!room1:example.com"
>
R
</span>
@ -137,7 +137,7 @@ exports[`<Pill> should render the expected pill for a message in the same room 1
data-type="round"
role="presentation"
style="--cpd-avatar-size: 16px;"
title=""
title="@user1:example.com"
>
U
</span>
@ -169,7 +169,7 @@ exports[`<Pill> should render the expected pill for a room alias 1`] = `
data-type="round"
role="presentation"
style="--cpd-avatar-size: 16px;"
title=""
title="!room1:example.com"
>
R
</span>
@ -201,7 +201,7 @@ exports[`<Pill> should render the expected pill for a space 1`] = `
data-type="round"
role="presentation"
style="--cpd-avatar-size: 16px;"
title=""
title="!space1:example.com"
>
S
</span>
@ -256,7 +256,7 @@ exports[`<Pill> when rendering a pill for a room should render the expected pill
data-type="round"
role="presentation"
style="--cpd-avatar-size: 16px;"
title=""
title="!room1:example.com"
>
R
</span>
@ -288,7 +288,7 @@ exports[`<Pill> when rendering a pill for a user in the room should render as ex
data-type="round"
role="presentation"
style="--cpd-avatar-size: 16px;"
title=""
title="@user1:example.com"
>
U
</span>

2
test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
View File

@ -16,7 +16,7 @@ exports[`<RoomFacePile /> renders 1`] = `
data-type="round"
role="presentation"
style="--cpd-avatar-size: 28px;"
title=""
title="@bob:example.org"
>
b
</span>

2
test/components/views/messages/TextualBody-test.tsx
View File

@ -199,7 +199,7 @@ describe("<TextualBody />", () => {
const { container } = getComponent({ mxEvent: ev });
const content = container.querySelector(".mx_EventTile_body");
expect(content.innerHTML).toMatchInlineSnapshot(
`"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com" aria-describedby="mx_Pill_0.123456"><span title="" aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_2lhia_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/image.png" crossorigin="anonymous" referrerpolicy="no-referrer" class="_image_2lhia_45" data-type="round" width="16px" height="16px" title="@member:domain.bla"></span><span class="mx_Pill_text">Member</span></a></bdi></span>"`,
`"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com" aria-describedby="mx_Pill_0.123456"><span title="@member:domain.bla" aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_2lhia_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/image.png" crossorigin="anonymous" referrerpolicy="no-referrer" class="_image_2lhia_45" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Member</span></a></bdi></span>"`,
);
});

22
test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
View File

@ -62,7 +62,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for an
data-testid="avatar-img"
data-type="round"
style="--cpd-avatar-size: 16px;"
title=""
title="@member:domain.bla"
>
<img
alt=""
@ -73,7 +73,6 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for an
loading="lazy"
referrerpolicy="no-referrer"
src="mxc://avatar.url/image.png"
title="@member:domain.bla"
width="16px"
/>
</span>
@ -113,7 +112,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
data-testid="avatar-img"
data-type="round"
style="--cpd-avatar-size: 16px;"
title=""
title="!room1:example.com"
>
<img
alt=""
@ -124,7 +123,6 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
loading="lazy"
referrerpolicy="no-referrer"
src="mxc://avatar.url/room.png"
title="!room1:example.com"
width="16px"
/>
</span>
@ -166,7 +164,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
data-testid="avatar-img"
data-type="round"
style="--cpd-avatar-size: 16px;"
title=""
title="!room1:example.com"
>
<img
alt=""
@ -177,7 +175,6 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
loading="lazy"
referrerpolicy="no-referrer"
src="mxc://avatar.url/room.png"
title="!room1:example.com"
width="16px"
/>
</span>
@ -278,7 +275,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
data-testid="avatar-img"
data-type="round"
style="--cpd-avatar-size: 16px;"
title=""
title="@member:domain.bla"
>
<img
alt=""
@ -289,7 +286,6 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
loading="lazy"
referrerpolicy="no-referrer"
src="mxc://avatar.url/image.png"
title="@member:domain.bla"
width="16px"
/>
</span>
@ -313,7 +309,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
href="https://matrix.to/#/!room1:example.com/%event_id%"
aria-describedby="mx_Pill_0.123456"
><span
title=""
title="@member:domain.bla"
aria-label="Profile picture"
aria-hidden="true"
data-testid="avatar-img"
@ -330,8 +326,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
class="_image_2lhia_45"
data-type="round"
width="16px"
height="16px"
title="@member:domain.bla" /></span
height="16px" /></span
><span class="mx_Pill_text">Message from Member</span></a
></bdi
></span
@ -348,7 +343,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
href="https://matrix.to/#/!room2:example.com/%event_id%"
aria-describedby="mx_Pill_0.123456"
><span
title=""
title="!room2:example.com"
aria-label="Avatar"
aria-hidden="true"
data-testid="avatar-img"
@ -365,8 +360,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
class="_image_2lhia_45"
data-type="round"
width="16px"
height="16px"
title="!room2:example.com" /></span
height="16px" /></span
><span class="mx_Pill_text">Message in Room 2</span></a
></bdi
></span

9
test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
View File

@ -26,7 +26,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
data-type="round"
role="presentation"
style="--cpd-avatar-size: 54px;"
title=""
title="!room:domain.org"
>
!
</span>
@ -69,6 +69,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
0
</span>
</div>
<div
class="mx_AccessibleButton mx_BaseCard_Button mx_RoomSummaryCard_Button mx_RoomSummaryCard_icon_search"
role="button"
tabindex="0"
>
Search
</div>
<div
class="mx_AccessibleButton mx_BaseCard_Button mx_RoomSummaryCard_Button mx_RoomSummaryCard_icon_files"
role="button"

2
test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
View File

@ -102,7 +102,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
data-type="round"
role="button"
style="--cpd-avatar-size: 230.39999999999998px;"
title=""
title="@user:example.com"
>
u
</button>

22
test/components/views/rooms/RoomHeader-test.tsx
View File

@ -17,7 +17,7 @@ limitations under the License.
import React from "react";
import userEvent from "@testing-library/user-event";
import { CallType, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
import { EventType, MatrixClient, MatrixEvent, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix";
import { EventType, JoinRule, MatrixClient, MatrixEvent, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix";
import { getAllByTitle, getByLabelText, getByText, getByTitle, render, screen, waitFor } from "@testing-library/react";
import { mkEvent, stubClient, withClientContextRenderOptions } from "../../../test-utils";
@ -422,6 +422,26 @@ describe("RoomHeader", () => {
});
});
describe("public room", () => {
it("shows a globe", () => {
const joinRuleEvent = new MatrixEvent({
type: EventType.RoomJoinRules,
content: { join_rule: JoinRule.Public },
sender: MatrixClientPeg.get()!.getSafeUserId(),
state_key: "",
room_id: room.roomId,
});
room.addLiveEvents([joinRuleEvent]);
const { container } = render(
<RoomHeader room={room} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);
expect(getByLabelText(container, "Public room")).toBeInTheDocument();
});
});
describe("dm", () => {
let client: MatrixClient;
beforeEach(() => {

2
test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
View File

@ -12,7 +12,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
data-type="round"
role="presentation"
style="--cpd-avatar-size: 24px;"
title=""
title="@alice:server.org"
>
a
</span>

34
test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
View File

@ -6,28 +6,24 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
>
<div
class="mx_DecoratedRoomAvatar"
<span
class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
data-color="7"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
title="!1:example.org"
>
<span
class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
data-color="7"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
title=""
>
!
</span>
</div>
!
</span>
<div
class="mx_Box mx_RoomHeader_info mx_Box--flex"
style="--mx-box-flex: 1;"
>
<div
aria-level="1"
class="_font-body-lg-semibold_1g2sj_89"
class="_font-body-lg-semibold_1g2sj_89 mx_RoomHeader_heading"
dir="auto"
role="heading"
title="!1:example.org"
@ -40,7 +36,7 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
>
<button
class="_icon-button_yvmcf_17"
class="_icon-button_1k9cw_17"
disabled=""
style="--cpd-icon-button-size: 32px;"
title="There's no one here to call"
@ -48,7 +44,7 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
<div />
</button>
<button
class="_icon-button_yvmcf_17"
class="_icon-button_1k9cw_17"
disabled=""
style="--cpd-icon-button-size: 32px;"
title="There's no one here to call"
@ -56,14 +52,14 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
<div />
</button>
<button
class="_icon-button_yvmcf_17"
class="_icon-button_1k9cw_17"
style="--cpd-icon-button-size: 32px;"
title="Threads"
>
<div />
</button>
<button
class="_icon-button_yvmcf_17"
class="_icon-button_1k9cw_17"
style="--cpd-icon-button-size: 32px;"
title="Notifications"
>

8
test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap
View File

@ -29,7 +29,7 @@ exports[`<RoomPreviewBar /> message case AskToJoin renders the corresponding mes
data-type="round"
role="presentation"
style="--cpd-avatar-size: 36px;"
title=""
title="RoomPreviewBar-test-room"
>
R
</span>
@ -222,7 +222,7 @@ exports[`<RoomPreviewBar /> with an invite with an invited email when client has
data-type="round"
role="presentation"
style="--cpd-avatar-size: 36px;"
title=""
title="RoomPreviewBar-test-room"
>
R
</span>
@ -281,7 +281,7 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a dm roo
data-type="round"
role="presentation"
style="--cpd-avatar-size: 36px;"
title=""
title="RoomPreviewBar-test-room"
>
R
</span>
@ -347,7 +347,7 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a non-dm
data-type="round"
role="presentation"
style="--cpd-avatar-size: 36px;"
title=""
title="RoomPreviewBar-test-room"
>
R
</span>

8
test/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap
View File

@ -20,7 +20,7 @@ exports[`RoomTile when message previews are enabled and there is a message in a
data-type="round"
role="presentation"
style="--cpd-avatar-size: 32px;"
title=""
title="!1:example.org"
>
!
</span>
@ -95,7 +95,7 @@ exports[`RoomTile when message previews are enabled and there is a message in th
data-type="round"
role="presentation"
style="--cpd-avatar-size: 32px;"
title=""
title="!1:example.org"
>
!
</span>
@ -170,7 +170,7 @@ exports[`RoomTile when message previews are enabled should render a room without
data-type="round"
role="presentation"
style="--cpd-avatar-size: 32px;"
title=""
title="!1:example.org"
>
!
</span>
@ -233,7 +233,7 @@ exports[`RoomTile when message previews are not enabled should render the room 1
data-type="round"
role="presentation"
style="--cpd-avatar-size: 32px;"
title=""
title="!1:example.org"
>
!
</span>

3
test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
View File

@ -31,7 +31,7 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
data-testid="avatar-img"
data-type="square"
style="--cpd-avatar-size: 40px;"
title=""
title="!spaceid:example.com"
>
<img
alt=""
@ -42,7 +42,6 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
loading="lazy"
referrerpolicy="no-referrer"
src="http://this.is.a.url/avatar.url/room.png"
title="!spaceid:example.com"
width="40px"
/>
</span>

4
test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
View File

@ -25,7 +25,7 @@ exports[`HTMLExport should export 1`] = `
<div class="mx_LegacyRoomHeader_wrapper" aria-owns="mx_RightPanel">
<div class="mx_LegacyRoomHeader_avatar">
<div class="mx_DecoratedRoomAvatar">
<span role="presentation" title="!myroom:example.org" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size:32px">!</span>
<span role="presentation" title="" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size:32px">!</span>
</div>
</div>
<div class="mx_LegacyRoomHeader_name">
@ -60,7 +60,7 @@ exports[`HTMLExport should export 1`] = `
role="list"
>
<div class="mx_NewRoomIntro">
<span role="presentation" title="!myroom:example.org" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size:32px">!</span>
<span role="presentation" title="" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size:32px">!</span>
<h2> !myroom:example.org </h2>
<p> created this room. <br/><br/> <p><span>This is the start of export of <b>!myroom:example.org</b>. Exported by <a href="https://matrix.to/#/%40userId%3Amatrix.org" target="_blank" rel="noopener noreferrer"><b>@userId:matrix.org</b></a> at 11/17/2022.</span></p> </p>
<br/>