Migrate dashboard module to React 19#97
Open
devin-ai-integration[bot] wants to merge 1 commit into
Open
Conversation
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.
Author
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Ports the AngularJS
dashboardpage module (src/app/pages/dashboard/) to React 19, rendered inside the existing AngularJS shell via a bridge directive. The UI-Routerdashboardstate now usestemplate: '<dashboard-react></dashboard-react>'instead oftemplateUrl: dashboard.html+ the directive-based widgets.All 8 dashboard widgets are reimplemented as React components under
src/app/react/pages/and composed byDashboardPagein the same Bootstrap grid /ba-panellayout (via the shared<Panel>component):DashboardPieChart— 4 easyPieChart widgets (jQuery plugin init inuseEffect)TrafficChart— Chart.js doughnut on#chart-area+ channel legendDashboardMap— AmCharts world map on#amChartMapDashboardLineChart— AmCharts serial chart on#amchartPopularApp— static "Most Popular App" widgetBlurFeed— 11 feed messages, click-to-expandDashboardTodo— add (Enter / plus), check, remove; stable IDs as keysDashboardCalendar— jQuery FullCalendar on#calendarKey points (non-obvious from the diff):
dashboardReact.js) injectsbaConfig,layoutPaths,baUtilvia Angular DI and passes them as React props — never read fromwindow. Derived colors use the sharedcolorHelpermix()algorithm (e.g. doughnuthoverBackgroundColor), not hardcoded hex.useEffectreturns a cleanup (chart.destroy()/.clear()/fullCalendar('destroy')); the bridge unmounts the React root on Angular$destroy.<dashboard-pie-chart>,<popular-app>, …), CSS classes, and element IDs are preserved so the framework-agnostic Playwright suite keeps passing.gulp/inject.jsexcludessrc/app/react/**(ES modules bundled by webpack, not standalone scripts),gulp/server.jsservesbuild/react/,index.htmlloadsbundle.js, andgulp/build.jsgains acopyReactBundletask. The rebuilt webpack bundle is committed atbuild/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