Jika/element-web
1
0
Fork 0
Code Issues Pull Requests Projects Wiki Activity

Add badge for history visibiltity to room info panel (#31927)

Browse Source 
* Add `HistoryVisibilityBadge` shared component

* Add `historyVisibility` to `RoomSummaryCardViewModel`

* Add a history visibility badge to the room info panel

* Allow roominfo panel badges to wrap

Now that we have an extra one, it's quite likely we'll have to spill onto more
lines.

* update screenshots

* Set icons in badges to be 16px

Having discussed this with the design team, the icons in badges should be 16px, not 13px,
at default font size settings.

* Add stories for all history visibility states

* fix incorrect use of useRoomState

* fix snapshots

* more snapshot updates

* Update screenshots
This commit is contained in:
Richard van der Hoff
2026-02-03 12:50:00 +00:00
committed by GitHub
parent 92615272ce
commit af55def428
19 changed files with 317 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
test/test-utils/test-utils.ts
View File

@@ -32,6 +32,7 @@ import {
type EventStatus,
type ICreateRoomOpts,
RoomState,
HistoryVisibility,
} from "matrix-js-sdk/src/matrix";
import { KnownMembership } from "matrix-js-sdk/src/types";
import { normalize } from "matrix-js-sdk/src/utils";
@@ -673,6 +674,7 @@ export function mkStubRoom(
maySendRedactionForEvent: jest.fn().mockReturnValue(true),
maySendEvent: jest.fn().mockReturnValue(true),
members: {},
getHistoryVisibility: jest.fn().mockReturnValue(HistoryVisibility.Shared),
getJoinRule: jest.fn().mockReturnValue(JoinRule.Invite),
on: jest.fn(),
off: jest.fn(),

3
test/unit-tests/components/views/right_panel/RoomSummaryCardView-test.tsx
View File

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React from "react";
import { render, fireEvent, screen } from "jest-matrix-react";
import { Room, type MatrixClient, JoinRule, MatrixEvent } from "matrix-js-sdk/src/matrix";
import { Room, type MatrixClient, JoinRule, MatrixEvent, HistoryVisibility } from "matrix-js-sdk/src/matrix";
import { mocked, type MockedObject } from "jest-mock";
import userEvent from "@testing-library/user-event";
@@ -56,6 +56,7 @@ describe("<RoomSummaryCard />", () => {
e2eStatus: undefined,
isVideoRoom: false,
roomJoinRule: JoinRule.Public,
historyVisibility: HistoryVisibility.Shared,
alias: "",
isFavorite: false,
canInviteToState: true,

81
test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap
View File

@@ -70,7 +70,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
/>
<section
class="_flex_4dswl_9 mx_RoomSummaryCard_badges"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
>
<span
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
@@ -81,7 +81,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
width="1rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
@@ -99,7 +99,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
width="1rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
@@ -108,6 +108,27 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</svg>
Not encrypted
</span>
<span
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
data-kind="blue"
>
<svg
color="var(--cpd-color-icon-info-primary)"
fill="currentColor"
height="1rem"
viewBox="0 0 24 24"
width="1rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.93 8A8 8 0 1 1 4 12a1 1 0 1 0-2 0c0 5.523 4.477 10 10 10s10-4.477 10-10a10 10 0 0 0-.832-4A10 10 0 0 0 12 2a9.99 9.99 0 0 0-8 3.999V4a1 1 0 0 0-2 0v4a1 1 0 0 0 1 1h4a1 1 0 0 0 0-2H5.755A7.99 7.99 0 0 1 12 4a8 8 0 0 1 6.93 4"
/>
<path
d="M13 8a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l2.83 2.83a1 1 0 0 0 1.414-1.414L13 11.586z"
/>
</svg>
New members see history
</span>
</section>
<section
class="_flex_4dswl_9 mx_RoomSummaryCard_topic"
@@ -784,7 +805,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
/>
<section
class="_flex_4dswl_9 mx_RoomSummaryCard_badges"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
>
<span
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
@@ -795,7 +816,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
width="1rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
@@ -813,7 +834,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
width="1rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
@@ -822,6 +843,27 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</svg>
Not encrypted
</span>
<span
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
data-kind="blue"
>
<svg
color="var(--cpd-color-icon-info-primary)"
fill="currentColor"
height="1rem"
viewBox="0 0 24 24"
width="1rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.93 8A8 8 0 1 1 4 12a1 1 0 1 0-2 0c0 5.523 4.477 10 10 10s10-4.477 10-10a10 10 0 0 0-.832-4A10 10 0 0 0 12 2a9.99 9.99 0 0 0-8 3.999V4a1 1 0 0 0-2 0v4a1 1 0 0 0 1 1h4a1 1 0 0 0 0-2H5.755A7.99 7.99 0 0 1 12 4a8 8 0 0 1 6.93 4"
/>
<path
d="M13 8a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l2.83 2.83a1 1 0 0 0 1.414-1.414L13 11.586z"
/>
</svg>
New members see history
</span>
</section>
<section
class="_flex_4dswl_9 mx_RoomSummaryCard_topic"
@@ -1460,7 +1502,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
/>
<section
class="_flex_4dswl_9 mx_RoomSummaryCard_badges"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
>
<span
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
@@ -1471,7 +1513,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
width="1rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
@@ -1489,7 +1531,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
width="1rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
@@ -1498,6 +1540,27 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</svg>
Not encrypted
</span>
<span
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
data-kind="blue"
>
<svg
color="var(--cpd-color-icon-info-primary)"
fill="currentColor"
height="1rem"
viewBox="0 0 24 24"
width="1rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.93 8A8 8 0 1 1 4 12a1 1 0 1 0-2 0c0 5.523 4.477 10 10 10s10-4.477 10-10a10 10 0 0 0-.832-4A10 10 0 0 0 12 2a9.99 9.99 0 0 0-8 3.999V4a1 1 0 0 0-2 0v4a1 1 0 0 0 1 1h4a1 1 0 0 0 0-2H5.755A7.99 7.99 0 0 1 12 4a8 8 0 0 1 6.93 4"
/>
<path
d="M13 8a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l2.83 2.83a1 1 0 0 0 1.414-1.414L13 11.586z"
/>
</svg>
New members see history
</span>
</section>
<section
class="_flex_4dswl_9 mx_RoomSummaryCard_topic"