Migrate Maps page module to React#87
Open
devin-ai-integration[bot] wants to merge 2 commits into
Open
Conversation
- Create 4 React components: GoogleMapsPage, LeafletMapsPage, MapBubblesPage, MapLinesPage - Create bridge directives in mapsReact.js to mount React components via mountReactApp - Inject baConfig and layoutPaths via Angular DI for AmCharts map components - Update maps.module.js child states to use React bridge directive templates - Export new components from src/app/react/index.jsx - Update gulp/inject.js to exclude src/app/react/** from script injection - Update gulp/server.js to serve build/react/ directory - Add copyReactBundle task to gulp/build.js - Add bundle.js script tag to src/index.html - Remove webpack externals to bundle React/ReactDOM (no UMD builds in React 19) - Rebuild bundle.js with all map components included - All 36 E2E tests pass
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:
|
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
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
1 participant
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
Migrates
src/app/pages/maps/from AngularJS controllers+templates to React components, keeping the existing UI-Router abstract parent + 4 child states for sidebar navigation.New React components in
src/app/react/pages/:GoogleMapsPage— initializesgoogle.maps.Mapin auseEffectLeafletMapsPage— initializes LeafletL.mapwith tile layer, marker, popupMapBubblesPage— AmCharts bubble map with 150+ country data points; receivesbaConfig/layoutPathsas props for color mapping and image pathsMapLinesPage— AmCharts line map with London/Vilnius flight connections; same prop injectionBridge pattern:
mapsReact.jsdefines 4 directives (<gmap-react>,<leaflet-react>,<map-bubbles-react>,<map-lines-react>) that callBlurAdminReact.mountReactApp(Component, element, props). The AmCharts directives injectbaConfigandlayoutPathsvia Angular DI and pass them as props — never accessed fromwindow.Build infrastructure (shared across all React migrations):
gulp/inject.js: excludessrc/app/react/**from script injectiongulp/server.js: addsbuild/reacttoserveandserve:e2ebase dirsgulp/build.js: addscopyReactBundletask to thebuildpipelinesrc/index.html: adds<script src="bundle.js">after inject blockswebpack.react.config.js: removes externals (React 19 has no UMD builds; React/ReactDOM now bundled)All 36 E2E tests pass (
maps.spec.ts): routing, headings, panel titles, map container IDs, tile rendering, AmCharts SVG + attribution, Leaflet markers/popups/zoom/attribution, breadcrumbs, and sidebar navigation.Link to Devin session: https://partner-workshops.devinenterprise.com/sessions/e1555ba14fc448c799e78d3cc531b41b
Requested by: @DhrovS