Include heading geozone in investments sidebar map

Note that, in this case, we aren't binding a popup to the polygon
because the link would point to the same page we're already in.

app/assets/javascripts/map.js

@@ -211,7 +211,10 @@
         className: "map-polygon"
       });
 
-      polygon.bindPopup(geozone.headings.join("<br>"));
+      if (geozone.headings !== undefined) {
+        polygon.bindPopup(geozone.headings.join("<br>"));
+      }
+
       polygon.addTo(map);
     },
     openMarkerPopup: function(e) {

app/components/budgets/investments/map_component.html.erb

@@ -1,3 +1,3 @@
 <div class="budget-investments-map">
-  <%= render_map(map_location, investments_coordinates: coordinates) %>
+  <%= render_map(map_location, investments_coordinates: coordinates, geozones_data: geozones_data) %>
 </div>

app/components/budgets/investments/map_component.rb

@@ -20,4 +20,15 @@ class Budgets::Investments::MapComponent < ApplicationComponent
     def coordinates
       MapLocation.where(investment: investments).map(&:json_data)
     end
+
+    def geozones_data
+      return unless heading.geozone.present?
+
+      [
+        {
+          outline_points: heading.geozone.outline_points,
+          color: heading.geozone.color
+        }
+      ]
+    end
 end

spec/system/budgets/investments_spec.rb

@@ -1698,6 +1698,27 @@ describe "Budget Investments" do
       end
     end
 
+    scenario "Shows the polygon associated to the current heading" do
+      triangle = '{ "geometry": { "type": "Polygon", "coordinates": [[-0.1,51.5],[-0.2,51.4],[-0.3,51.6]] } }'
+      rectangle = '{ "geometry": { "type": "Polygon", "coordinates": [[-0.1,51.5],[-0.2,51.5],[-0.2,51.6],[-0.1,51.6]] } }'
+
+      park = create(:geozone, geojson: triangle, color: "#03ee03")
+      square = create(:geozone, geojson: rectangle, color: "#ff04ff")
+
+      group = create(:budget_group)
+      green_areas = create(:budget_heading, group: group, geozone: park, latitude: 51.5, longitude: -0.2)
+      create(:budget_heading, group: group, geozone: square, latitude: 51.5, longitude: -0.2)
+
+      visit budget_investments_path(group.budget, heading_id: green_areas)
+
+      expect(page).to have_css ".map-polygon[fill='#03ee03']"
+      expect(page).not_to have_css ".map-polygon[fill='#ff04ff']"
+
+      find(".map-polygon").click
+
+      expect(page).not_to have_css ".leaflet-popup"
+    end
+
     scenario "Shows all investments and not only the ones on the current page" do
       stub_const("#{Budgets::InvestmentsController}::PER_PAGE", 2)