After upgrading to the Sumac release, Studio has transitioned to the new MFE (Micro Front End) architecture. Previously, we had successfully implemented timezone conversion in the legacy Studio UI, where UTC times were converted to the user’s local timezone. However, with the transition to the new MFE, we are facing issues with timezone handling, as it seems that UTC is still being hardcoded for time-related data.
Problem:
In the new Studio MFE, times are still being displayed in UTC, and we need them to reflect the user’s local timezone instead.
We want to ensure that the MFE handles timezone conversions as we did with the legacy.
Questions:
How can we implement timezone conversion in the new Studio MFE to display times in the user’s local timezone?
Should we continue using librarie like moment-timezone for this, or is there a better approach?
Should the backend send timezone-aware datetime values, or should all timezone handling be done on the frontend (MFE)?
Are there any existing configurations in Open edX (especially in MFE) that can assist with managing timezone handling or meeting these requirements?
Any help or insights would be greatly appreciated!
I know we’re already using moment, so it may make sense to continue using it for practical reasons. However, for several years now the Moment team themselves have recommended against using Moment, because of its old architecture, large bundle size, and its mutable nature (which is particularly problematic).
I would strongly recommend anyone to use temporal-polyfill instead if you have the option, which can eventually be replaced by the built-in Temporal API as browser support rolls out. The Temporal API can do timezone conversions as needed, has a safe immutable API design, has complete internationalization support, properly distinguishes between PlainDate and Instant, and will eventually be built into all browsers so that it doesn’t increase the bundle size at all.
In my opinion REST APIs and backend code in general should only ever deal with UTC timestamps. Only UIs such as MFEs should convert to the user’s local timezone at the last possible moment.
I have a function here in the default MFE of Open edX that seems to be intended to convert UTC to local time zone for the studio, but it’s not working. Does this code have any issues, or why is it not working on the studio side as per the user’s local timezone?
We have completed the timezone integration in both the studio (MFE) and the backend, where we consistently use UTC for time management. This ensures that the times are correctly adjusted based on the user’s local timezone according to their country. We will create a pull request soon.
Hi @Yagnesh - just FYI I recategorized your post to the “Development” category. Picking an appropriate category when you open an issue can help get more eyes, as many people only follow a few categories.