1
0
mirror of https://github.com/element-hq/element-web.git synced 2025-07-31 19:44:30 +03:00

680 Commits

Author SHA1 Message Date
cc0ece9837 Implement the member list with virtuoso (#29869)
* implement basic scrolling and keyboard navigation

* Update focus style and improve keyboard navigation

* lint

* Use avatar tootltip for the title rather than the whole button

It's more performant and feels less glitchy than the button tooltip moving around when you scroll.

* lint

* Add tooltip for invite buttons active state

As we have for other icon based buttons in the right panel/app

* Fix location of scrollToIndex and add useCallback

* Improve voiceover experience

- As well as stylng cells, set the tabIndex(roving)
- Natively focus the div with .focus() so screen reader actually moves over the cells
- improve labels and roles

* Fix jest tests

* Add aria index/counts and remove repeating "Open" string in label

* update snapshot

* Add the rest of the keyboard navigation and handle the case when the list looses focus.

* lint and update snapshot

* lint

* Only focus first/lastFocsed cell if focus.currentTarget is the overall list.

So it isn't erroneously called during onClick of an item.

* Put back overscan and fix formatting

* Extract ListView out of MemberList

* lint and fix e2e test

* Update screenshot

It looks like it is slightly better center aligned in the new list, as if maybe it was 1 px to high with the old one.

* Fix default overscan value and add ListView tests

* Just leave the avatar as it was

* We removed the tooltip that showed power level. Removing string.

* Use key rather than index to track focus.

* Remove overscan, fix typos, fix scrollToItem logic

* Use listbox role for member list and correct position/count values to account for the separator

* Fix inadvertant scrolling of the timeline when using pageUp/pageDown

* Always set the roving tab index regardless of whether we are actually focused.

Fixes the issue of not being able to shift+t

* Add aria-hidden to items within the option to avoid the SR calling it a group.

Also

* Make sure there is a roving tab set if the last one has been removed from the list.

* Update snapshot
2025-07-31 15:49:53 +00:00
3f0dcaa64c Playwright Docker image updates (#30406)
* [create-pull-request] automated change

* [create-pull-request] automated change

* Bump playwright-common

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2025-07-31 10:23:44 +00:00
452996eacf Playwright: clean up after verification test, to deflake later tests (#30425) 2025-07-30 12:11:14 +00:00
ee120f2fa9 Use server name explicitly for via. (#30362)
* Use server name explicitly for via.

* lint
2025-07-29 17:40:56 +00:00
c98358cb26 Fix e2e shield being invisible in white mode for encrypted room (#30408)
* fix: e2e icon for encrypted room

* test(e2e): add screenshot for grey shield in encrypted room
2025-07-25 10:56:21 +00:00
ab26004c4c Change unencrypted and public pills to blue (#30399)
* feat: change unencrypted and public pill to blue

* test: update snapshots

* test(e2e): update screenshots
2025-07-24 14:52:59 +00:00
ba828b2194 [create-pull-request] automated change (#30394)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2025-07-24 10:02:19 +00:00
7bfb9818f6 Change color of public room icon (#30390)
* feat: change color of public room icon

* test: update room avatar snapshot

* test(e2E): update screenshots
2025-07-23 13:56:26 +00:00
6b40da5779 [create-pull-request] automated change (#30384)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2025-07-23 11:24:19 +00:00
774e0e8f7b Fix color of icon button with outline (#30361)
* fix: room list header button color

* fix: room member list invite button

* test: update room list search snapshot

* test(e2e): update screenshots
2025-07-22 14:11:13 +00:00
e7a772472e [create-pull-request] automated change (#30341)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2025-07-22 08:51:21 +00:00
31fb23a170 [create-pull-request] automated change (#30335)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2025-07-18 06:19:14 +00:00
084f447c6e [create-pull-request] automated change (#30331)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2025-07-17 06:19:13 +00:00
dc2060fc7b Fix flaky scrolling (#30329)
There are two potential problems here:
1. mouse.scroll returns before the scroll is completed
2. visibility check does not check if the element is actually in the
   viewport.

I've added a helper function to make it easier to scroll to the end of
an infinite list.
2025-07-16 15:10:05 +00:00
0e37fea9f5 [create-pull-request] automated change (#30325)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2025-07-16 06:18:29 +00:00
0fe275fbd2 [create-pull-request] automated change (#30316)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2025-07-15 06:20:27 +00:00
4bbcb8bb5d Initial structure for shared component views (#30216)
* 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 edc5e87056
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

https://github.com/rollup/rollup/issues/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 <florianduros@element.io>

* Add implements

Co-authored-by: Florian Duros <florianduros@element.io>

* Fix listener interface

* Add implements

Co-authored-by: Florian Duros <florianduros@element.io>

* 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 <florian.duros@ormaz.fr>
Co-authored-by: Florian Duros <florianduros@element.io>
2025-07-14 13:13:02 +00:00
8bb1b22d46 [create-pull-request] automated change (#30311)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2025-07-12 06:18:38 +00:00
e528f95b2e [create-pull-request] automated change (#30307)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2025-07-11 06:19:01 +00:00
a05ca97409 Fix e2e icon colour (#30299)
* fix: remove white background on e2e verification icon and put white on the checkmark

* test(e2e): add non regression tests

* chore: remove unused CSS mask
2025-07-10 13:50:18 +00:00
366eeb7d61 [create-pull-request] automated change (#30301)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2025-07-10 06:18:43 +00:00
31e6f15941 [create-pull-request] automated change (#30294)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2025-07-09 08:28:30 +00:00
df50a50741 [create-pull-request] automated change (#30269)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2025-07-08 13:23:10 +00:00
0f7e394487 [create-pull-request] automated change (#30218)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2025-07-07 10:39:39 +00:00
9f313fcc14 Add support for module message hint allowDownloadingMedia (#30252)
* Add support for allowDownloadingMedia

* Add tests.

* Allow downloading when no event is associated.

* fix lint

* Update module API

* Update lock file too

* force CI
2025-07-07 09:03:46 +00:00
1cb068a91e Fix e2e flakes in new room list (#30254)
* test: retry failing assertion in room list

* test: fix click on room not visible after scroll
2025-07-04 13:37:59 +00:00
5dd31685bb Rename the mobile_guide_app_variant config values to be clearer. (#30258)
* Fix the default mobile_guide links.

Whilst the script should update these if it fails these should link to Element X which is now the default app that we link out to from this page.

* Rename the mobile_guide_app_variant values to be clearer.

Also handle invalid config values by defaulting to Element X.

* Rename snapshots to match new app variant identifiers.
2025-07-04 12:27:30 +00:00
66d7c6a100 Fix release announcement test flake (#30250)
* chore: add `hideJumpToBottomButton` option to playwright screenshot

* test: hide jump to bottom button in release announcement test
2025-07-03 10:51:35 +00:00
90f4d34fbb Update the mobile_guide page to the new design and link out to Element X by default. (#30172)
* Reapply "Update the mobile_guide page to the new design. (#30006)" (#30104)

This reverts commit c51823db5e.

* Use Element X as the default mobile_guide_app_variant when omitted.

* Fix a build error on Windows.

Additionally revert "Remove unnecessary <%= require %> usages" and let webpack handle all of the assets (without a manual copy rule).

* Exclude mobile_guide from coverage gate

It has playwright tests

* Revert the re-introduction of <%= require %>

* Fix snapshot tests on mobile_guide.

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2025-07-03 08:28:07 +00:00
4a8b365bf8 Update playwright to v1.53.1 (#30205)
* Update playwright to v1.53.1

* Update snapshots

Presumably chrome's font rendering has changed slightly in the new major version

* Scroll until room list item is in view

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2025-06-27 13:46:20 +00:00
75d7a1d644 [create-pull-request] automated change (#30215)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2025-06-26 06:18:40 +00:00
434e58de52 [create-pull-request] automated change (#30207)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2025-06-25 06:17:36 +00:00
f707bb410e New room list: add context menu to room list item (#29952)
* chore: update compound-web

* chore: remove unused export

* feat: export content of more option menu

* feat: add context menu

* feat: add `showContextMenu` to vm

* feat: use context menu in new room list

* test: add tests for room list item

* test: fix room list test

* test: add `showContextMenu` test for `useRoomListItemViewModel`

* test: add e2e test for context menu

* chore: update compound

* test: update snapshots and e2e test

* fix: avoid icon blinking when we reopen the context menu

* test: add test for menu closing

* doc: remove useless tsdoc param

* chore: update `@vector-im/compound-web`

* refactor: remove manual focus

* test(e2e): fix focus after closing notification menu

* doc: remove useless jobs
2025-06-24 09:50:27 +00:00
52f836a0dd [create-pull-request] automated change (#30190)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2025-06-24 06:18:05 +00:00
c50000d124 Playwright Docker image updates (#29653)
* [create-pull-request] automated change

* Restart homeserver to clear MAS token cache

as commented

---------

Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2025-06-23 15:57:45 +00:00
0edaef3f7c Support for custom message components via Module API (#30074)
* Add new custom component api.

* Remove context menu, refactor

* fix types

* Add a test for custom modules.

* tidy

* Rewrite for new API

* Update tests

* lint

* Allow passing in props to original component

* Add hinting

* Update tests to be complete

* lint a bit more

* update docstring

* update @element-hq/element-web-module-api to 1.1.0

* fix types

* updates

* hide jump to bottom button that was causing flakes

* lint

* lint

* Use module matrix event interface instead.

* update to new module sdk

* adapt custom module sample

* Issues caught by Sonar

* lint

* fix issues

* make the comment make sense

* fix import
2025-06-23 11:55:22 +00:00
8705efec40 Use stale-screenshot-reporter from playwright-common (#30175)
* Use stale-screenshot-reporter from playwright-common

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2025-06-20 12:27:40 +00:00
af984c0e80 Prompt users to set up recovery (#30075)
* Show indicator in settings dialog when user doesn't have recovery set up

* Update settings headers to use red dot for recommended settings

* update recovery setup toast and remember if the user dismisses it

* update playwright snapshots

* use typed event emitters

* reverse logic for the account data flag

* fix comment and type
2025-06-18 16:20:17 +00:00
9d1455e4dd Prevent skipping forced verification after logging in with OIDC (#30141)
Pass the freshLogin parameter along to doSetLoggedIn when restoring a session,
instead of hard-coding it to always be false.
2025-06-17 10:31:08 +00:00
1e3fd9d3aa Update IconButton colors (#30124)
* chore: update `@vector-im/compound-web` to 8.0.0

* refactor(IconButton): use `kind="secondary"` instead of `subtleBackground` props

* test: update snapshots

* fix: force color on room header toggle

* fix: TAC button color

* test(e2e): update release announcement screenshot
2025-06-13 08:28:43 +00:00
6f0d288c1d Use nav for new room list and label sections (#30134)
* Use nav for new room list and label sections

The old room list had a nav element but it was missed in the new one,
so add it and albel the sections. Also remove the test ID and use
this instead.

* Update snapshots

* Use the function we define above
2025-06-12 15:42:30 +00:00
389a0e689e New room list: filter list can be collapsed (#29992)
* feat: add new hook to check if a node is visible

* feat: filters in new room list can be collapsed

* feat: add animation to filter list

* feat: hide chevron when list fit on one line

* fix: use correct label for expand button

* test: update room list panel snapshots

* test: add tests for useIsNodeVisible

* chore: update i18n

* test: add tests for primary filters

* test(e2e): update existing screenshots

* test(e2e): update primary filter tests

* chore: typo in css file

* refactor: replace ternary by if in filter condition

* feat: compute filter height instead of hardcoded value

* fix: floor floating computation on filter

* refactor: move hooks to dedicated files

* test: update tests

* feat: rework collapse feature

* test: remove room list panel snapshot

* test: update room list primary filter tests

* test(e2e): update screenshots

* test(e2e): update screenshots

* test(e2e): fix favourite filter in scroll behaviour test

* fix: accessibility order when tabbing
2025-06-11 13:49:20 +00:00
c51823db5e Revert "Update the mobile_guide page to the new design. (#30006)" (#30104) 2025-06-10 14:01:27 +01:00
0e748710cd Update the mobile_guide page to the new design. (#30006)
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2025-06-10 13:29:04 +01:00
a333856c50 Implement MSC4155: Invite filtering (#29603)
* Add settings for MSC4155

* copyright

* Tweak to not use js-sdk

* Update for latest MSC

* Various tidyups

* Move tab

* i18n

* update .snap

* mvvm

* lint

* add header

* Remove capability check

* fix

* Rewrite to use Settings

* lint

* lint

* fix test

* Tweaks

* lint

* revert copyright

* update screenshot

* cleanup
2025-06-10 10:47:33 +00:00
6103f7e3b4 Add low priority avatar decoration to room tile (#30065)
* Add avatar decoration for low priority rooms

* Write tests

* Remove unnecesasry step in test

* Make the vm expose which decoration to render

* Fix jest test

* Fix broken e2e test
2025-06-10 08:15:38 +00:00
7eb16b3361 AccessSecretStorageDialog: fix inability to enter recovery key (#30090)
* BaseDialog: fix documentation, and make `onFinished` optional

Since `onFinished` isn't used if `hasCancel` is false, it's a bit silly to make
it mandatory.

* AccessSecretStorageDialog: fix inability to enter recovery key

Wrap AccessSecretStorageDialog in a `BaseDialog`. The main thing this achieves
is a `FocusLock`.

* playwright: factor out helper for verification

We have two copies of the same code, and we're about to add a third...

* playwright: test for verifying from Settings

* Add a unit test for BaseDialog
2025-06-06 11:21:29 +00:00
140afea791 New room list: move message preview in user settings (#30023)
* feat: move message preview settings to user settings

* test: update tests

* test(e2e): update preference screenshots

* test(e2e): update room list tests

* fix: display message preview settings only for new room list

* test(e2e): display all preference settings in screenshot

* test: update snapshot
2025-06-05 14:14:09 +00:00
311c038fe1 New room list: change room options icon (#30029)
* feat: change sort icon

* test(e2e): update screenshots

* test: update snapshots
2025-06-05 09:08:15 +00:00
2b1a4e007c Low priority menu item should be a toggle (#30071)
* Use toggle on low priority menu item

* Fix broken tests
2025-06-04 17:51:58 +00:00