Allow user to set timezone

[Timshel]

Hey,

This adds the ability for a user to set a Timezone which will replace the default one from the browser.

Worked on it mainly because Firefox with resist fingerprinting (Cf element-hq/element-web#25006) set the timezone to UTC, and I'm not aware of an easy way to whitelist only specific domains.

Edit: probably should have searched more before coding but there is supposed to be a whitelist in Firefox RFP but for now I have issues with it 😅. And this might be useful in other cases.

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.
• Sign-off given on the changes (see CONTRIBUTING.md).

[t3chguy]

Sorry wrong button

[Timshel]

Not sure of the process but the PR is in a relative good state and working well.

Set it as WIP since:

• I'm aware of a test failing since the properties screen now has more element.
• Might need more translation ?

But wanted some feedback before spending more time on it :).

[t3chguy]

I've requested review from @matrix-org/product but they are quite busy so it may take some time, it is their decision what features land

[daniellekirkwood]

I'd like @americanrefugee 's input on the design of the button and it's layout. In terms of functionality I would accept this enhancement if/when implemented correctly

Here's how I see it in the Netlify build. Let me know if I'm actually looking at the wrong thing.

[americanrefugee]

The functionality of the Netlify screenshot if correct, but the design should look like this:
https://www.figma.com/design/qTWRfItpO3RdCjnTKPu4mL/Settings?node-id=97-15874&t=whVB5NajX00nqnN5-4

[Timshel]

Made a short recording of the field in action:

[Timshel]

@americanrefugee I don't have access even with an account to the Figma file.

[americanrefugee]

Sorry @Timshel I didn't realize at first that you're not an Element employee - which is why I can't give you access to our design files.

However, here are screenshots of how the feature should look like, as well as dropdown menu states:

As for the functionality, I agree that it's useful to be able to type to filter dropdown menu results. However, the user shouldn't actually be typing anything into the field.

[t3chguy]

Such a Dropdown component is being worked on in element-hq/compound-web#204 and should be reusable here once it lands

[Timshel]

Ok I'll switch to having the dropdown justified on the left with the label on top.

I agree that it's useful to be able to type to filter dropdown menu results. However, the user shouldn't actually be typing anything into the field.

I'll mention first that it's reusing the same dropdown that the one used at the top of the page for Application language.

But I'm not sure what you mean by not "typing anything into the field" do you mean not visible ?
The filtering is essentially a search, without the "search" term visible the user won't be able to see if he made a typo, and it will make deleting the search term quite tricky.

If you mean it to work like the classic list with keyboard navigation then I would mention that there is over 400 values so I believe filtering is quite important here.

[americanrefugee]

I suppose if the user starts typing then it can follow the regular form field component:

And here is the Clear / X button:

• By default, the selected menu item label should appear
• If typing, the content are replaced with a cursor and "Clear" (X) button
  • The list should update as the user types
• If the user clicks the x / clear button, the original label re-appears, the up arrow reappears, and all menu items are shown

Something like that?

[Timshel]

@americanrefugee adding the Clear/ X would make sense, but I believe there is some "conflict" with the down arrow which indicate that it's a dropdown (probably why it's not already present).

As I mentioned I'm just reusing an existing component, so any change would impact multiple existing fields.
To be honest I believe this is a separate issue and should not be addressed here; and since this handling is already used in the same page I don't believe it should block this PR.

[americanrefugee]

Ok, reuse the existing component. Don't wanna block anything :)

[Timshel]

@americanrefugee do you have a recommendation for the dropdown width ?

By default, it matches the width of the selected option (The container has the class mx_SettingsSubsection_contentStretch).
For the other dropdown (Application dropdown ) it matches the hint width (The app will reload after selecting another language).

Added the current Timezone in the Browser default placeholder/option using the Timezone short format defined as:

Short localized form (e.g.: PST, GMT-8)

Cf https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat

For now it look like this

[Timshel]

Managed to update the playwright snapshot even if the other test is failing with a timeout (the test was not reported as failing on the ci ...).

[Timshel]

Hey sorry, with some jest test failing locally (on develop too) I did not look at why the playwright test started failing :(.
It appears I had unlinked matrix-react-sdk from my local element-web :(.

Hopefully this should be ok now, there is still the Typescript Syntax Check failing but no idea why, it's running without issue locally and the reported errors are clearly not limited to the change in this PR.

[florianduros]

A js-sdk PR broke our CI, so don't worry about the current state of the ts errors.
I will take a look at the test, test it manually today or next week

[Timshel]

@florianduros Just seen your latest push, I was thinking of adding to the playwright test (seen those default in other tests):

test.use({
  locale: 'en-GB',
  timezoneId: 'Europe/London',
});

This can be set globally too in the playwright.config.ts, but I believe it would be worth its own PR.

[florianduros]

Perfect it works!
Thanks for the contribution and not giving up! Well done!