Skip to content

Migrate src/app/pages/ui/ module from AngularJS to React#89

Open
devin-ai-integration[bot] wants to merge 2 commits into
demo-prepfrom
devin/1780370293-migrate-ui-module
Open

Migrate src/app/pages/ui/ module from AngularJS to React#89
devin-ai-integration[bot] wants to merge 2 commits into
demo-prepfrom
devin/1780370293-migrate-ui-module

Conversation

@devin-ai-integration

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

Copy link
Copy Markdown

Summary

Migrates all 11 UI sub-modules (typography, buttons, icons, modals, grid, alerts, progressBars, notifications, tabs, slider, panels) from AngularJS controllers/templates to React components using the existing react2angular bridge pattern.

Each AngularJS controller+template pair → single React component in src/app/react/pages/, using React.createElement(), useState/useCallback/useRef/useEffect hooks, and the shared Panel component. jQuery plugins (ionRangeSlider, bootstrapSwitch) initialized via useEffect(fn, []) with cleanup. Custom modal overlay manages backdrop DOM directly.

Bridge wiring: src/app/pages/ui/uiReact.js creates 11 directives via createBridgeDirective() loop → each calls window.BlurAdminReact.mountReactApp(Component, element[0], {}). All 11 *.module.js route files updated: removed abstract: true, child states, $urlRouterProvider redirects; replaced templateUrl+controller with template: '<directive-react></directive-react>'.

Gulp config: server.js serves build/react/, inject.js excludes src/app/react/**, build.js adds copyReactBundle task. index.html loads React 18 CDN + bundle.js.

All 65 E2E tests pass.

Link to Devin session: https://partner-workshops.devinenterprise.com/sessions/293e6a97d83a429c826418b137c4c127
Requested by: @DhrovS


Open in Devin Review

- Create 11 React page components (Typography, Buttons, Icons, Modals,
  Grid, Alerts, ProgressBars, Notifications, Tabs, Slider, Panels)
- Add react2angular bridge directives via uiReact.js
- Update all UI sub-module routes to use React bridge templates
- Export all components from react/index.jsx
- Configure gulp serve/inject/build for React bundle
- Add React 18 CDN scripts and bundle.js to index.html
- All 65 E2E tests passing
@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[bot]

This comment was marked as resolved.

Track the setTimeout handle via timerRef and clear it in the useEffect
cleanup to prevent stale onClose calls after unmount.
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