Skip to content

ATLAS-5348: Atlas React UI: Upgrading frontend transitive dependencies - #703

Open
Brijesh619 wants to merge 6 commits into
apache:masterfrom
Brijesh619:ATLAS-5348
Open

ATLAS-5348: Atlas React UI: Upgrading frontend transitive dependencies#703
Brijesh619 wants to merge 6 commits into
apache:masterfrom
Brijesh619:ATLAS-5348

Conversation

@Brijesh619

@Brijesh619 Brijesh619 commented Jul 23, 2026

Copy link
Copy Markdown
Contributor

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 overrides in package.json to bump specific sub-dependencies. However, forcing those overrides (like minimatch, js-yaml, and postcss) 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 the lodash vulnerability by removing older dependencies (like victory-vendor).
  • react-quill-new (bumped to ^3.8.3): Resolves the lodash-es vulnerability.

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:

  • Strict TypeScript Compliance: Completely eradicated unsafe any types across all chart components (ClassificationDistributionCard, EntityStatsChart, EntityStatusDonut, EntityTypeBarChart, MessageConsumptionChart), replacing them with unknown and strict type guards. Recharts click event payloads are now properly type-checked using a dedicated RechartsEventPayload interface instead of unsafe object casting.
  • API Alignment: Updated Recharts <Tooltip> and <LabelList> components to comply with the stricter v3 formatter signatures (RenderableText), and removed the manual activeIndex state from <Pie> which is now handled natively.
  • Legend Accessibility & Performance Refactor: Completely rewrote the <Legend> implementation in EntityStatsChart. The legacy payload manipulation was replaced with a custom content renderer utilizing native MUI <ButtonBase> components. This restores native keyboard accessibility (Enter/Space keys) and semantic ARIA roles without custom onKeyDown handlers. Payload parsing is wrapped in useMemo to prevent array reallocations.
  • Strict SCSS Styling Cleanup: Enforced a zero-tolerance policy for CSS-in-JS. Purged over 25 legacy inline CSS strings, MUI sx props, and object-based style constants (e.g., RESPONSIVE_CONTAINER_STYLE) across charting components. These were completely migrated to semantic SCSS classes within stats.scss. For strictly data-derived math properties (e.g. dynamic Recharts series colors), standard HTML style attributes were used to safely bypass the MUI styling engine.
  • Test Suite Synchronization & Expansion: Updated the Recharts Jest mocks and React Testing Library assertions in EntityStats.test.tsx to correctly query the new custom Legend DOM structure (data-testid="legend-Active") and assert on visibility toggles rather than obsolete null checks. Additionally, introduced a brand-new dedicated test suite (EntityStatusDonut.test.tsx) to ensure 100% coverage on pie slice navigation and tooltip formatters.

Overrides Added:

  • d3-color (Override added for 3.1.0): Mitigates a High-severity ReDoS vulnerability. We opted for an override here because upgrading the main d3 library 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, and lodash-es were 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 underlying htmlparser2 dependency, 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?

  • Manual Verification: Ran npm audit locally in the /dashboard directory to verify that all fixable warnings (that do not cause breaking framework issues) have been successfully cleared and npm ls returns a perfectly valid dependency tree.
  • Build & Type Tests: Ran npm run build, npm run typecheck, and npm run lint to ensure the React UI complies strictly with TypeScript configurations without emitting any warnings or errors.
  • Automated Testing: Ran npm run test (Jest + React Testing Library) to verify all 4,700+ assertions continue to pass successfully, explicitly verifying that the Recharts v3 custom Legend DOM interactions execute correctly.
  • Runtime Test: Started the local dev server and verified the UI loads and functions as expected.

@Brijesh619

Copy link
Copy Markdown
Contributor Author
Screenshot from 2026-07-22 10-51-37

@Brijesh619

Copy link
Copy Markdown
Contributor Author
Screenshot from 2026-07-23 11-20-05

@Brijesh619

Copy link
Copy Markdown
Contributor Author
Screenshot from 2026-07-23 11-20-32

Comment thread dashboard/package.json Outdated
Comment thread dashboard/package.json Outdated
Comment thread dashboard/package.json Outdated
Comment thread dashboard/package-lock.json Outdated
@Brijesh619

Copy link
Copy Markdown
Contributor Author
Screenshot from 2026-08-05 17-35-17

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.
react-router (2 vulns): The security patch was only released in version 7.x. The dashboard is currently on version 6 (6.30.4). Upgrading from React Router v6 to v7 is a massive breaking change that would require rewriting the application's routing logic. A framework migration like that is far too risky and out-of-scope for a simple dependency-bump PR.

@Brijesh619
Brijesh619 force-pushed the ATLAS-5348 branch 2 times, most recently from d2a353c to fbd566d Compare August 19, 2026 05:33
@Brijesh619

Copy link
Copy Markdown
Contributor Author
Screenshot from 2026-08-19 11-03-11

@Brijesh619

Copy link
Copy Markdown
Contributor Author
Screenshot from 2026-08-19 11-04-02

Note:
Upgrade Summary Note: This PR successfully upgrades all outdated, non-breaking dependencies via npm audit fix and explicit package.json overrides (including picomatch, postcss, axios, etc.). quill remains unresolved as version 2.0.3 has no available patch yet. Additionally, the upgrades for react-router and sanitize-html have been deferred to separate Jira tickets, as upgrading them introduces breaking architectural and Jest environment issues that require isolated testing.

@Brijesh619

Copy link
Copy Markdown
Contributor Author
Screenshot from 2026-08-19 11-21-57

Comment thread dashboard/package.json
Comment thread dashboard/package.json Outdated
Comment thread dashboard/package.json Outdated
Comment thread dashboard/package.json Outdated
Comment thread dashboard/package.json
@Brijesh619

Copy link
Copy Markdown
Contributor Author
Screenshot from 2026-08-24 11-55-27 Screenshot from 2026-08-24 11-52-39

@Brijesh619

Copy link
Copy Markdown
Contributor Author
Screenshot from 2026-08-24 20-51-44 Screenshot from 2026-08-24 20-57-04

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants