Implement UI for history visibility acknowledgement. #31156

kaylendog · 2025-11-03T13:09:11Z

Shows a banner above the message composer whenever a user opens a room with non-join history visibility, which they can dismiss.

Whenever a user opens an encrypted room with non-join history visibility, show them a banner, unless we have already marked it as dismissed.
Whenever a user opens an encrypted room with joined history visibility, we unmark it as dismissed.

Issue: element-hq/element-meta#2875

Checklist

I have read through review guidelines and CONTRIBUTING.md.
Tests written for new code (and old code if feasible).
New or updated public/exported symbols have accurate TSDoc documentation.
Linter and other CI checks pass.
I have licensed the changes to Element by completing the Contributor License Agreement (CLA)

kaylendog · 2025-11-03T15:52:43Z

res/css/structures/_RoomStatusBar.pcss

+.mx_RoomStatusBar_historyVisibility {
+    > div[role="alert"] {
+        /* cheat some basic alignment */
+        display: flex;
+        align-items: center;
+        min-height: 70px;
+        padding-left: 16px;
+        background: var(--cpd-color-gradient-info-linear);
+        border-top: 1px solid var(--cpd-color-border-focused);
+    }
+
+    .mx_RoomStatusBar_historyVisibilityBadge > svg {
+        margin-right: 12px;
+        font-size: $font-24px;
+        color: var(--cpd-color-text-badge-info);
+    }
+
+    .mx_RoomStatusBar_historyVisibilityDescription {
+        font-size: $font-15px;
+        color: var(--cpd-color-text-info-primary);
+    }
+
+    .mx_RoomStatusBar_historyVisibilityLink {
+        font-size: $font-12px;
+        color: var(--cpd-color-text-primary);
+    }
+
+    .mx_RoomStatusBar_historyVisibilityButtonBar {
+        flex-grow: 1;
+        text-align: right;
+        margin-right: 22px;
+    }
+}
+


This needs to be checked by someone responsible for design! I've done my best to produce something similar to the Figma design, but I don't have a reference for dark mode, which currently looks utterly atrocious:

There's also some conflicts with the reset identity status, but I suspect this is a wider issue with this status bar - perhaps the identity reset should be refactored into the status bar?

src/components/structures/RoomStatusBarHistoryVisible.tsx

kaylendog · 2025-11-04T15:46:54Z

I'm wondering if this would be better off as a floating alert above the UI - would conflict less with the identity reset dialog.

florianduros · 2025-11-04T15:50:00Z

@kaylendog this is a question for the design team. Where are the figma design for this banner?

kaylendog · 2025-11-04T15:53:28Z

@kaylendog this is a question for the design team. Where are the figma design for this banner?

Here (for EW)!

kaylendog · 2025-11-04T17:04:36Z

Opening this up for review, since I can't make any headway on the CI failures:

The Playwright tests need their snapshots updating, which I can't do locally since this (apparently) needs rootful docker;
The Jest unit tests are failing for an unknown reason which I can't replicate locally - we suspect this may be cache related?

florianduros

Each components in shared component has its own folder. imo RoomStatusBarHistoryVisible should be in packages/shared-components/src/room/RoomStatusBarHistoryVisible.

The RoomStatusBarHistoryVisible is missing at least a render test and a check that onClose is correctly binded.

...ared-components/src/room/RoomStatusBarHistoryVisible/RoomStatusBarHistoryVisible.stories.tsx

packages/shared-components/src/structures/RoomStatusBarHistoryVisible.stories.tsx

packages/shared-components/src/structures/RoomStatusBarHistoryVisible.module.css

packages/shared-components/src/structures/RoomStatusBarHistoryVisible.tsx

src/components/structures/RoomStatusBar.tsx

src/i18n/strings/en_EN.json

test/unit-tests/components/structures/RoomStatusBar-test.tsx

…y-sharing/status

t3chguy · 2025-11-13T15:51:19Z

playwright/snapshots/file-upload/image-upload.spec.ts/image-upload-preview-linux.png

This change seems unexpected

t3chguy · 2025-11-13T15:51:29Z

playwright/snapshots/crypto/toasts.spec.ts/key-storage-out-of-sync-toast-linux.png

This change seems unexpected

As far as I can tell, I haven't touched anything close to this. Is this flaking, or is there some horrible rabbit hole I should investigate?

...hared-components/src/room/RoomStatusBarHistoryVisible/RoomStatusBarHistoryVisible.module.css

This change should restore my status as a good person.

kaylendog self-assigned this Nov 3, 2025

kaylendog added the T-Enhancement label Nov 3, 2025

github-actions bot deployed to Netlify November 3, 2025 13:12 View deployment

github-actions bot deployed to EndToEndTests November 3, 2025 13:23 View deployment

github-actions bot deployed to Netlify November 3, 2025 15:46 View deployment

github-actions bot deployed to Netlify November 3, 2025 15:50 View deployment

kaylendog commented Nov 3, 2025

