Commit Graph

48 Commits

Author SHA1 Message Date
byteplow
cdedcc0b5a Adds tooltip for compose menu (#31122)
* Adds tooltip for compose menu button

* fix tests

* prettier

* tweak aria attributes
2025-11-21 16:42:44 +00:00
David Langley
6562f5ac20 New Room List: Change the order of filters to match those on mobile (#30905)
* Change the order of filters to match those on mobile

* Fix jest test

* Update screenshots to include expanded and collapsed list of filters.

* lint
2025-09-30 10:35:24 +00:00
David Langley
e0df420ade Only highlight/focus the item after scrolling has finished (#30888) 2025-09-30 09:55:32 +00:00
David Langley
3432613195 Use the new room list by default (#30640)
* Default to new room list and enforce in config for app and develop

* Update jest tests

* Update LandmarkNavigation and e2e test

* Update viewRoomByName helper

* lint

* Update Add -> New Room flow

Keep legacy viewRoomByName until we delete the olds tests.

* Update e2e test to use Add -> Start Chat

* Update screenshots

* Fix viewRoomByName, can't use option as it contains more that just the room name. Using title which should be exact.

* Fix knocking tests

* fix layout.spec.ts and pstn.spec

* timeline snapshots

* Fix spotlight.spec

* TAC spaces and media preview settings

* Fix more screenshots and mark as unread tests

* Fix leftpanel test

* Bugfix for knocking use case. We should check EffectiveMembership when remove rooms from the new room list, so that knocking is handled

* Fix openCreateRoomDialog to new room list specifics to fix create-knock-room.spec.ts

* lint

* Fix Landmark navigation from left panel search to the next landmark

* lint

* Update window-12px-linux.png

* Update apps-drawer-linux.png

* Update sliding sync e2e tests

* Update some screenshots

* Revert change to the space create screenshot

* Use actual screenshot

as focused elements are different when generated locally

* Fix test selectors

* Morfe test screenshot selector / update

* Add test for landmark navigation

* Replace screenshots

* Fix another test that just got added an hour ago

* Not sure why this was changed, doesn't seem necessary

* Disambiguate selector

* Another screenshot that's now changed in width by 1px

* Revert changes to config files

It's being turned on by default so these are unnecessary

* Convert read.unread assertions to new room list

removing support for checking for activity in assertUnread which was
unused.

* Update room list order tests

that feel a bit like they ought to be in room-list rather than read-receipts but whatever

* Fix room titles in read receipts test

---------

Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2025-09-16 08:13:05 +00:00
David Langley
dba4ca26e8 Add axe compliance for new room list (#30700)
* Add tests for axe violations for the new room list

* axe doesn't like a ul/li with roles listbox/option. Changing to div/button as we have elsewhere like RoomListitemView.

* Fix RoomListPrimaryFilters test

* Justify the items in the primary filter container

to get the dropdown button on the right again

* Update snapshot

* Make the room list itself focusable

As the comment said, there was no real reason it needed to be, except
that there was because of axe. Probably having the children focusable
would be better, but Virtuoso wraps them in more divs which doesn't
satisfy axe's requirements since those inner divs are not the scrollable
ones. I can't see a better option than this right now.

* Update snapshot

---------

Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2025-09-09 16:54:13 +00:00
David Langley
a1f56ebbf2 Deflake test (#30634) 2025-08-27 13:17:12 +00:00
David Langley
c842b615db Move the room list to the new ListView(backed by react-virtuoso) (#30515)
* Move Room List to ListView

- Also remove Space/Enter handing from keyboard navigation we can just leave the default behaviour of those keys and handle via onClick

* Update rooms when the primary filter changes

Otherwise when changing spaces, the filter does not reset until the next update to the RVS is made.

* Fix stickyRow/scrollIntoView when switiching space or changing filters

- Also remove the rest of space/enter keyboard handling use

* Remove the rest of space/enter keyboard handling use

* Remove useCombinedRef and add @radix-ui/react-compose-refs as we already depend on it

- Also remove eact-virtualized dep

* Update RoomList unit test

* Update snapshots and unit tests

* Fix e2e tests

* Remove react-virtualized from tests

* Fix e2e flake

* Update more screenshots

* Fix e2e test case where were should scroll to the top when the active room is no longer in the list

* Move from gitpkg to package-patch

* Update to latest react virtuoso release/api.

Also pass spaceId to the room list and scroll the activeIndex into view when spaceId or primaryFilter change.

* Use listbox/option roles to improve ScreenReader experience

* Change onKeyDown e.stopPropogation to cover context menu

* lint

* Remove unneeded exposure of the listView ref

Also move scrollIntoViewOnChange to useCallback

* Update unit test and snapshot

* Fix e2e tests and update screenshots

* Fix unit test and snapshot

* Update more unit tests

* Fix keyboard shortcuts and e2e test

* Fix another e2e and unit test

* lint

* Improve the naming for RoomResult and the documentation on it's fields meaning.

Also update the login in RoomList to check for any change in filters, this is a bit more future proof for when we introduce multi select than using activePrimaryFilter.

* Put back and fix landmark tests

* Fix test import

* Add comment regarding context object getting rendered.

* onKeyDown should be optional

* Use SpaceKey type on RoomResult

* lint
2025-08-21 14:43:40 +00:00
Florian Duros
475504d33b New room list: change icon and label of menu item for to start a DM (#30470)
* feat: change `New message` to `Start chat` and change icon

* feat: update the room list empty states

* test: update existing tests

* test(e2e): update playwright tests
2025-08-04 12:42:05 +00:00
R Midhun Suresh
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
Florian Duros
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
renovate[bot]
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
Florian Duros
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
David Baker
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
Florian Duros
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
R Midhun Suresh
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
Florian Duros
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
Florian Duros
5d2d4947f4 New room list: move secondary filters into primary filters (#29972)
* feat: move secondary filters into primary filters in vm

* test: update room list view model tests

* feat: remove secondary filter menu

* test: update and remove secondary filter component tests

* feat: update i18n

* test: update remaining tests

* test(e2e): update screenshots and tests

* feat: add new cases for empty room list

* test(e2e): add more tests for empty room list for new primary filters
2025-05-20 14:44:29 +00:00
Florian Duros
b56b0f2bd0 New room list: rework spacing of room list item (#29965)
* feat: rework spacing of room list item

* test: update snapshot

* test(e2e): regenerate room list panel screenshots

* test(e2e): regenerate room list screenshots

* test(e2e): update filter screenshot
2025-05-16 12:29:52 +00:00
David Baker
1b48269db5 Add room list sorting (#29951)
* Add room list sorting

* Prettier

* Unit test

* Playwright test

* Lint

* Use released compound

* No tooltip wrapper needed
2025-05-15 08:27:33 +00:00
David Langley
69c1a8cd1c Don't use the minimised width(68px) on the new room list (#29778)
* Don't toggle to the minimised left bar size.

* Don't re-style old room list when at the minimum size

* Only apply larger minimised with on new room list

* Don't tell child views we are minimised for the new room list

* move comment to the correct place

* address PR comments

* Don't wrap search text and add truncation down to a minimum of 50px

* Put min-width on the button so that we don't have to hardcode the 50px

* Keep the flex display, shrink and truncate just the search text and keep the shortcut

* Update snapshots

* Add comment for magic value

* Make inner search text a span

* Add e2e test for smallscreen to test responsiveness

* Update snapshots

* Forcing an empty commit to fix PR

* Change minWidth to 224
2025-05-14 17:21:27 +00:00
Florian Duros
74fbd892a1 New room list: add keyboard navigation support (#29805)
* feat: support up/down arrow navigation in the new room list

* feat: support tabbing in the new room list

* test: update snapshots

* test(e2e): fix room list test

* test(new room list): add landmark navigation test

* test(e2e): update screenshot test

* test: add test to `RoomListItemView`

* test(e2e): add keyboard navigation tests

* refactor: rename `setIsHover` on `setIsHoverWithDelay`
2025-05-06 16:09:23 +00:00
R Midhun Suresh
6ba21dafa7 New Room List: Prevent old tombstoned rooms from appearing in the list (#29881)
* Write failing playwright test

Basically when someone changes their name, any old tombstoned rooms that
were previously hidden would suddenly show up in the list.

* Split addRoom into two methods

- `reInsertRoom` that re-inserts a room that is already known by the skiplist.
- `addNewRoom` to add new rooms

The idea is that sometimes you only want to re-insert to noop, eg: when
you get an event in an old room that was upgraded.

* Use new methods in the RLS

Only use `addNewRoom` when absolutely necessary. Most events should
instead use `reInsertRoom` which will noop when the room isn't already
known by the skiplist.

* Fix broken tests

* Add new test

* Fix playwright test
2025-05-06 15:57:13 +00:00
David Baker
4f4f391959 Add secondary filters to the new room list (#29818)
* Secondary filters

* Update snapshots

* Fix imports

* Update screenshots

* Add unit test

* Imports

* Prettier

* Add playwright test
2025-04-30 09:12:56 +00:00
David Baker
714f8f40dd Add message preview support to the new room list (#29784)
* Add message preview support to the new room list

 * Support showing message previews in the room list items
 * Add the secondary filters bar with the '...' menu, containing
   just the option for message previews for now
 * Change message preview toggle hook to update when setting is updated

* Use new compund release

* Unused i18n keys

* Unused imports

* Fix test & update snapshot

* Fix more snapshots

* Fix test

Split into two tests that test setting & updating

* Type import

* Snapshots

* Remove unnecessary Flex container

and update screenshots as the room list has got shorter from the added bar

* More snapshots & screenshots

* More snapshots

* Add test and remove active filter that's not done yet

* Update snapshots & screenshots again

* Other screenshot

* Add more tests

* Fix syntax

* Fix tests

* Use setter directly

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix CSS

* Remopve filter button css for now

* Update to remove forwardRef

* Add comment on why lack of TypedEventEmitter

* snapshots again

* Screenshots again

* Use original screenshots, maybe they'll work now

* Add comment

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2025-04-24 15:03:39 +00:00
Florian Duros
5933f50930 New room list: fix missing/incorrect notification decoration (#29796)
* fix: recompute notification when room change in room list item vm

* test: add use case when room list change

* test(e2e): add screenshot to unread filter test
2025-04-22 13:21:50 +00:00
Florian Duros
da6ac36f11 New room list: add partial keyboard shortcuts support (#29783)
* feat: add support to `Action.ViewRoomDelta`

* test: add tests for support of `Action.ViewRoomDelta`

* test(e2e): add tests for shortcuts

* doc: improve comments in `useRoomListNavigation`
2025-04-22 08:31:12 +00:00
Florian Duros
07d5a72f26 New room list: video room and video call decoration (#29693)
* feat: add video call and EC call to room list item vm

* feat: add video call notification decoration to notification decoration component

* feat: add video call support to room list item view

* feat: add new RoomAvatarView component

* feat: deprecate `DecoratedRoomAvatar`

* feat: use `RoomAvatarView` in room list item

* feat: allow custom class for `RoomAvatar`

* test: update notification decoration

* test: update room list item view

* test: update room list snapshot

* test: add tests for room avatar vm

* test: add tests for room avatar view

* test(e2e): update snapshots

* fix: video room creation rights

* test: e2e add test for public and video room
2025-04-14 09:27:43 +00:00
R Midhun Suresh
149b3b1049 RoomListStore: Support specific sorting requirements for muted rooms (#29665)
* Sort muted rooms to the bottom of the room list

* Re-insert room on mute/unmute

* Write tests

* Fix broken playwright test

Muted rooms are at the bottom, so we need to scroll.
2025-04-03 12:56:00 +00:00
Florian Duros
817d7b78b8 New room list: add notification options menu (#29639)
* feat: add `utils.hasAccessToNotificationMenu`

* feat(room list item view model): use `hasAccessToNotificationMenu` to compute `showHoverMenu`

* feat(room list item menu view model): add notification options menu attributes

* feat(room list item menu view): add notification options

* test: add tests for `utils.hasAccessToNotificationMenu`

* test(room list item view model): add test for `showHoverMenu`

* test(room list item menu view model): add tests for new attributes

* test(room list item menu view): add tests for notification options menu

* chore: update i18n

* test(e2e): update screenshots

* test(e2e): add tests for notification options menu
2025-04-02 12:30:27 +00:00
R Midhun Suresh
55f1c27184 Room List: Scroll to top of the list when active room is not in the list (#29650)
* Scroll to top when active room is not in list

So that when filters are applied and the active room is not in the list
anymore, the list is scrolled to the top.

* Write test
2025-04-02 10:15:24 +00:00
Florian Duros
d090499329 test(e2e room list): fix flaky test of activity decoration (#29600) 2025-03-27 09:23:06 +00:00
Florian Duros
bbd798ef36 New room list: add notification decoration (#29552)
* chore: update @compound-web

* feat(notification decoration): add NotificationDecoration component

* feat(room list item): get notification state in view model

* feat(room list item): use notification decoration in RoomListItemView

* test(notification decoration): add tests

* test(room list item view model): add a11yLabel tests

* test(room list item): update tests

* test(e2e): add decoration tests
2025-03-26 13:32:02 +00:00
R Midhun Suresh
690d623dcf New Room List: Move tests that are in the wrong location (#29584)
* Move test to room-list-filter-sort.spec.ts

This test should reside with all the other filter related tests.

* Move sorting tests out of filter describe block

These two tests somehow ended up in the wrong block!

* Fix lint
2025-03-25 12:18:58 +00:00
R Midhun Suresh
0dc295e3b8 RoomListStore: Unread filter should only filter rooms having unread counts (#29555)
* Use `hasUnreadCount` instead of `isUnread`

* Fix broken test

* Write test
2025-03-21 08:28:00 +00:00
Florian Duros
3587161a2c New room list: add selection decoration (#29531)
* fix(room list): remove 1px extra padding

* feat(room list): add selection decoration to room list item and scroll list to this element

* test(room list item): add is selected test

* test(room list): update snapshot

* test(e2e): add test to keep the room list item visible

* test(e2e): update snapshots
2025-03-19 08:39:12 +00:00
Florian Duros
7de54a385e New room list: add empty state (#29512)
* refactor: extract room creation and right verification

* refactor: update `RoomListHeaderViewModel` to use utils

* feat(room list filter): add filter key to `PrimaryFilter` model

* feat(room list filter): return active primary filter

* feat(room list): add create room action and rights verification

* test: update room list tests

* feat(empty room list): add empty room list

* test(empty room list): add empty room list tests

* feat(room list): use empty room list in `RoomListView`

* test(room list panel): update tests

* test(e2e): add e2e tests for empty room list

* test(e2e): update room list header snapshot
2025-03-18 10:02:33 +00:00
Florian Duros
f3dbe81ef4 New room list: add more options menu on room list item (#29445)
* refactor(room list item): rename `RoomListCell` into `RoomListItemView`

* refactor(room list item): move open room action to new room list item view model

* feat(hover menu): add `hasAccessToOptionsMenu`

* feat(hover menu): add to `RoomListItemViewModel` the condition to display or not the hover menu

* feat(hover menu): add view model for the hover menu

* feat(hover menu): add hover menu view

* feat(hover menu): add hover menu to room list item

* feat(hover menu): update i18n

* test(view model list item): update test and add test to `showHoverMenu`

* test(room list): update snapshot

* test(room list item menu): add tests for view model

* test(room list item menu): add tests for view

* test(room list item): add tests

* test(e2e): add tests for more options menu

* chore: update compound web

* test(e2e): fix typo
2025-03-14 16:22:45 +00:00
Florian Duros
20d8abf7c2 New room list: add primary filters (#29481)
* feat(room filter): add component for the primary filters

* feat(room filter): add filter component to room list view

* test(room filter): add tests to primary filters

* test: update snapshots

* test(e2e): update snapshots

* test(e2e): add tests for primary filters

* refactor: change aria-label of primary filters
2025-03-13 17:29:57 +00:00
Florian Duros
90cc44b340 New room list: basic flat list (#29368)
* chore: make the room list panel a flexbox

* feat(new room list): add `RoomListCell` component

* feat(new room list): add virtualized `RoomList` component

* feat(new room list): add `RoomListView` component

* feat(new room list): use `RoomListView` in `RoomListPanel`

* test(new room list): add test for room cell

* test(new room list): update room list panel tests

* test(new room list): add test to virtualized room list

* test(e2e): add room list tests

* test(e2e): update room panel tests
2025-03-06 10:01:55 +00:00
Florian Duros
0997e0a747 refactor: rename RoomListView as RoomListPanel (#29361) 2025-02-26 11:14:04 +00:00
Florian Duros
f95218e2b7 New room list: add space menu in room header (#29352)
* feat(new room list): add space menu in view model

* test(new room list): add space menu in view model

* feat(new room list): add space menu in room list header

* chore: update i18n

* test(new room list): add tests for space menu

* test(new room list): update room list tests

* test(e2e): add tests for space menu
2025-02-25 14:06:01 +00:00
Florian Duros
7d94fa9b03 New room list: add compose menu for spaces in header (#29347)
* feat(new room list): add compose menu in header for spaces

* test(new room list): add tests for space

* test(e2e new room list): update space test

* chore: formatting and reuse type var
2025-02-24 15:51:50 +00:00
Florian Duros
fb57924350 First step to add header to new room list (#29320)
* feat: create new header

* test: add tests to view model

* test: add tests to view

* feat: add header to new room list

* test(e2e): update RoomListView snapshot

* test(e2e): add tests for room list header

* refactor: minor code improvement
2025-02-20 15:40:19 +00:00
Florian D
2abd5342c2 New room list: add search section (#29251)
* feat(new room list): move `RoomListView` to its own folder and add styling

* feat(new room list): add search section

* test(new room list): add tests for `RoomListSearch`

* test(new room list): add tests for `RoomListView`

* test(e2e): add method to close notification toast to `ElementAppPage`

* test(e2e): add tests for the search section

* test(e2e): add tests for the room list view

* refactor: use Flex component

* fix: loop icon size in search button

* refactor: remove `focus_room_filter` listener
2025-02-13 15:49:09 +00:00
David Langley
69ee8fd96a Change License: AGPL + Element Commercial (#28856)
* Add commercial licence and update config files

* Update license in headers

* Revert "Update license in headers"

This reverts commit 7ed7949485.

* Update only spdx id

* Remove LicenseRef- from package.json

LicenseRef- no longer allowed in npm v3 package.json
This fixes the warning in the logs and failing build check.
2025-01-06 11:18:54 +00:00
David Langley
491f0cd08a Change license (#13)
* Copyright headers 1

* Licence headers 2

* Copyright Headers 3

* Copyright Headers 4

* Copyright Headers 5

* Copyright Headers 6

* Copyright headers 7

* Add copyright headers for html and config file

* Replace license files and update package.json

* Update with CLA

* lint
2024-09-09 13:57:16 +00:00
Michael Telatynski
79daa1a63c Migrate remaining editing.spec.ts from Cypress to Playwright (#11976)
* Migrate user-view.spec.ts from Cypress to Playwright

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

* Add bot support & update screenshot

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

* Add screenshot

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

* Use JSHandle

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

* Remove stale snapshots

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

* Migrate remaining editing.spec.ts from Cypress to Playwright

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

* yay

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

* Fix tests

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

* Fix tests

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2023-11-30 10:18:18 +00:00
Michael Telatynski
d827723b3d Migrate user-onboarding-*.spec.ts from Cypress to Playwright (#11927)
Co-authored-by: R Midhun Suresh <hi@midhun.dev>
Co-authored-by: Johannes Marbach <johannesm@element.io>
Co-authored-by: Milton Moura <miltonmoura@gmail.com>
2023-11-27 12:11:00 +00:00