Updates recharts to v2.0.0 and fixes typing issues

[leonardomaier]

Hey, I just made a Pull Request!

Upgraded recharts to v2.0.0 and fixed all typing issues

Relates to #12609

:heavy_check_mark: Checklist

• [x] A changeset describing the change and affected packages. (more info)
• [x] Added or updated documentation
• [x] Tests for new functionality and regression tests for bug fixes
• [x] Screenshots attached (for UI changes)
• [x] All your commits have a Signed-off-by line in the message. (more info)

[github-actions[bot]]

Unexpected Changesets

The following changeset(s) reference packages that have not been changed in this PR:

• .changeset/selfish-kiwis-matter.md: @backstage/create-app

Note that only changes that affect the published package require changesets, for example changes to tests and storybook stories do not require changesets.

Changed Packages

Package Name	Package Path	Changeset Bump	Current Version
@backstage/cli	packages/cli	patch	v0.20.0
@backstage/plugin-bitrise	plugins/bitrise	patch	v0.1.37
@backstage/plugin-code-coverage	plugins/code-coverage	patch	v0.2.3
@backstage/plugin-cost-insights	plugins/cost-insights	minor	v0.11.32
@backstage/plugin-git-release-manager	plugins/git-release-manager	patch	v0.3.23
@backstage/plugin-xcmetrics	plugins/xcmetrics	patch	v0.2.30

[freben]

You'll see that CI now says to move @types/recharts to devDependencies, which is a good thing!

[leonardomaier]

@freben I just made some changes, let me know what you think 😄

[leonardomaier]

So, BuildTimeline.test.tsx tests are broken.

I took a look, and it seems to be caused by a recharts lib dependency called react-resize-detector which was on version v2.3.0 before the upgrade. After upgrading recharts, it goes to version 7.1.2 which is a huge jump.

I found out this already happened with other people, and a code snippet was added to the documentation as you can see here:

https://github.com/maslianok/react-resize-detector#testing-with-enzyme-and-jest

After adding the code snippet to the test suite, it worked fine but I got some TS errors:

Not sure if there is any solution to that besides ignoring the error, but I'll dig into it.

[leonardomaier]

Found an interesting discussion related to the CI error:

https://github.com/recharts/recharts/commit/3115b4d869042f7daf94a267117f75adc5049e23

Still trying out some approaches.

[leonardomaier]

Upgrading recharts lib to v2.0.0 brought problems related to its dependencies. For example, recharts use d3-* (array, shape, interpolation, etc...) as a dependency and at some point, d3 files were published as modules that broke the jest transform pipeline.

I ran all tests locally and the following error was thrown:

.../node_modules/d3-array/src/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export * from "d3-array";
SyntaxError: Unexpected token 'export'

In some way, jest wasn't able to resolve the dependencies from d3, so I followed what they did in this issue thread which is a very similar error. I've added all d3 libs in the moduleNameMapper in jest.js and it worked fine.

Besides that, I added the ResizeObserver in some additional component tests, related to react-resize-detector upgrade like I mentioned here.

Btw, all checks went green. Finally.

[github-actions[bot]]

This PR has been automatically marked as stale because it has not had recent activity from the author. It will be closed if no further activity occurs. If you are the author and the PR has been closed, feel free to re-open the PR and continue the contribution!

[github-actions[bot]]

This PR has been automatically marked as stale because it has not had recent activity from the author. It will be closed if no further activity occurs. If you are the author and the PR has been closed, feel free to re-open the PR and continue the contribution!

[freben]

I just tried to push a change without the mapping, just to see what CI does of it

[leonardomaier]

Going to dig into it a little bit more and search for alternatives.

[leonardomaier]

@freben I've made some changes:

• To solve issues related to d3-* libs, I removed the parser config for tsx files on jest.js (based on this thread)
• After the change mentioned above, the LogoIcon.jsx component started to fail, and after some research, I realized that we don't use the jsx extension for our components, so I changed it to tsx. Not sure if it was defined that way by mistake, but I fixed it.
• BuildTimeline component tests were failing due to the ResponsiveContainer component from recharts, so I needed to mock it and it solved the problem.

Besides that, you can see that a check failed, but it doesn't seem to be related to these changes. Let me know what you think.

[freben]

Note that the top of the LogoIcon file says

// @ts-check
// NOTE: This file is intentionally .jsx, so that there is one file in this repo where we make sure .jsx files work.

So that one is really meant to be jsx so that we can check that those flows work too...

[leonardomaier]

@freben you're right, I'll undo this change.

I've found an interesting issue on the SWC repository that was tagged as a bug:

https://github.com/swc-project/swc/issues/4911

The error above is what happens if I keep the parser for .tsx files, so maybe there is nothing we can do right now.

[freben]

Ah yeah great find! The playground link in the repo concurs with you ... maybe we can put this one on ice for a little bit and hope that an swc update fixes things for us soon. Annoying that you hit these roadblocks, but we're grateful for the thoroughness and investigations around it!

[leonardomaier]

Referencing the PR that might unblock this: https://github.com/swc-project/swc/pull/6067

[github-actions[bot]]

This PR has been automatically marked as stale because it has not had recent activity from the author. It will be closed if no further activity occurs. If you are the author and the PR has been closed, feel free to re-open the PR and continue the contribution!

[leonardomaier]

Looks like the fix is planned to be released in [email protected]

[leonardomaier]

@freben upgraded to [email protected] and it fixed the parsing issue. All checks have passed, by the way.

[backstage-goalie[bot]]

Thanks for the contribution! All commits need to be DCO signed before they are reviewed. Please refer to the the DCO section in CONTRIBUTING.md or the DCO status for more info.

[leonardomaier]

All green ✅

[suuus]

Thank you for contributing during Hacktoberfest 🍂! You can claim the Backstage Hacktoberfest Holopin at https://bck.st/hacktoberfest-holopin 🙌🏻