View reviewed changes

florianduros reviewed Nov 3, 2025

View reviewed changes

src/components/structures/RoomStatusBarHistoryVisible.tsx Outdated Show resolved Hide resolved

florianduros reviewed Nov 3, 2025

View reviewed changes

src/components/structures/RoomStatusBarHistoryVisible.tsx Outdated Show resolved Hide resolved

kaylendog force-pushed the kaylendog/history-sharing/status branch from 68ef636 to 27b11e4 Compare November 3, 2025 16:02

github-actions bot deployed to Netlify November 3, 2025 16:05 View deployment

github-actions bot deployed to EndToEndTests November 3, 2025 16:17 View deployment

github-actions bot deployed to Netlify November 3, 2025 16:50 View deployment

github-actions bot deployed to Netlify November 3, 2025 17:00 View deployment

github-actions bot deployed to EndToEndTests November 3, 2025 17:14 View deployment

github-actions bot deployed to Netlify November 4, 2025 12:00 View deployment

github-actions bot deployed to EndToEndTests November 4, 2025 12:10 View deployment

github-actions bot deployed to Netlify November 4, 2025 13:18 View deployment

github-actions bot deployed to EndToEndTests November 4, 2025 13:29 View deployment

github-actions bot deployed to Netlify November 4, 2025 15:47 View deployment

github-actions bot deployed to EndToEndTests November 4, 2025 15:58 View deployment

kaylendog marked this pull request as ready for review November 4, 2025 17:04

kaylendog requested a review from a team as a code owner November 4, 2025 17:04

kaylendog requested review from florianduros and t3chguy November 4, 2025 17:04

florianduros requested changes Nov 5, 2025

View reviewed changes

github-actions bot deployed to Netlify November 13, 2025 10:35 View deployment

github-actions bot deployed to EndToEndTests November 13, 2025 10:47 View deployment

fix: Resolve build issue with shared-components.

a729c86

github-actions bot deployed to Netlify November 13, 2025 11:15 View deployment

github-actions bot deployed to EndToEndTests November 13, 2025 11:27 View deployment

kaylendog added 2 commits November 13, 2025 14:54

tests: Enable history sharing lab for unit tests.

30c41d1

Merge remote-tracking branch 'upstream/develop' into kaylendog/histor…

7444e3b

…y-sharing/status

github-actions bot deployed to Netlify November 13, 2025 15:35 View deployment

github-actions bot deployed to EndToEndTests November 13, 2025 15:50 View deployment

t3chguy reviewed Nov 13, 2025

View reviewed changes

tests: Set labs flag in SettingsStore mock.

6e49704

github-actions bot deployed to Netlify November 13, 2025 16:07 View deployment

github-actions bot deployed to EndToEndTests November 13, 2025 16:19 View deployment

fix: Remove non-existent arg - documentation should be updated!

8620722

github-actions bot deployed to Netlify November 13, 2025 16:30 View deployment

chore: Remove old CSS rule filter.

ccec28f

t3chguy reviewed Nov 13, 2025

View reviewed changes

...hared-components/src/room/RoomStatusBarHistoryVisible/RoomStatusBarHistoryVisible.module.css Outdated Show resolved Hide resolved

github-actions bot deployed to EndToEndTests November 13, 2025 16:44 View deployment

fix: Use package name for import over relative path.

b8a54b9

github-actions bot deployed to Netlify November 13, 2025 17:59 View deployment

github-actions bot deployed to EndToEndTests November 13, 2025 18:12 View deployment

kaylendog added 2 commits November 13, 2025 18:39

fix: Mark styles as important due to improper CSS load order.

bed81c3

docs: Add doc comments to !important directives.

bdc1067

This change should restore my status as a good person.

github-actions bot deployed to Netlify November 13, 2025 18:49 View deployment

docs: Correct license header.

746acc9

github-actions bot deployed to Netlify November 13, 2025 18:57 View deployment

tests: Update RoomStatusBarHistoryVisible snapshot.

f0377f8

github-actions bot deployed to Netlify November 13, 2025 19:07 View deployment

github-actions bot deployed to EndToEndTests November 13, 2025 19:22 View deployment

Uh oh!

Implement UI for history visibility acknowledgement. #31156

Are you sure you want to change the base?

Implement UI for history visibility acknowledgement. #31156

Uh oh!

Conversation

kaylendog commented Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Checklist

Uh oh!

kaylendog Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

kaylendog commented Nov 4, 2025

Uh oh!

florianduros commented Nov 4, 2025

Uh oh!

kaylendog commented Nov 4, 2025

Uh oh!

kaylendog commented Nov 4, 2025

Uh oh!

florianduros left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

t3chguy Nov 13, 2025

Choose a reason for hiding this comment

Uh oh!

t3chguy Nov 13, 2025

Choose a reason for hiding this comment

Uh oh!

kaylendog Nov 13, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kaylendog commented Nov 3, 2025 •

edited

Loading