* Exploration of a virtuoso-powered emoji picker
moved to shared components
Fable generated
* fix pnpm lock
* format & fix some lint issues
* wrong import
* fix lint warning
* Fix off-by-one
and remove manual overflow adjustment: let's leave the default unless
it turns out to be necessary. Emoji should not take that long to load.
* Convert to functional component
* WIP: change to one big virtuoso scroller
* Change to use virtuoso's own onRangeChanged
and santitise category data and how it's passed around
* Convert Tabs to functional component
and put the focusing behaviour back with it just keeping track of
refs by itself.
* Absorb two line config file into main component
* Actually add the config to the main file
* Convert emoji to functional
Also make selected always defined and use useCallback.
* QuickReactions to functional component
* Non-default exports & doc
* Search to functional component
* Well it seems to work just fine now
* Use ref prop
* fix lockfile AGAIN
* lint
* Remove default export
* Remove some mx_ classnames and fix the inputRef
to make the arrow keys in the search box work (well, work as much as
they ever did).
* Remove last of the mx_ id / classnames
(except the one in the test)
* Use useMemo to memoize
* No need to export props interface (I think?)
and fix comment now we don't do the mutation stuff anymore
* Fix test
* Fix axe violations & add screenshots
* Avoid comparing dom snapshots in test
* Allow more before or after, just compare order of the ones present in both.
* Switch existing usages to new emoji picker
and kill the old one with fire
* Unused stuff
* Remove i18n strings
* Fix some tests
* Update screenshots
* Fix test
by removing the last of the weird memoized-but-mutated data structure
* Experimental custom status
* Screenshot
* snapshots
* Update button label and fix test
* Move the string somewhere more sensible than 'a11y'
* i18n lint
* Give the emojis IDs so aria-activedescendant works
* Fix more tests
* Add a small wrapper emoji picker component
This lets us easily memoize the recent emojis when the emoji picker is opened.
Also it saves a bit of boilerplate.
* Remove old emojipicker css
* Typos
Co-authored-by: David Langley <davidl@element.io>
* Use compound constants
* Rethemendex
* Test for custom status
* Use catalog version for emojibase
* Add comments
* More comments
* Fix comment
* More comments
* more comments (and make them uniform)
* More comments
* Fix pnpm lock again
* Another comment
* Add option to hide quick reactions (and preview) bar
* Fix test
to use emoji not in the quick reactions bar
* Apply button types to new version
* Add comment
* Disable screenshot
as per comment
* Fix hover / background / border styles
* Screenshot
* Don't use the reactions row because it's gone now
* Fix spacing in user status dropdown
Updates to renderItem based Dropdown, allowing the item in the dropdown
to be customised.
Requires https://github.com/element-hq/compound-web/pull/538 (and
will be required to update to the version of compound it gets
released in).
* Update to new compound
* snapshots
* Fix tests
---------
Co-authored-by: Will Hunt <2072976+Half-Shot@users.noreply.github.com>
Co-authored-by: David Langley <davidl@element.io>
* Show & clear your own on-a-call status
The user menu / settings now reflects your own on-a-call status
and pressing the 'clear' button will clear both m.status and m.call,
whichever are set.
* Update function name
* Fix tests
And make the clear status function simpler by just throwing if either fails.
* Fix more tests
* Exploration of a virtuoso-powered emoji picker
moved to shared components
Fable generated
* fix pnpm lock
* format & fix some lint issues
* wrong import
* fix lint warning
* Fix off-by-one
and remove manual overflow adjustment: let's leave the default unless
it turns out to be necessary. Emoji should not take that long to load.
* Convert to functional component
* WIP: change to one big virtuoso scroller
* Change to use virtuoso's own onRangeChanged
and santitise category data and how it's passed around
* Convert Tabs to functional component
and put the focusing behaviour back with it just keeping track of
refs by itself.
* Absorb two line config file into main component
* Actually add the config to the main file
* Convert emoji to functional
Also make selected always defined and use useCallback.
* QuickReactions to functional component
* Non-default exports & doc
* Search to functional component
* Well it seems to work just fine now
* Use ref prop
* fix lockfile AGAIN
* lint
* Remove default export
* Remove some mx_ classnames and fix the inputRef
to make the arrow keys in the search box work (well, work as much as
they ever did).
* Remove last of the mx_ id / classnames
(except the one in the test)
* Use useMemo to memoize
* No need to export props interface (I think?)
and fix comment now we don't do the mutation stuff anymore
* Fix test
* Fix axe violations & add screenshots
* Avoid comparing dom snapshots in test
* Allow more before or after, just compare order of the ones present in both.
* Switch existing usages to new emoji picker
and kill the old one with fire
* Unused stuff
* Remove i18n strings
* Fix some tests
* Update screenshots
* Fix test
by removing the last of the weird memoized-but-mutated data structure
* Experimental custom status
* Screenshot
* snapshots
* Update button label and fix test
* Move the string somewhere more sensible than 'a11y'
* i18n lint
* Give the emojis IDs so aria-activedescendant works
* Fix more tests
* Add a small wrapper emoji picker component
This lets us easily memoize the recent emojis when the emoji picker is opened.
Also it saves a bit of boilerplate.
* Remove old emojipicker css
* Typos
Co-authored-by: David Langley <davidl@element.io>
* Use compound constants
* Rethemendex
* Test for custom status
* Use catalog version for emojibase
* Add comments
* More comments
* Fix comment
* More comments
* more comments (and make them uniform)
* More comments
* Fix pnpm lock again
* Another comment
* Add option to hide quick reactions (and preview) bar
* Fix test
to use emoji not in the quick reactions bar
* Apply button types to new version
* Add comment
* Disable screenshot
as per comment
* Fix hover / background / border styles
* Screenshot
* Don't use the reactions row because it's gone now
* Trim overly verbose comment
---------
Co-authored-by: Will Hunt <2072976+Half-Shot@users.noreply.github.com>
Co-authored-by: David Langley <davidl@element.io>
* Exploration of a virtuoso-powered emoji picker
moved to shared components
Fable generated
* fix pnpm lock
* format & fix some lint issues
* wrong import
* fix lint warning
* Fix off-by-one
and remove manual overflow adjustment: let's leave the default unless
it turns out to be necessary. Emoji should not take that long to load.
* Convert to functional component
* WIP: change to one big virtuoso scroller
* Change to use virtuoso's own onRangeChanged
and santitise category data and how it's passed around
* Convert Tabs to functional component
and put the focusing behaviour back with it just keeping track of
refs by itself.
* Absorb two line config file into main component
* Actually add the config to the main file
* Convert emoji to functional
Also make selected always defined and use useCallback.
* QuickReactions to functional component
* Non-default exports & doc
* Search to functional component
* Well it seems to work just fine now
* Use ref prop
* fix lockfile AGAIN
* lint
* Remove default export
* Remove some mx_ classnames and fix the inputRef
to make the arrow keys in the search box work (well, work as much as
they ever did).
* Remove last of the mx_ id / classnames
(except the one in the test)
* Use useMemo to memoize
* No need to export props interface (I think?)
and fix comment now we don't do the mutation stuff anymore
* Fix test
* Fix axe violations & add screenshots
* Avoid comparing dom snapshots in test
* Allow more before or after, just compare order of the ones present in both.
* Switch existing usages to new emoji picker
and kill the old one with fire
* Unused stuff
* Remove i18n strings
* Fix some tests
* Update screenshots
* Fix test
by removing the last of the weird memoized-but-mutated data structure
* Move the string somewhere more sensible than 'a11y'
* i18n lint
* Give the emojis IDs so aria-activedescendant works
* Fix more tests
* Add a small wrapper emoji picker component
This lets us easily memoize the recent emojis when the emoji picker is opened.
Also it saves a bit of boilerplate.
* Remove old emojipicker css
* Typos
Co-authored-by: David Langley <davidl@element.io>
* Use compound constants
* Rethemendex
* Use catalog version for emojibase
* Add comments
* More comments
* Fix comment
* More comments
* more comments (and make them uniform)
* More comments
* Fix pnpm lock again
* Another comment
* Apply button types to new version
* Add comment
* Disable screenshot
as per comment
---------
Co-authored-by: Will Hunt <2072976+Half-Shot@users.noreply.github.com>
Co-authored-by: David Langley <davidl@element.io>
* Support for reading m.call status
(well, the prefixed version)
* Abstract the details away in userStatusFromProfile
make the validate functions non-exported
* Write on on-=a-call status
* Add tests
* Move user call status logic to its own listener
* Move tests
* use vi rather than jest
* add more mocks
* call async
* Make the text copy button use IconButton
This obviously should be a shared component, but design is looking at
what it will actually look like long term, so until then, let's at
least make it use compound's IconButton so it gets the hover background
state, and sort out the padding & margins.
Requires https://github.com/element-hq/compound-web/pull/528
* snapshots & add aria-label
* more snapshots
* Remove unnecessary width & height
update other screenshots with expected changes
* One more screenshot
* This really shouldn't be necessary: see what test fails
* Fix test to look in screen for the labels
Because the labels from the tooltip don't go in the container, they
get added to the dom at the top level in a floaty bit.
* update snapshots again
* Fix button size
and also add comment to the other place where we fudge the padding
* Update snapshots
* Align to center
* Screenshots
* Support for reading m.call status
(well, the prefixed version)
* Abstract the details away in userStatusFromProfile
make the validate functions non-exported
* Add test
* format the oxen
* Remove set function
should be in the other PR
* Add user status to autocomplete suggestion
* Add test for PillCompletion titleIcon
* Convert to vitest
* Add test for UserStatusIcon
* Switch the user status icon view to be a view model based component
* Screenshots
* Add .catch
* Add test for UserProvider
* Add user status to dm room header
Also bumps the gap on the room header items to 8px because that's
what the designs have and I'm assuming it applies to everything, not
just the user status: pending design confirmation.
* Turns out the icons did have 8px gap
but via 4px of padding for reasons I can't discern
* Adjust spacing to 1.5x
as requested by design
* add tests
* Update screenshots
* add test for user status updating
* Add user status in user info right panel card
Adds a very simple view component to do so, which will be reused
in the DM room header.
Also comment the other status view so the difference is clear.
* Add screenshot
* Add test
* Rename snapshot
* Avoid snapshot in metaspaces order test
Just assert the thing we're actually testing rather than a snapshot
because I keep having to update this snapshot every time anything in
the left panel changes and it's tedious.
* 🐂
* Get all the button roles instead
* Favourites & people are gone
* Query treeitems and then get the buttons from them
* Center long user ids in the user menu
The span itself was centered but the text wasn't centered in the span
so long user IDs would be left justified once they wrapped onto two
lines.
* Update screenshot
* Snapshot
* First stage
1. Make avatar BIGGER!
2. Move status button out to its own component so we can reuse it
* Working version
but using context menu rather than dropdown menu which almost looks
right but not quite.
* Commit the set status view component
* Change to use dropdown with custom trigger
* Show full set status component in user menu
and styling tweaks
* In user menu, clicking takes you to settings
* Add the view model
* oxfmt
because apparently mine had decided to go away
* Fix type import
* Pass set status viewmodel in story
* Bump compound-web
for customisable dropdown
* Snapshot
* Add explicit aria label
as combobox role things don't just inherit from their inner text
* snapshot again
* Only show user status if feature flag enabled
* Make status btton view not a button
because it doesn't need to be. Also rename accordingly.
* Screenshots
* Disable in settings if feature flag off
* Snapshot
* Snapshot again
* Update screenshots
including room settings one which wasn't really supposed to change
although the avatar now takes up the space it's in - leaving it for
design to check.
* Fix size & positioning of the status button
* Update screenshots
* Screenshots
* Test for SetStatusViewModel
* Update set status view on status change
* Use a link component for the status button
which has built in hover state
* Float the status button in a 28px container
vs making it actually 28px min height
* Separate user menu profile into two sections
With 8px gap between things in the two sections and 12px gap between
sections (ie. in practice, 12px gap between the status control and username).
* Screenshot
* Screenshots
* Pass set status view model in the state
rather than as an extra prop. Fixes it in the story too.
* Pass ownprofilestore into the viewmodel
* Don't use snapshot for testing the view model
Avoids getting all the random stuff from the sub VM in the snapshot
and better to test what we care about anyway.
* don't mention the bad word
* Here too
* Don't show user status for guests
* Update guest story to remove user status
* Take client creating functionality out of MatrixClientPeg
Because all sorts of things import MatrixClientPeg and this means
they pull in all manner of things related to creating a client, when
all they need is to get the current one (and specifically it fixes
the import cycle that means I can't add my test).
* Remove fake indexeddb
as it seems like the tests didn't actually see the fake indexeddb before
(somehow) but now do, and are failing because they have that but no postmessage.
It feels like the right solution is for these tests to not need indexeddb.
* Don't mock a refresh token
The tests don't mock out enough for the token refreshing setup to work,
it wa somehow always ending up as null previously and now wasn't, at which
point it broke, so just make it actually unset.
* Move formatter instatiation to lazy
rather than eagerly at parse time, as this apparently shifted one
test to hit this import cycle instead.
* Tests for room name generator
as it seems like the tests didn't actually see the fake indexeddb before
(somehow) but now do, and are failing because they have that but no postmessage.
It feels like the right solution is for these tests to not need indexeddb.
* Separate out SDKContext
...from SDKContextClass, as the comments hopefully explain.
Also make the captitalisation consistent.
* Adding the new file usually helps too
* Fix import
* More comment
* Update the various imports of SDKContextClass
* Also fix case of TestSDKContext
* Update the mock
* Mock out window.addEventListener globally
As some code uses it
* Move to setupGlobals
* clean up import
* Only needed if we don't have happy-dom
* thank you!
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
---------
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
* 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
This rejectToast was added erroneously: as the comment above states,
there should be no toast left after we verify (apart from our old
friend the notifications nag toast). This was probably flaking because
it was racing to reject the toast before it vanished.
* 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
* 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>
Sort out duplication between presence icon code, have the MemberIconView
position the presence icon rather than the presence icon trying to position
itself.
* 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
* 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>
As of https://github.com/element-hq/element-web/pull/33573 (some?)
jest tests fail with "SyntaxError: Cannot use import statement outside a module"
when importing js-sdk. It removes js-sdk from moduleNameMapper in jest config
although I'm not sure why. This puts it back so js-sdk resolves to the
copy linked by our pnpm link script, which also makes get transformed.
* Poll for storage being deleted in OIDC test
This was flaking due to logout being async and sometimes not finishing
by the time the dialog appeared.
* Add missing screenshot
* Fix playwright tests
The screenshot reporter was using an import that no longer works as
of playwright 1.60. Inline the function instead as it doesn't seem
to be importable.
* Our custom expect was importing itself?
How did that ever work?
* Nope, that doesn't seem to help
and also it was aiming the in in playwright common which should be the 2nd level of extension
* Provide non-overridden version of the same function
as per comment
* Pass tags with INPUT_TAGS in docker bake job
Truly hideous mess of shell to set both env vars in the prebuild step.
As the env var doesn't seem to be available to the actual executor
but clearly must be available to the docker that it runs.
* gnore printf, it's a shell builtin
Turns out the .env.docker:build is read automatically by nx when running
that project step, so it should be in the env. It might just be that using
the `x=$x` format means docker gets the $ literally because no shell is involved
here, so we need to use the plain `x` format so docker knows to take it from
the environment itself.
That's the theory, anyway.
* 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
* Use the env file when buiding playwrigt common docker
The docker builds failed due to the variable for being available
* Also we surely don't need this twice
* Include tsx test files in common vite config
Otherwise we miss a bunch of the shared component tests
* Add storybook/preview-api to optimizeDeps
which is what vitest is telling me to do, which will hopefully stop
it flaking out.
This was failing locally because my dev box is set to local time rather
than UTC and so the Date class's special date parsing was interpreting
some of the dates as a different day.
Use Date's methods to build the actual date we want so we're not reliant on
the date objet's parsing - that's not what we're trying to test.
Yarn had somehow confused itself and got into a state where it refused
to install react 19.2.4, so much so that even renovate thought it had
upgraded the package (https://github.com/element-hq/element-modules/pull/208)
when it hadn't.
Until we switch to pnom and can use catalog:, pin them to exact version which
seems to make yarn play ball again.
* Add support for Widget & Room Header Buttons module APIs
To support https://github.com/element-hq/element-modules/pull/217
* Update for new api
* Test addRoomHeaderButtonCallback
* Extra mock api
* Test for widgetapi
* Convert enum
* Convert other enum usage
* Add tests for widget context menu move buttons
Which have just changed because of the enum
* Add tests for moving the widgets
* Fix copyright
Co-authored-by: Florian Duros <florianduros@element.io>
* Update module API
* A little import/export
---------
Co-authored-by: Florian Duros <florianduros@element.io>
David BakerandGitHub
