Initial structure for shared component views #30216

dbkr · 2025-06-26T10:39:01Z

Turn the trivial TextualEvent into a shared component with a separate view model for element web.
Adds jest based unit testing for the shared components
Adds storybook for the shared components from @florianduros 's PR
Adds storybook / test-runner / playwright screenshot testing for each story

Not included in this PR (it's getting large...):

@florianduros 's shared component translation stuff
Way to use element-web-playwright-common to update the screenshots conveniently with docker (they differ per platform)
Superclass that simple view models can extend to get a ViewModelSubscriptions for free to reduce boilerplate if they just want to do the simple thing.

FWIW this uses storybook's test-runner for screenshot tests which is considered deprecated in favour of @storybook/addon-vitest which runs vitest in browser mode, but vistest browser mode doesn't actually support screenshots yet! vitest-dev/vitest#6265 is the bug for it. There's a PR, so it might happen soonish, but not yet. Some people have a workaround using jest-image-snapshot but it's ropey. Half an hour before I wrote this message, someone posted a vitest plugin that apparently does it: we could try this.

Checklist

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)

Turn the trivial TextualEvent into a shared component with a separate view model for element web. Args to view model will probably change to be more specific and VM typer needs abstracting out into an interface, but should give the general idea.

Because we used it anyway, we just cheated by getting it from the context

cherry pick edc5e87 from florianduros/storybook

…sharedcomponent

t3chguy

Lots of js/ts files with no copyright

.github/workflows/shared-component-visual-tests.yaml

jest.config.ts

t3chguy · 2025-07-09T13:33:49Z

src/viewmodels/event-tiles/TextualEventViewModel.ts

+        this.subs = new ViewModelSubscriptions(this.updateSubscription);
+    }
+
+    private updateSubscription = (): void => {
+        if (this.subs.listenerCount() > 0) {
+            this.eventTileProps.mxEvent.on(MatrixEventEvent.SentinelUpdated, this.onEventSentinelUpdated);
+        } else {
+            this.eventTileProps.mxEvent.off(MatrixEventEvent.SentinelUpdated, this.onEventSentinelUpdated);
+        }
+    };


this seems a bit foot-gunny, why not a start/stop esque 2-method approach ooi?

Yeah, I started to think that actually, I changed it in #30297

Ported to here

src/viewmodels/event-tiles/TextualEventViewModel.ts

src/viewmodels/ViewModelSubscriptions.ts

@andybalaam

