imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
32 changed files with 176 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

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>