aleph
aleph copied to clipboard
Reintegrate react-ftm & update to Blueprint 4
This PR includes two major changes: It moves the react-ftm codebase back into the main aleph repository. And it includes an upgrade to Blueprint v4. While these are separate tasks, I decided to tackle them in a single PR. Both tasks require a lot of manual UI testing to ensure no regressions are introduced, and it’s more convenient to do that once for both tasks.
This PR includes changes to a lot of files, which makes it a little bit hard to review. Many of those changes are automated (using automated migration tooling or running semi-automated find-and-replace). Rather than taking a look at all of the changes at once, it probably makes sense to look at individual commits.
Here’s a summary of the changes. The commit messages contain additional details.
1) react-ftm
- Copy-pasted all source files into
ui/src/react-ftm, leaving the internal directory structure intact, and adjusted import paths where necessary. Also added all react-ftm’s npm dependencies to Aleph’spackage.json. - Fixed a couple of TypeScript-related errors and installed missing type definitions.
- Set up tests with Jest and React Testing Library and made sure the few tests we have in react-ftm run successfully.
- Merged all translations from react-ftm into Aleph’s UI translations.
2) Blueprint 4
-
Upgraded
@blueprintjs/coreand all other Blueprint-related packages to the latest version available. -
Switched form LibSass-based
node-sassto Dart Sass (~sass-embedded~sass). (I originally intended to usesass-embedded, which runs the Sass compiler in a Dart VM rather than using a transpiled-to-JS version, but it still has some issues which failed the builds.) -
Fixed a couple of issues related to build tooling etc. (Customizing and building Blueprint from the SCSS source isn’t officially supported, so it’s a bit of a hassle.
-
Replaced all references to the Blueprint version number (in CSS class prefixes, JSX, component names and imports, …) with SCSS variables or JS constants exported by the respective packages.
For example, instead of a CSS selector like
.bp3-input-groupwe now use.#{$bp-ns}-input-group.$bp-nsis defined by Blueprint and refers to class namespace for the current major Blueprint version, for examplebp3orbp4.In JSX components, we now use constants instead of using class names directly, for example when using Blueprint’s utility classes:
- <span className="bp3-text-muted">Hello World!</span> + <span className={Classes.TEXT_MUTED}>Hello World!</span>Also, we’ve been recreating the HTML markup for some of Blueprint’s components in a few places to customize their appearance. I’ve tried to use the React components provided by Blueprint instead.
This should make future major version upgrades easier. The Blueprint team aims to release major versions more frequently, approx. every 6 months (though with fewer breaking changes in each major release).
3) Testing
- I have created an incomplete least of core features/scenarios on the Wiki that I have used to systematically test the UI and discover regressions.
- I have also spent some time to explore automating these tests using Playwright.
4) Visual Changes
- Blueprint 4 comes with a new color palette.
- There are a few minor changes to the visual appearance of components, e.g. inputs have a slightly darker border. Nothing major though.
5) Network Diagram Embeds
- As we’re considering to permanently remove the options to create network diagram embeds and to export diagrams as .ftm files, I have removed these options from the UI.
- That way, we can quickly revert the changes if necessary, and safely remove all front and back end code related to this feature after some time.
Followup todos:
- ~Fix network diagram embeds.~
- ~Fix invalid DOM nesting on investigation home pages.~
- After merging, upload merged translations to Transifex.
- Consider removing layerings/abstractions, e.g.
EntityManager.
Closes #2146.