ATLAS-5348: Atlas React UI: Upgrading frontend transitive dependencies - #703
Brijesh619 wants to merge 13 commits into
Conversation
|
|
|
We can currently solve 0 of the remaining 3 vulnerabilities without causing major issues for this PR. Here is exactly why we can't safely fix them right now: quill (1 vuln): There is simply no patched version published on npm yet for this specific advisory (GHSA-v3m3-f69x-jf25). We are physically unable to fix it until the package maintainers release a patch. |
d2a353c to
fbd566d
Compare
|
Note: |
|
|
b9be68d to
b32f484
Compare
|
|
|
a586020 to
02a76ae
Compare
|
|
pawarprasad123
left a comment
pawarprasad123
left a comment
There was a problem hiding this comment.
Changes LGTM.
Minor non blocker changes n related to the hardcoded color in charts, and test case.
this can be done in dashboard performance task.
|
|
pawarprasad123
left a comment
pawarprasad123
left a comment
There was a problem hiding this comment.
The fonts on some of the dashboard cards are mismatched; please update them properly to match the rest of the cards.
pawarprasad123
left a comment
pawarprasad123
left a comment
There was a problem hiding this comment.
Latest master requires lint-staged@17.0.8 which declares node >= 22.22.1. On Node 20, use NPM_CONFIG_ENGINE_STRICT=false npm install in /dashboard. CI likely uses Node 22+.
handled in ATLAS-5324 |
Fixed. I set engine-strict=false in the .npmrc configuration so that npm install runs smoothly on Node 20 without requiring any extra environment variables. |
682110b to
20afb93
Compare
2 participants
What changes were proposed in this pull request?
This PR resolves ATLAS-5348 by upgrading several outdated frontend transitive dependencies in the Atlas React UI (
/dashboard).Previously, this patch relied heavily on manual
overridesinpackage.jsonto bump specific sub-dependencies. However, forcing those overrides (likeminimatch,js-yaml, andpostcss) caused "invalid tree" errors and forced modern tooling (like Vite and ESLint) backward.Instead, this PR safely updates
package-lock.json, upgrades the main libraries responsible for bringing in vulnerable sub-dependencies, and only uses an override when strictly necessary to avoid breaking changes.Main Library Upgrades:
recharts(bumped to^3.10.1): Resolves thelodashvulnerability by removing older dependencies (likevictory-vendor).react-quill-new(bumped to^3.8.3): Resolves thelodash-esvulnerability.Recharts v3 Migration & Code Quality Improvements:
Because upgrading to Recharts v3 introduced significant API changes, this PR includes a comprehensive refactor of the dashboard's charting components to ensure production stability, strict type safety, and accessibility:
anytypes,@ts-expect-errorsuppressions, and redundant inline casting across all chart components (ClassificationDistributionCard,EntityStatsChart,EntityStatusDonut,EntityTypeBarChart,MessageConsumptionChart). Recharts click event payloads are now centrally validated using a genericgetPayloadFromRechartsEvent<T>helper inmetricsUtils.ts(now used consistently across all charts includingEntityStatusDonut), ensuring strict type safety and eliminating code duplication. We also strongly typed customrenderActiveShapeparameters usingPieSectorDataItemto safely extract payload properties.<Tooltip>and<LabelList>components to comply with the stricter v3formattersignatures (RenderableText). Because Recharts v3 currently breaks Pie sector hover animations whenisAnimationActive=trueis used alongside the newshapeprop, we successfully restored the native smooth hover effect onEntityStatusDonutby creating a strongly-typed component wrapper (AnimatedPie) to securely accept legacyactiveIndexandactiveShapeprops without violating strict TypeScript compilation rules.<Legend>implementation inEntityStatsChart. The legacypayloadmanipulation was replaced with a customcontentrenderer utilizing native MUI<ButtonBase>components memoized viauseCallback. This restores native keyboard accessibility (Enter/Spacekeys) and semantic ARIA roles without customonKeyDownhandlers. Payload parsing is wrapped inuseMemoto prevent array reallocations.sxprops across typography and chart layouts, replacing them entirely with standard SCSS classes (e.g.,.chart-card-title,.donut-status-active). Chart colors are now defined as CSS custom properties in the:rootscope ofstats.scssproviding seamless, duplicate-free dark mode support natively. We also removed hardcoded#1a1a1atypography colors that previously broke dark-mode legibility.LatestEntitiesListcomponent to display the entity display name and type name on two distinct lines for improved readability. We also extracted the display limits into a centralizedLATEST_ENTITIES_DISPLAY_LIMIT(now configured to6) constant to eliminate duplicate magic numbers.metricsUtils.test.tsforgetPayloadFromRechartsEventcovering valid payload objects,null/undefinedinputs, primitive inputs (number,string,boolean,symbol), and specifically handling the new Recharts v3 flat payload structure fallback logic.ClassificationDistributionCard.test.tsxandEntityTypeBarChart.test.tsxwith full feature parity for custom Y-axis tick renderer interactions (click events, keyboardEnter/Spaceactivation, and unhandled key guards).EntityStatsChart.test.tsxto verify keyboard interactions (Enter/Space) on legend<ButtonBase>elements, CSS custom property--legend-colorrendering, and unhandled key guards.EntityStatusDonut.test.tsxto precisely mock Recharts v3 payload structures, verifygetPayloadFromRechartsEventintegration, pie slice navigation, and invalid payload guards.Overrides Added:
d3-color(Override added for3.1.0): Mitigates a High-severity ReDoS vulnerability. We opted for an override here because upgrading the maind3library from v5 to v7 introduces significant architectural breaking changes to the graph components.(Note: Prior overrides for
brace-expansion,js-yaml,postcss,semver,minimatch,lodash, andlodash-eswere removed as they are either resolved via the upgrades above or were creating invalid dependency trees).This PR also incorporates fixes for the following automated Dependabot PRs targeting the dashboard:
(Note: Dependabot PRs #644 (qs) and #584 (serialize-javascript / webpack) which targeted /dashboard/src/views/Lineage/atlas-lineage are now obsolete. That sub-directory and its package files were deleted in commit ATLAS-5328.)
Known / Unresolved Issues & Deferred Upgrades
While running
npm audit, there are a few items intentionally excluded from this PR:1. Deferred to Separate Jiras (Breaking Changes):
react-router-dom: Upgrading this package to v7 involves significant architectural changes and deprecations that introduce breaking issues in the current test suite. This migration has been isolated into its own Jira to be handled carefully without blocking these security patches.sanitize-html: Upgrading this library from v1 to v2 introduces breaking ESM syntax via its underlyinghtmlparser2dependency, causing the Jest test environment to completely crash. This will be handled in a separate Jira so we can properly implement Jest mocks and isolated testing.2. No Patched Version Available:
quill(=2.0.3): There is currently 1 low-severity vulnerability flagged for this package. However, 2.0.3 is currently the latest version available on npm. There is no patched version available yet, so this cannot be resolved until the maintainers release a newer update.How was this patch tested?
npm auditlocally in the/dashboarddirectory to verify that all fixable warnings (that do not cause breaking framework issues) have been successfully cleared andnpm lsreturns a perfectly valid dependency tree.npm run build,npm run typecheck, andnpm run lintto ensure the React UI complies strictly with TypeScript configurations without emitting any warnings or errors.npm run test(Jest + React Testing Library) to verify all 196 test suites and 4,882 assertions continue to pass successfully, explicitly verifying that the Recharts v3 custom Legend DOM interactions execute correctly, missing payload scenarios fail gracefully, and label formatters work reliably.