Add groups index page

When render the investment list component with the link "see all
investments", now we redirect to groups index page when a budget has
multiple headings.

app/assets/stylesheets/budgets/groups/index.scss

@@ -0,0 +1,7 @@
+.budget-groups-index {
+
+  > header {
+    @extend %budget-header;
+    @include full-width-background($adjust-padding: true);
+  }
+}

app/assets/stylesheets/layout.scss

@@ -67,6 +67,7 @@ body {
 main {
   display: block;
 
+  &.budget-groups-index,
   &.budget-investment-new,
   &.debate-new,
   &.proposal-new,

app/components/budgets/groups/index_component.html.erb

@@ -0,0 +1,8 @@
+<% content_for :canonical do %>
+  <%= render "shared/canonical", href: budget_groups_url %>
+<% end %>
+
+<main class="budget-groups-index">
+  <%= header(before: back_link_to(budget_path(budget))) %>
+  <%= render Budgets::GroupsAndHeadingsComponent.new(budget) %>
+</main>

app/components/budgets/groups/index_component.rb

@@ -0,0 +1,12 @@
+class Budgets::Groups::IndexComponent < ApplicationComponent
+  include Header
+  attr_reader :budget
+
+  def initialize(budget)
+    @budget = budget
+  end
+
+  def title
+    t("budgets.groups.show.title")
+  end
+end

app/components/budgets/investments_list_component.html.erb

@@ -14,7 +14,7 @@
   <div class="row margin-top">
     <div class="small-12 medium-6 large-4 small-centered column margin-top">
       <%= link_to t("budgets.investments_list.see_all"),
-                  budget_investments_path(budget),
+                  see_all_path,
                   class: "button expanded" %>
     </div>
   </div>

app/components/budgets/investments_list_component.rb

@@ -17,4 +17,12 @@ class Budgets::InvestmentsListComponent < ApplicationComponent
       budget.investments.none
     end
   end
+
+  def see_all_path
+    if budget.single_heading?
+      budget_investments_path(budget)
+    else
+      budget_groups_path(budget)
+    end
+  end
 end

app/components/concerns/header.rb

@@ -1,7 +1,7 @@
 module Header
   extend ActiveSupport::Concern
 
-  def header(&block)
+  def header(before: nil, &block)
     provide(:title) do
       [
         t("#{namespace}.header.title", default: ""),
@@ -17,11 +17,7 @@ module Header
                   end
 
     tag.header do
-      if block_given?
-        content_tag(heading_tag, title) + capture(&block)
-      else
-        content_tag(heading_tag, title)
-      end
+      safe_join([before, content_tag(heading_tag, title), (capture(&block) if block_given?)].compact)
     end
   end
 

app/controllers/budgets/groups_controller.rb

@@ -5,7 +5,7 @@ module Budgets
     feature_flag :budgets
 
     before_action :load_budget
-    before_action :load_group
+    before_action :load_group, only: [:show]
     authorize_resource :budget
     authorize_resource :group, class: "Budget::Group"
 
@@ -15,6 +15,9 @@ module Budgets
     def show
     end
 
+    def index
+    end
+
     private
 
       def load_budget

app/views/budgets/groups/index.html.erb

@@ -0,0 +1 @@
+<%= render Budgets::Groups::IndexComponent.new(@budget) %>

config/routes/budget.rb

@@ -1,5 +1,5 @@
 resources :budgets, only: [:show, :index] do
-  resources :groups, controller: "budgets/groups", only: [:show]
+  resources :groups, controller: "budgets/groups", only: [:show, :index]
   resources :investments, controller: "budgets/investments" do
     member do
       put :flag

spec/components/budgets/investments_list_component_spec.rb

@@ -170,7 +170,7 @@ describe Budgets::InvestmentsListComponent, type: :component do
           render_inline Budgets::InvestmentsListComponent.new(budget)
 
           expect(page).to have_link "See all investments",
-                                    href: budget_investments_path(budget)
+                                    href: budget_groups_path(budget)
         end
       end
     end

spec/system/budgets/groups_spec.rb

@@ -53,4 +53,16 @@ describe "Budget Groups" do
       expect(page).to have_current_path budget_path(budget)
     end
   end
+
+  context "Index" do
+    scenario "Render headings" do
+      create(:budget_heading, group: group, name: "New heading name")
+
+      visit budget_groups_path(budget)
+
+      expect(page).to have_content "Select a heading"
+      expect(page).to have_link "New heading name"
+      expect(page).to have_link "Go back", href: budget_path(budget)
+    end
+  end
 end