Changes in [1.11.110](https://github.com/element-hq/element-web/releases/tag/v1.11.110) (2025-08-27) ==================================================================================================== * Hide recovery key when re-entering it while creating or changing it ([#30499](element-hq/element-web#30499)). Contributed by @andybalaam. * Add `?no_universal_links=true` to OIDC url so EX doesn't try to handle it ([#29439](element-hq/element-web#29439)). Contributed by @t3chguy. * Show a blue lock for unencrypted rooms and hide the grey shield for encrypted rooms ([#30440](element-hq/element-web#30440)). Contributed by @langleyd. * Add support for Module API 1.4 ([#30185](element-hq/element-web#30185)). Contributed by @t3chguy. * MVVM - Introduce some helpers for snapshot management ([#30398](element-hq/element-web#30398)). Contributed by @MidhunSureshR. * A11y: move focus to right panel when opened ([#30553](element-hq/element-web#30553)). Contributed by @florianduros. * Fix e2e warning icon should be white ([#30539](element-hq/element-web#30539)). Contributed by @florianduros. * Remove NoOneHere disabled reason. ([#30524](element-hq/element-web#30524)). Contributed by @toger5. * Fix downloading files with authenticated media API ([#30520](element-hq/element-web#30520)). Contributed by @t3chguy. * Fix call permissions check confusion around element call ([#30521](element-hq/element-web#30521)). Contributed by @t3chguy. * Fix line wrap around emoji verification ([#30523](element-hq/element-web#30523)). Contributed by @t3chguy. * Don't highlight redacted events ([#30519](element-hq/element-web#30519)). Contributed by @t3chguy. * Fix matrix.to links not being handled in the app ([#30522](element-hq/element-web#30522)). Contributed by @t3chguy. * Fix issue of new room list taking up the full width ([#30459](element-hq/element-web#30459)). Contributed by @langleyd. * Fix widget persistence in React development mode ([#30509](element-hq/element-web#30509)). Contributed by @robintown. * Fix widget initialization in React development mode ([#30463](element-hq/element-web#30463)). Contributed by @robintown. Changes in [1.11.109](https://github.com/element-hq/element-web/releases/tag/v1.11.109) (2025-08-11) ==================================================================================================== This release supports the upcoming v12 ("hydra") Matrix room version and is necessary to view and participate in these rooms. * [Backport staging] Allow /upgraderoom command without developer mode enabled ([#30529](element-hq/element-web#30529)). Contributed by @RiotRobot. * [Backport staging] Support for creator/owner power level ([#30526](element-hq/element-web#30526)). Contributed by @RiotRobot. * New room list: change icon and label of menu item for to start a DM ([#30470](element-hq/element-web#30470)). Contributed by @florianduros. * Implement the member list with virtuoso ([#29869](element-hq/element-web#29869)). Contributed by @langleyd. * Add labs option for history sharing on invite ([#30313](element-hq/element-web#30313)). Contributed by @richvdh. * Bump wysiwyg to 2.39.0 adding support for pasting rich text content in the Rich Text Edtior ([#30421](element-hq/element-web#30421)). Contributed by @langleyd. * Support `EventShieldReason.MISMATCHED_SENDER` ([#30403](element-hq/element-web#30403)). Contributed by @richvdh. * Change unencrypted and public pills to blue ([#30399](element-hq/element-web#30399)). Contributed by @florianduros. * Change color of public room icon ([#30390](element-hq/element-web#30390)). Contributed by @florianduros. * Script for updating storybook screenshots ([#30340](element-hq/element-web#30340)). Contributed by @dbkr. * Add toggle to hide empty state in devtools ([#30352](element-hq/element-web#30352)). Contributed by @toger5. * [Backport staging] Use userId to filter users in non-federated rooms when showing the InviteDialog ([#30537](element-hq/element-web#30537)). Contributed by @RiotRobot. * [Backport staging] Catch error when encountering invalid m.room.pinned\_events event ([#30536](element-hq/element-web#30536)). Contributed by @RiotRobot. * Update for compatibility with v12 rooms ([#30452](element-hq/element-web#30452)). Contributed by @dbkr. * New room list: fix tooltip on presence ([#30474](element-hq/element-web#30474)). Contributed by @florianduros. * New room list: add tooltip for presence and room status ([#30472](element-hq/element-web#30472)). Contributed by @florianduros. * Fix: Clicking on an item in the member list causes it to scroll to the top rather than show the profile view ([#30455](element-hq/element-web#30455)). Contributed by @langleyd. * Put the 'decrypting' tooltip back ([#30446](element-hq/element-web#30446)). Contributed by @dbkr. * Use server name explicitly for via. ([#30362](element-hq/element-web#30362)). Contributed by @Half-Shot. * fix: replace hardcoded string in poll history dialog ([#30402](element-hq/element-web#30402)). Contributed by @florianduros. * fix: replace hardcoded string on qr code back button ([#30401](element-hq/element-web#30401)). Contributed by @florianduros. * Fix color of icon button with outline ([#30361](element-hq/element-web#30361)). Contributed by @florianduros. Changes in [1.11.108](https://github.com/element-hq/element-web/releases/tag/v1.11.108) (2025-07-30) ==================================================================================================== * [Backport staging] Fix downloaded attachments not being decrypted ([#30434](element-hq/element-web#30434)). Contributed by @RiotRobot. Changes in [1.11.107](https://github.com/element-hq/element-web/releases/tag/v1.11.107) (2025-07-29) ==================================================================================================== * Message preview should show tooltip with the full message on hover ([#30265](element-hq/element-web#30265)). Contributed by @MidhunSureshR. * Support rendering notification badges on platforms that do their own icon overlays ([#30315](element-hq/element-web#30315)). Contributed by @Half-Shot. * Add SubscriptionViewModel base class ([#30297](element-hq/element-web#30297)). Contributed by @dbkr. * Enhancement: Save image on CTRL+S ([#30330](element-hq/element-web#30330)). Contributed by @ioalexander. * Add quote functionality to MessageContextMenu (#29893) ([#30323](element-hq/element-web#30323)). Contributed by @AlirezaMrtz. * Initial structure for shared component views ([#30216](element-hq/element-web#30216)). Contributed by @dbkr. * [Backport staging] Fix e2e shield being invisible in white mode for encrypted room ([#30411](element-hq/element-web#30411)). Contributed by @RiotRobot. * Force ED titlebar color for new room list ([#30332](element-hq/element-web#30332)). Contributed by @florianduros. * Add a background color to left panel for macos titlebar in element desktop ([#30328](element-hq/element-web#30328)). Contributed by @florianduros. * Fix: Prevent page refresh on Enter key in right panel member search ([#30312](element-hq/element-web#30312)). Contributed by @AlirezaMrtz.

* Very first pass at shared component views Turn the trivial TextualEvent into a shared component with a separate view model for element web. Args to view model will probably change to be more specific and VM typer needs abstracting out into an interface, but should give the general idea. * Remove old TextualEvent * Pass showHiddenEvents Because we used it anyway, we just cheated by getting it from the context * Factor out common view model stuff * Move ViewModel interface into the shared components * Add tiny wrapper hook * Move showHiddenEvents into props fully * Fill in stories / test * chore: setup storybook cherry pick edc5e87 from florianduros/storybook * Add TextualEvent component to storybook * Add mock view model & snapshot * Remove old style stories entry * Change import * Change import * Prettier * Add paxckage patch to @types/mdx for React 19 compat * Pass getSnapshot as getServerSnapshot too * Maybe make sonar regognise tests as tests * Typo * Use storybook reacvt-vite There's no reason to use the react-webpack plugin just because our app is stuck on webpack, it just means we have vite as a dependency too. * Change here too * Workaround for incomatible types in rollup rollup/rollup#5199 * Remove webpack styling addon Not necessary now we're using vite * Hopefully do screenshot testing... * need newer node * quote issues * Make it an npm script * colons * use right port * Install playwright browsers * Try without the if * Oh right, we need the headless shell * Pass flag to store received screenshots and upload diffs too * Update snapshot from received * Include platform in snapshot / received dir because font rendering differs between platforms * Suffix snapshots with platform instead like we do for playwright * Remove unnecessary env vars and better name * Add some comments * Prettier * Fix yarn.lock * Memoise vm creation Co-authored-by: Florian Duros <[email protected]> * Add implements Co-authored-by: Florian Duros <[email protected]> * Fix listener interface * Add implements Co-authored-by: Florian Duros <[email protected]> * Fix types * Fix more types * Revert useMemo as this isn't a hook * Unused import * Add missing playwright step * Add return type annotation * Change to add / remove subscription callback * Change to 'add' rather than 'subs.subscribe' * Add cache specifier for only shell playwright browsers * Add copyright headers --------- Co-authored-by: Florian Duros <[email protected]> Co-authored-by: Florian Duros <[email protected]>

dbkr added the T-Enhancement label Jun 26, 2025

github-actions bot deployed to Netlify June 26, 2025 10:41 View deployment

Remove old TextualEvent

ddbe098

github-actions bot deployed to Netlify June 26, 2025 10:45 View deployment

github-actions bot deployed to EndToEndTests June 26, 2025 10:56 View deployment

Pass showHiddenEvents

0179284

Because we used it anyway, we just cheated by getting it from the context

github-actions bot deployed to Netlify June 26, 2025 12:49 View deployment

github-actions bot deployed to EndToEndTests June 26, 2025 13:00 View deployment

Factor out common view model stuff

84d34e1

github-actions bot deployed to Netlify June 26, 2025 15:11 View deployment

dbkr added 2 commits June 26, 2025 16:12

Move ViewModel interface into the shared components

b96da8d

Add tiny wrapper hook

455ca44

github-actions bot deployed to Netlify June 26, 2025 15:15 View deployment

github-actions bot deployed to Netlify June 26, 2025 15:18 View deployment

Move showHiddenEvents into props fully

73d78f4

github-actions bot deployed to Netlify June 26, 2025 15:25 View deployment

github-actions bot deployed to EndToEndTests June 26, 2025 15:37 View deployment

dbkr and others added 5 commits June 30, 2025 15:02

Fill in stories / test

2125415

chore: setup storybook

a597221

cherry pick edc5e87 from florianduros/storybook

Add TextualEvent component to storybook

3d724ff

Add mock view model & snapshot

11f9849

Remove old style stories entry

4709656

github-actions bot requested a deployment to Netlify June 30, 2025 15:42 In progress

Merge branch 'develop' into dbkr/textualevent_sharedcomponent

5638dd7

github-actions bot deployed to Netlify July 1, 2025 13:50 View deployment

dbkr added 2 commits July 1, 2025 14:55

Change import

9318006

Change import

a936433

github-actions bot deployed to Netlify July 1, 2025 14:01 View deployment

Prettier

472de3b

github-actions bot deployed to EndToEndTests July 9, 2025 11:36 View deployment

Merge remote-tracking branch 'origin/develop' into dbkr/textualevent_…

ead893c

…sharedcomponent

github-actions bot deployed to Netlify July 9, 2025 13:01 View deployment

github-actions bot deployed to EndToEndTests July 9, 2025 13:12 View deployment

t3chguy reviewed Jul 9, 2025

View reviewed changes

dbkr added 4 commits July 9, 2025 14:37

Add missing playwright step

fa300af

Add return type annotation

dc47abb

Change to add / remove subscription callback

f62177a

Change to 'add' rather than 'subs.subscribe'

049a3ae

github-actions bot deployed to Netlify July 9, 2025 14:02 View deployment

Add cache specifier for only shell playwright browsers

c16fd3d

github-actions bot deployed to Netlify July 9, 2025 14:10 View deployment

Add copyright headers

c3e53aa

github-actions bot deployed to Netlify July 9, 2025 14:19 View deployment

github-actions bot deployed to EndToEndTests July 9, 2025 14:31 View deployment

dbkr requested review from florianduros and t3chguy July 10, 2025 13:13

t3chguy approved these changes Jul 11, 2025

View reviewed changes

dbkr added this pull request to the merge queue Jul 11, 2025

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Jul 11, 2025

dbkr added this pull request to the merge queue Jul 14, 2025

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Jul 14, 2025

dbkr added this pull request to the merge queue Jul 14, 2025

Merged via the queue into develop with commit 4bbcb8b Jul 14, 2025
41 of 45 checks passed

dbkr deleted the dbkr/textualevent_sharedcomponent branch July 14, 2025 13:28

This was referenced Oct 6, 2025

New Element Web release v1.12.0 grueneschweiz/element-web-apache#1

Closed

New Element Web release v1.12.0 grueneschweiz/element-web-apache#2

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Initial structure for shared component views #30216

Initial structure for shared component views #30216

Uh oh!

dbkr commented Jun 26, 2025 •

edited

Loading

Uh oh!

t3chguy left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

t3chguy Jul 9, 2025

Uh oh!

dbkr Jul 9, 2025

Uh oh!

dbkr Jul 9, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Initial structure for shared component views #30216

Initial structure for shared component views #30216

Uh oh!

Conversation

dbkr commented Jun 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Checklist

Uh oh!

t3chguy left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

t3chguy Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

dbkr Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

dbkr Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

dbkr commented Jun 26, 2025 •

edited

Loading