Finish upgrading frontend frameworks (formerly BD-39)

[kdmccormick]

What needs upgrading

• libsass-python
  • Current: v0.10.0
  • Desired: Either:
    • A version of the library that's new enough to support Python 3.10, or
    • Switch to a non-Python library (Migrate from libsass-python to node-sass or dart-sass #31607)
• Paragon
  • Current: ??
  • Desired: ??

Background

The original scope for the BD-39 project was to upgrade React and Paragon. Upgrading Paragon would involve other upgrades, including: removing edx-bootstrap, upgrading bootstrap, and upgrading libsass-python.

React was upgraded 🎉 , but the Paragon was not.

Abandoned PRs include:

• BD-39 modernize paragon for edx-platform #31153
• fix: upgrade bootstrap to 4.6.0 #27751
• fix: update libsass to v0.21.0 #27683
• feat: swap bootstrap for paragon sass #27771

[kdmccormick]

From a DevExp lens, I'm interested in this because the libsass upgrade likely blocks #31607, which is part of #31604.

[kdmccormick]

FYI @arbrandes , @davidjoy , and @jmbowman . I dropped this into the Frontend Dev WG project.

[leangseu-edx]

For whoever pick this up, make sure

• test the usage of @edx/paragon-new file is working. I would just test Button. It is an easy candidate.
• make sure devstack for make dev.static.lms+studio running without fail. Refer here for some of the common troubleshoot https://github.com/openedx/edx-platform/blob/298e4400e76d10fa4ac44b7f55a2e935749bbdb3/BD-39.MD

[kdmccormick]

This is related to, or perhaps entirely duplicated by, this platform-roadmap issue: openedx/platform-roadmap#15

[kdmccormick]

Tentatively assigning @andrey-canon , who had an idea of how to approach this.

[adamstankiewicz]

Figured it's worth leaving a mention of openedx/wg-frontend#166 in this issue, given it mentions upgrading React. Not sure if this issue now intends to be only about the Paragon upgrade or also still about getting React upgraded to latest v18 as well?

[kdmccormick]

The current libsass version, 0.10.0, doesn't seem to support Python 3.10:

(venv) ~/openedx/edx-platform 🍀 python3
Python 3.10.6 (main, May 29 2023, 11:10:38) [GCC 11.3.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import sass
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "/home/kyle/openedx/edx-platform/venv/lib/python3.10/site-packages/sass.py", line 733, in <module>
    class SassMap(collections.Mapping):
AttributeError: module 'collections' has no attribute 'Mapping'
>>> 

So this might become an issue sooner than later.

[kdmccormick]

Confirmed that this is due to a breaking change in Py 3.10. From https://docs.python.org/3.9/library/collections.html#module-collections:

Deprecated since version 3.3, will be removed in version 3.10: Moved Collections Abstract Base Classes to the collections.abc module. For backwards compatibility, they continue to be visible in this module through Python 3.9.

[adamstankiewicz]

What needs upgrading

• Paragon
  • Current: ??
  • Desired: ??

(FWIW, the Paragon library and its associated documentation site supports (nearly) the latest Dart Sass version via the sass NPM package as of v17.5.1).

In terms of what the desired version of Paragon is to install into edx-platform is definitely questionable. Do we intend to keep Paragon up-to-date moving forward in this repo even though we're been migrating the UIs out of edx-platform in favor of MFEs? When the design tokens / CSS variables approach to theming comes in the near future (next 2-3 months 🤞), it may have fairly large implications for edx-platform (and other legacy UIs) that heavily rely on custom SCSS/mixins should these legacy UI repos plan to upgrade to a future design tokens-based version of Paragon; as far as I can tell, we don't have a way to be backwards compatible (i.e., supporting both pre and post design tokens style architectures together from Paragon's POV).

It's also still a bit unclear to me about the strategy to support the older @edx/paragon alongside a latest @edx/paragon-new. I believe the intent is to support incremental migration from old Paragon to later Paragon, but I'm not personally sure if the styles between old and new conflicted at all, causing odd style regressions that may be difficult to identify.

[kdmccormick]

The impression I've gotten from @arbrandes and from TNL is that we are on a sort of bold sprint towards finishing the MFE-ification of edx-platform for everything except XBlock views. If that's true I don't think upgrading Paragon in edx-platform would be a wise use of engineering time. My hope is that we can leave comprehensive theming in place, relatively untouched, until the the final micro-frontend is available in the community release, at which point we deprecate it.

Libsass is a bit different because (a) it'll hard-block our next Python upgrade, and (b) unlike Paragon, it's used all across our core XBlock views. I've written about React-ifying XBlock views but so far nobody has bitten at picking up that discovery.

[kdmccormick]

UPDATE: The Python upgrade no longer depends on upgrading libsass-python due to: #34439

It would still be nice to get off libsass-python, but we are "safe" to leave libsass-python pinned to its ancient 0.10.0 version for the forseeable future.

[jmakowski1123]

Since we aren't going to actively pursue this in FY25, I'm going to close for now and we can reopen a ticket if/when we do pursue.