Commit Graph

130 Commits

Author SHA1 Message Date
Will Hunt 0ddc418cf9 Move ToastContext and utilities to shared components (#33949)
* Move ToastContext and utilities to shared components

* lint

* fix type

* cleanup

* fix broken test

* fix lint

* Add more tests for ToastContext

* Potential fix for pull request finding 'Unused variable, import, function or class'

Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com>

---------

Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com>
2026-06-29 18:50:36 +00:00
Richard van der Hoff d1e6bb5b52 Add "user identity" display to dev tools (#33977)
* Add "user identity" display to dev tools

* Correct incorect hard-coded string in test mock

* Fix up tests
2026-06-29 15:49:03 +00:00
David Baker c71f17e6de Don't re-export MainSplitContentType enum (#34021)
* Don't re-export MainSplitContentType enum

I don't see why this was necessary, importing RoomView pulls in all sort
of stuff, whereas RoomContext is much smaller.

* ts, not tsx

* unintentional change
2026-06-29 12:58:52 +00:00
David Baker 4e3f47b948 Update to compound-web 9.6.0 (#33959)
* Update to compound-web 9.6.0

* Update snapshots

for aria-disabled change

* and this one
2026-06-25 16:05:58 +00:00
Michael Telatynski f9b97be1d7 Refactor languageHandler to avoid import cycles (#33948)
* Refactor languageHandler to avoid import cycles

Also move its tests to vitest

* Small refactor

* Iterate

* Iterate
2026-06-24 09:49:49 +00:00
Michael Telatynski a26732b040 Tidy up React JSX to make Sonar happier (#33946)
* Eradicate unused React props

* Fix unmatched defaultProps

* Remove spurious React fragments

* Remove unused JSX

* Remove unused React state field

* Remove unused React state field

* Update snapshots
2026-06-23 16:40:42 +00:00
Michael Telatynski 1a3d5bbfff Fix double tooltip on collapsed Quick Settings button (#33923)
* Fix double tooltip on collapsed Quick Settings button

* Update snapshot
2026-06-22 10:31:48 +00:00
Michael Telatynski 45234b9c94 Migrate more jest tests to vitest (#33898)
* Migrate more jest tests to vitest

* Fix jest config

* Fix jest config

* Make remaining jest tests type-happy
2026-06-19 15:34:18 +00:00
Florian Duros 338c18df16 Room list: add release announcement for sections (#33800)
* feat: add release announcement for sections

* test: update screenshot

* test: update tests

* test: add release annoucement utils to close it

* test: close release announcement in custom section tests

* test: update release announcement e2e test

* test: add more tests

* feat: update Ra labels

* test: update screenshot

* chore: remove stale screenshot
2026-06-19 12:06:58 +00:00
David Baker 43b9bc9458 Fix long display / user names in UserMenu (#33900)
* Fix long display / user names in UserMenu

And add a playwright test to assert (see playwright screenshot for
after photo).

* Dave installs the oxfmt extension

* snapshots
2026-06-19 11:14:57 +00:00
Michael Telatynski 7a1a3f518c Make codebase comply to knip --strict (#33893)
* Make codebase comply to `knip --strict`

Deletes a few bits of dead code

* Trim i18n strings

* Fix missing export

* Remove test of dead code
2026-06-18 09:35:47 +00:00
Michael Telatynski eca2f39dbb Switch from prettier to oxfmt (#33844)
* Switch from prettier to oxfmt

* Make knip happy

* Make knip happy

* Apply suggestion from @t3chguy

* Rename .oxfmtrc.json to .oxfmtrc.jsonc

* Make oxfmt happier
2026-06-16 12:17:18 +00:00
David Baker 3ab233940c User status in user menu (#33797)
* Add user status on user profile icon

Currently unstyled & no tests

* Style the user status icon

* Update snapshot

for avatar wrapper

* More snapshot updates

* add if braces

* Split out user status functions

to avoid circular dep which has the weird effect of just breaking
jest's mocking.

* type imports

* Update imports

* Update snapshot

* Tests

* baseline image

* Just snapshot the component itself

* User status in user menu

first pass, unstyled

* fix export

* superstylin'

* snapshots

* Add story & test

* Snapshots

and re-use the repeated rules

* Tests

* Fix jest lcov projectRoot config

* Change tooltip text to just 'clear'

* Add comment & fix console warn

* Remove all options screenshot

as it's not really particularly useful as a preset story

* remove stale screenshot

* fix imports

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2026-06-16 09:01:34 +00:00
Michael Telatynski 7949980a7e Apply html utils sanitiser to embedded page (#33842)
* Apply html utils sanitiser to embedded page

* Write tests
2026-06-15 12:58:56 +00:00
Zack 0f0f8c6ba2 Refactor UnreadNotificationBadge to shared MVVM view (#33672)
* Refactor notification badge to shared MVVM view

* Bage icons Images

* Narrow unread notification badge refactor scope

* Align unread badge MVVM pattern

* Reduce unread badge viewmodel duplication

* Document unread badge viewmodel props

* Remove legacy badge classes from shared view

* Update css for knocked door

* Update thread badge e2e selector

* Update read receipt badge e2e selectors
2026-06-15 10:20:27 +00:00
rbondesson 8a21fdb127 Move the AutoHideScrollbar to shared components (#33777)
* First version of shared component

* Refactor as a functional component

* Add unit tests and more documentation

* Fix problem where wrappedRef was used by parent before assignment was performed.

* Use the shared component in app/web

* Clean up unused styling

* Added scrollbar-gutters as default styling in shared component

* Make sure the legacy mx_AutoHideScrollbar is set in app/web

* Updated snapshots

* Removing default style, scrollbar-gutter: stable;

* Updated snapshots

* useRef on wrapperRef to avoid loop in rendering

* scrollbar-width does not propagate

* Add AutoHideScrollbar to RoomListView

* Fix Prettier issue

* Updated snapshots

* Updated snapshot after merge

* Fix Sonar issue
2026-06-11 07:08:24 +00:00
David Baker adedbe3206 snapshots 2026-06-09 11:10:16 +01:00
David Baker 6a40729137 Add tests for usePresence
and move the slightly weird test about it working when no member is linked
onto the hook test which is what it's actually trying to test.
2026-06-08 19:08:50 +01:00
David Baker 07974c7747 Move tooltip test up to PresenceIconView 2026-06-08 18:14:31 +01:00
David Baker d6a028da25 update snapshot 2026-06-08 11:23:27 +01:00
David Baker 2fa09e2939 Remove usage of the size prop.
You can have it any size you like as long as it's 8px.
2026-06-08 10:09:51 +01:00
David Baker 5ab5fa1e04 Limit width of the display name in user menu (#33746)
* Limit width of the display name in user menu

Fixes https://github.com/element-hq/element-web/issues/33726

* Change js-sdk moduleNameMapper to apps/web (#33734)

Turns out the pnpm link has to be set to apps/web to actually work, so update the moduleNameMapper to look there too.

* update screenshots

* Update snapshot

* Update other snapshots

* Snapshot

* More snapshots
2026-06-05 09:49:28 +00:00
David Baker bb07f84e41 Add user status on user profile icon (#33653)
* Add user status on user profile icon

Currently unstyled & no tests

* Style the user status icon

* Update snapshot

for avatar wrapper

* More snapshot updates

* add if braces

* Split out user status functions

to avoid circular dep which has the weird effect of just breaking
jest's mocking.

* type imports

* Update imports

* Update snapshot

* Tests

* baseline image

* Just snapshot the component itself

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2026-06-04 15:15:19 +00:00
Michael Telatynski 486fa57b68 [Labs] Sign in with QR on new EW using generated QR for MSC4108 v2024 (#33184)
* PoC Sign in with QR on new EW using generated QR for MSC4108 v2024

* Revert package.json changes

* Prettier

* Fix i18n

* Tidy up

* Remove unused state variable

* Iterate tests

* Partial revert

* Iterate

* Wire up qr_login route

* Iterate UI

* Fix React dev mode double rendering issue

* Fix react key warning

* Hide flow header on login

* Re-roll qr code on channel expiry

* Switch to AbortSignal

* Improve auto-retry QR UX

* Ensure we only show sign in with QR button if enabled

* XXX: enable labs flag on Netlify builds

* Tweak QR code sizing

* Move qr login flow into a dialog to match designs

* Fix null deviceId

* Remove duplicate log

* Iterate

* Fix tests

* Fix types

* Fix tests

* Fix tests

* Make Netlify more useful

* Make Netlify more useful v2

* Update copy

* Refactor QR link flow to use new SDK methods

Requires https://github.com/matrix-org/matrix-js-sdk/pull/5283
For element-hq/wat-internal#188
Split out from https://github.com/element-hq/element-web/pull/33184

* Link to js-sdk branch

* Update tests

* Simplify

* Revert js-sdk linking

* Iterate

* Iterate

* Refactor to handle most of the TODOs

* Remove unused code

* Remove unused code

* Use js-sdk isSignInWithQRAvailable API to simplify code

* Restore app-test.ts

* Improve coverage

* Improve coverage

* Remove unused prop/state

* Iterate

* Fix tests

* Iterate

* Tests

* Handle TODOs

* Docs

* Remove redundant call to crossSignDevice()

* Workaround to remove training slash on the serverName before auto-discovery

* Revert "Workaround to remove training slash on the serverName before auto-discovery"

This reverts commit 0335a8fdd1.

* setLoggedIn not to be used with OIDC flows as it clears storage

as per docs on setLoggedIn we should use restoreSessionFromStorage

* Don't show the security_code_prompt unconditionally(i.e. for the web logging in mobile flow)

* Update LoginWithQRFlow-test.tsx.snap

* Update MatrixChat-test from setLoggedInSpy to restoreSessionSpy

* Add todo for server switch

* Add todo about handling base URL or server name

* Handle server name or base URL being returned

* Format

* Fix loading state height

* Handle the homeserver URL differing during QR code login

* Comments

* Comments

* Register OIDC client ID after homeserver swap

* Make QrLoginDialog async to minimise the impact on bundle size

* Handle unsupported HS earlier in the flow

* Iterate

* Delint

* Fix test

* Discard changes to apps/web/element.io/develop/config.json

---------

Co-authored-by: Hugh Nimmo-Smith <hughns@element.io>
Co-authored-by: David Langley <langley.dave@gmail.com>
2026-06-04 13:50:17 +00:00
Florian Duros 47f76c7d7a Update compound web and design tokens (#33698)
* chore: update comppound web and design tokens

* test: update snapshots

* test: update screenshots
2026-06-03 11:51:58 +00:00
David Langley 2c6461db17 Remove resizer from fullscreen modules(like multiroom) (#33684)
* Fix multiroom with new resizer

* Fix multiroom with new resizer

* Add jest test

* Add if/else and comments
2026-06-02 14:10:46 +00:00
Andy Balaam 65b0ac8c28 Support MSC4287 m.key_backup stable prefix as well as the unstable prefix (#33034)
* Support MSC4287 m.key_backup stable prefix as well as the unstable prefix

* Update comments to avoid talking about EX since this now applies more widely

* Make comments about m.key_backup more helpful

* Improve comment on recheckBackupDisabled

* Explicitly say backup is disabled only if enabled is actually set to false
2026-06-02 10:25:03 +00:00
Zack 1c04814c2b Refactor EventPreview to shared MVVM (#33646)
* Refactor EventPreview to shared MVVM

* Fix EventPreviewView export formatting

* Snapshots images for stories

* Deduplicate event preview formatting

* Handle event preview update failures

* Coalesce event preview updates

* Wait for event preview test expectations
2026-06-02 08:36:28 +00:00
Hubert Chathi 2bd5224dbe Apply new design and display logic to logout confirmation dialog (#33426)
* apply new design to logout dialog

* factor out check for other verified devices

* only show recovery warning when user has no other verified devices

* fix playwright tests

* tweak style to better match design

* another playwright test fix

* fix playwright

* Look for the remove button within the dialog

* Use testid to locate 'Remove this device' button

* move rendering to sub-components, rather than embedded functions

* use <Type> element

* use <Text> for the <a> element

---------

Co-authored-by: Andy Balaam <andy.balaam@matrix.org>
2026-06-02 03:08:18 +00:00
rbondesson fc23fcad47 Make shared-components tiles render identically outside Element Web - #4 (#33622)
* Use shared MessageTimestampView in edit history

* Move timestamp typography into shared component

* Updated snapshots

* Update comments after clean up

* Fixed sonar issue and added tests for improved coverage

* Fix Prettier issue

* Fix font-size on timestamps and toolbar button sizing

* Updated snapshots

* Updated Storybook screenshots

* Updated screenshots

* Clean up app/web unused/redundant styling for disambiguated profile

* Fix merge error

* Fixes after merge

* Fixes after merge
2026-06-01 05:47:59 +00:00
Zack 92383e3f50 Removing the wierd blue border color when focused + adjusted the bord… (#33630)
* Removing the wierd blue border color when focused + adjusted the border to show when squeezed at the end of border

* Update snapshots

* Update edited code block screenshot
2026-05-29 09:00:23 +00:00
Zack 34c388f760 Refactor E2eMessageSharedIcon to MVVM (#33544)
* Refactor E2eMessageSharedIcon to MVVM

* FIx Prettier and i18n

* Fix prettier

* Remove legacy E2eMessageSharedIcon component

* Cover E2eMessageSharedIcon MVVM updates

* Fix prettier

* Update apps/web/src/components/views/rooms/EventTile.tsx

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

* Skip unknown E2E shared icon visual

* Track E2E shared icon listener disposal

* Remove E2E shared icon room state guard

* Remove E2E shared icon client resync

* Use built-in disposables for shared icon VM

* Update shared icon VM without React key

---------

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
2026-05-28 08:01:39 +00:00
David Baker 2b4f983bb7 Increase timeout on BeaconViewDialog (#33607)
standard 1s doesn't seem long enough to avoid flakes
2026-05-26 17:52:04 +00:00
David Baker d533522663 Fix misaligned display name on desktop (#33623)
* Fix misaligned display name on desktop

Move the usermenu custom class to the whole thing, not just the button

* Update comment

* Update snapshot
2026-05-26 14:02:01 +00:00
Michael Telatynski f0342ddbd2 Add support for m.recent_emoji account data event (#33172)
* Improve types in AccountSettingsHandler

* Add support for `m.recent_emoji` account data event

Maintains read-compatibility with `io.element.recent_emoji`

* Iterate

* Make ts happier

* Improve coverage

* Improve coverage

* Improve coverage
2026-05-26 08:30:02 +00:00
Zack 384db1faaf Move E2ePadlock icon colors to CSS module (#33577)
* Move E2ePadlock icon colors to CSS module

* update react id labelling

* Update E2eMessageSharedIcon snapshots
2026-05-26 07:13:15 +00:00
rbondesson 40fbe1fae1 Stabilise flaky QR code rendering tests (#33593)
* Stabilise QR code rendering tests

* Extract QR mocking code to test-utils
2026-05-25 07:10:10 +00:00
David Baker 5a1d7385f8 Hopefully bust another flake (#33584)
I guess this sometimes takes more than a second (!?)
2026-05-22 16:00:57 +00:00
rbondesson 7285293b7b Make shared-components tiles render identically outside Element Web - # 3 (#33529)
* Clean up unused app/web styling for ReactionsRow

* Align shared Storybook theme root with app/web

* Move PlayPauseButton styling into shared component

* Use closest compound icon color for all crypto events in both app/web and Storybook

* Updated snapshot

* Experimental strict color matching threshold for playwright

* Experimental color matching threshold for playwright

* Revert color matching threshold for playwright to the default value

* Updated screenshots after matching icon size in audio player with other media body components

* Changed icon color for crypto events accroding to recommendation from the design team

* Use --cpd-color-icon-primary for all crypto events

* Updated snapshots and screenshots after icon color changes

* Updated app/web snapshots and screenshots
2026-05-22 16:00:38 +00:00
rbondesson 53fba7ff71 Mocking PasswordScorer.scorePassword to reduce risk of flakiness (#33591)
Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2026-05-22 15:29:55 +00:00
rbondesson 80024991aa Stabilise React useId values in DOM snapshots in element-web (#33579)
* Stabilise React useId values in DOM snapshots - app/web

* Stabilise React useId values in DOM snapshots - shared components

* Update additional snapshots

* Added comments and changed replace pattern to 'react-use-id-N'
2026-05-21 13:30:05 +01:00
Zack 223a861535 Move E2ePadlock to shared components (#33538)
* Move E2ePadlock to shared components

* Add storybook images

* Move translation to shared components

* Fix E2ePadlock story accessibility

* Update E2eMessageSharedIcon test for padlock role
2026-05-20 13:20:17 +00:00
David Baker b5aa339243 Increase timeout on wysiwig test (#33540)
To hopefully make it not flake
2026-05-20 10:54:59 +00:00
Florian Duros 4b6e0b7ebf Fix pinned message banner disappearing when a pinned message event is unkown (#33534)
* fix: remove unknown event when fetching pinned message events

* test: update tsts
2026-05-20 09:40:09 +00:00
David Baker 0140563b64 Tweak new user menu design (#33444)
* Tweak new user menu design

* Update screenshots

* More screenshots

* Add story with no avatar

* add story to test

* Expand the menu so it actually shows what it's supposed to show

* Use the open parameter

which is the param to open the menu

* snapshot

* Add test for normal open menu version

* Move menu to the right of the avatar

and make it appear on top of the display name

* Fix user menu layout

* screenshots

* snapshot

* screenshots

* more screenshots

* Shift toasts to the left slightly

So they completely cover the display name of the user menu when
it's expanded. Also down slightly so they're level with the user menu.

* Tweak toast border radius & position

to match & sit on top of the user menu

* Close toasts in cider tests

* Only close the toast if it's actually there

* Fix some toasts to be dismissed & update screenshots

more to come though

* Make closeKeyStorageToast actually optional

* Fix some more toasts & races

* Screenshots again again (again)

* More screenshots

* Convert to rejectToast

* Fix toast rejectors to not wait and update screenshots

* Apparently 1ms is not long enough
2026-05-19 13:10:14 +00:00
Will Hunt 02b6520f09 Module API for adding new file upload mechanisms (#33355)
* Initial reword of upload to MVVM.

* Update tests

* More incremental improvements

* Refactor tests to use helper method for composer uploads.

* Add drag and drop tests

* lint

* Add commentary

* fixup test

* More precise selector

* Retarget uploads

* lint

* fixup

* one more type

* update snap

* Fixup composerUploadFiles

* fix import

* lint

* Copy and paste fixes too

* Add tests for pasting

* Add tests for pasting files.

* Remove redundant fn

* rm comment

* tidy up

* Test cleanup

* More clean up

* another fix

* Begin fleshing out

* Park changes

* More stuff

* Use condensed version

* Cleanup tests

* more cleaning

* last bity

* Add a test for the composer

* Park up changes

* Rewrite Measured to be a functional component

* Add tests to cover narrow viewports

* lint

* breakpoint is optional

* Cleanup

* Support narrow mode

* fixup

* begone

* Provide default value

* add label

* fixup test

* update copyright

* cleanup

* Be a bit more lazy with FileDropTarget

* remove a debug statement

* Fixup

* fix two snaps

* Update screenshot

* and the other one

* Update snaps

* unfake CIDER

* update screens again

* remove extra test

* Undo accidental snapshots

* Bit of tidyup

* fixup

* even more tidyup

* may drag and drop file

* tidy up again

* snap snap snap

* Use load to make sonarQube happy

* Bunch of refactors

* More cleanup

* cleanup debug code

* tweaks

* remove a test we no longer need

* make it happy

* fix import

* fixup

* Update snaps

* typo

* one off

* Add tests

* lint

* remove only

* Reduce screenshot scope

* fix snapshot usage

* cleanup
2026-05-18 21:41:38 +00:00
rbondesson 297ad9bb8d Make shared-components tiles render identically outside Element Web - # 2 (#33485)
* Adding correct layout/density attributes to unit tests

* Move app/web styling to FileBodyView

* Unify styling for MediaBody wrapped components

* Fix prettier issues

* Update app/web snapshots

* Wrap file download and audio loading states in MediaBody

* Revert the MediaBody for download buttons.

* Revert changes for MediaBody wrappers

* Updated snaphots for MediaBody components
2026-05-18 05:59:03 +00:00
rbondesson 7fe8cdafe0 Refactor EventTile using the MVVM pattern - #2 (#33489)
* Improve coverage

* Add view model unit tests to improve coverage

* Extract initial pure EventTile derived state helpers

* Extract EventTile derived state helpers

* Extract EventTile class state derivation

* Extract EventTile line class derivation

* Extract EventTile sender profile state

* Extract EventTile avatar member selection

* Extract EventTile avatar clickability state

* Extract EventTile sender profile mode

* Extract EventTile action bar visibility

* Extract EventTile timestamp visibility

* Extract EventTile timestamp selection

* Extract EventTile timestamp display state

* Extract ReplyChain timestamp visibility

* Extract EventTile footer display state

* Fix sonar issue
2026-05-18 05:36:13 +00:00
Zack 8400f56004 Fix edited reply quote collapse (#33487)
* Fix edited reply quote collapse

* Add regression test for edited reply quotes
2026-05-13 10:23:56 +00:00
rbondesson 97da3be67a Fix for message action bar visibility getting out of sync with the real UI state (#33445)
* Make sure action bar is not visible when using up/down arrows during editing

* Add a temporary mouse move listener to handle tooltips stealing onMouseLeave events

* Better naming, add comments and test

* Fix test that performs its own hover/pointer movement before clicking.

* Fix playwright test that actually displayed a message time stamp when hover state was stale

* Fixes after merge
2026-05-13 07:52:47 +00:00