Skip to content

Migrate dashboard module to React 19#97

Open
devin-ai-integration[bot] wants to merge 1 commit into
demo-prepfrom
devin/1780378352-dashboard-react
Open

Migrate dashboard module to React 19#97
devin-ai-integration[bot] wants to merge 1 commit into
demo-prepfrom
devin/1780378352-dashboard-react

Conversation

@devin-ai-integration

@devin-ai-integration devin-ai-integration Bot commented Jun 2, 2026

Copy link
Copy Markdown

Summary

Ports the AngularJS dashboard page module (src/app/pages/dashboard/) to React 19, rendered inside the existing AngularJS shell via a bridge directive. The UI-Router dashboard state now uses template: '<dashboard-react></dashboard-react>' instead of templateUrl: dashboard.html + the directive-based widgets.

All 8 dashboard widgets are reimplemented as React components under src/app/react/pages/ and composed by DashboardPage in the same Bootstrap grid / ba-panel layout (via the shared <Panel> component):

  • DashboardPieChart — 4 easyPieChart widgets (jQuery plugin init in useEffect)
  • TrafficChart — Chart.js doughnut on #chart-area + channel legend
  • DashboardMap — AmCharts world map on #amChartMap
  • DashboardLineChart — AmCharts serial chart on #amchart
  • PopularApp — static "Most Popular App" widget
  • BlurFeed — 11 feed messages, click-to-expand
  • DashboardTodo — add (Enter / plus), check, remove; stable IDs as keys
  • DashboardCalendar — jQuery FullCalendar on #calendar

Key points (non-obvious from the diff):

  • Theme injection: the bridge directive (dashboardReact.js) injects baConfig, layoutPaths, baUtil via Angular DI and passes them as React props — never read from window. Derived colors use the shared colorHelper mix() algorithm (e.g. doughnut hoverBackgroundColor), not hardcoded hex.
  • Lifecycle: every chart/jQuery-plugin useEffect returns a cleanup (chart.destroy() / .clear() / fullCalendar('destroy')); the bridge unmounts the React root on Angular $destroy.
  • DOM fidelity: widget custom-element tags (<dashboard-pie-chart>, <popular-app>, …), CSS classes, and element IDs are preserved so the framework-agnostic Playwright suite keeps passing.
  • Build wiring: gulp/inject.js excludes src/app/react/** (ES modules bundled by webpack, not standalone scripts), gulp/server.js serves build/react/, index.html loads bundle.js, and gulp/build.js gains a copyReactBundle task. The rebuilt webpack bundle is committed at build/react/bundle.js.

Verification

e2e/dashboard.spec.ts — 34/34 passing against the React build (gulp serve:e2e + Playwright). Tests were not modified.

Link to Devin session: https://partner-workshops.devinenterprise.com/sessions/88ee9e638e414483a649701c10b303d5


Open in Devin Review

Port the AngularJS dashboard page (pie charts, traffic/doughnut chart, world map, revenue line chart, popular app, feed, todo list, calendar) to React 19 components mounted via a react2angular-style bridge directive. Theme services (baConfig, layoutPaths, baUtil) are injected through Angular DI and passed as props. Wire gulp serve/inject/build and index.html to load the webpack React bundle.
@devin-ai-integration

Copy link
Copy Markdown
Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment, CI, and merge conflict monitoring

@devin-ai-integration devin-ai-integration Bot left a comment

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no bugs or issues to report.

Open in Devin Review

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.

1 participant