Use a switch to toggle investment selection

Just like it happened with proposals, the button to select/deselect an
investment wasn't very intuitive; for example, it wasn't obvious that
pressing a button saying "selected" would deselect the investment.

So we're using a switch control, like we do to enable/disable features
since commit fabe97e50.

Note that we're making the text of the switch smaller than in other
places because the text in the investments table it is also smaller
(we're using `font-size: inherit` for that purpose). That made the
button look weird because we were using rems instead of ems for the
width of the button, so we're adjusting that as well.

Also note we're changing the width of the switch to `6em` instead of
`6.25em` (which would be 100px if 1em is 16px). We're doing so because
we used 100 for the minimum width because it's a round number, so
now we're using another round number.

app/assets/stylesheets/admin/budget_investments/investments.scss

@@ -12,4 +12,8 @@
       font-size: $small-font-size;
     }
   }
+
+  .toggle-switch [aria-pressed] {
+    font-size: inherit;
+  }
 }

app/assets/stylesheets/mixins/buttons.scss

@@ -85,7 +85,7 @@
   @include regular-button;
   border-radius: $line-height;
   font-weight: bold;
-  min-width: rem-calc(100);
+  min-width: 6em;
   position: relative;
 
   &::after {

app/components/admin/budget_investments/toggle_selection_component.html.erb

@@ -1,5 +1,5 @@
 <% if can?(:toggle_selection, investment) %>
-  <%= button_to text, path, method: :patch, remote: true, class: html_class %>
+  <%= render Admin::ToggleSwitchComponent.new(action, investment, pressed: selected?, **options) %>
 <% elsif selected? %>
   <%= selected_text %>
 <% end %>

app/components/admin/budget_investments/toggle_selection_component.rb

@@ -9,18 +9,14 @@ class Admin::BudgetInvestments::ToggleSelectionComponent < ApplicationComponent
 
   private
 
-    def text
-      if selected?
-        selected_text
-      else
-        t("admin.budget_investments.index.select")
-      end
-    end
-
     def selected_text
       t("admin.budget_investments.index.selected")
     end
 
+    def action
+      :toggle_selection
+    end
+
     def path
       toggle_selection_admin_budget_budget_investment_path(
         investment.budget,
@@ -34,11 +30,14 @@ class Admin::BudgetInvestments::ToggleSelectionComponent < ApplicationComponent
       )
     end
 
-    def html_class
+    def options
-      if selected?
+      {
-        "button small expanded"
+        "aria-label": label,
-      else
+        path: path
-        "button small hollow expanded"
+      }
-      end
+    end
+
+    def label
+      t("admin.actions.label", action: t("admin.actions.select"), name: investment.title)
     end
 end

app/views/admin/budget_investments/toggle_selection.js.erb

@@ -1,3 +1,3 @@
-$("#<%= dom_id(@investment) %> [data-field='selected']").html(
+<%= render "admin/shared/toggle_switch",
-  "<%= j render(Admin::BudgetInvestments::ToggleSelectionComponent.new(@investment)) %>"
+           record: @investment,
-);
+           new_content: render(Admin::BudgetInvestments::ToggleSelectionComponent.new(@investment)) %>

config/locales/en/admin.yml

@@ -269,7 +269,6 @@ en:
           unfeasible: "Unfeasible"
           undecided: "Undecided"
         selected: "Selected"
-        select: "Select"
         list:
           id: ID
           title: Title

config/locales/es/admin.yml

@@ -269,7 +269,6 @@ es:
           unfeasible: "Inviable"
           undecided: "Sin decidir"
         selected: "Seleccionado"
-        select: "Seleccionar"
         list:
           id: ID
           title: Título

spec/components/admin/budget_investments/toggle_selection_component_spec.rb

@@ -20,8 +20,9 @@ describe Admin::BudgetInvestments::ToggleSelectionComponent, :admin do
 
       render_inline Admin::BudgetInvestments::ToggleSelectionComponent.new(valuation_finished_investment)
 
-      expect(page).to have_button "Select"
+      expect(page).to have_button count: 1
-      expect(page).not_to have_button "Selected"
+      expect(page).to have_button exact_text: "No"
+      expect(page).to have_css "button[aria-pressed='false']"
     end
 
     it "renders a button to deselect selected investments" do
@@ -29,8 +30,9 @@ describe Admin::BudgetInvestments::ToggleSelectionComponent, :admin do
 
       render_inline Admin::BudgetInvestments::ToggleSelectionComponent.new(selected_investment)
 
-      expect(page).to have_button "Selected"
+      expect(page).to have_button count: 1
-      expect(page).not_to have_button "Select"
+      expect(page).to have_button exact_text: "Yes"
+      expect(page).to have_css "button[aria-pressed='true']"
     end
   end
 
@@ -58,7 +60,7 @@ describe Admin::BudgetInvestments::ToggleSelectionComponent, :admin do
       render_inline Admin::BudgetInvestments::ToggleSelectionComponent.new(selected_investment)
 
       expect(page).to have_content "Selected"
-      expect(page).not_to have_button "Selected"
+      expect(page).not_to have_button
     end
   end
 end

spec/system/admin/budget_investments_spec.rb

@@ -1412,9 +1412,14 @@ describe "Admin budget investments", :admin do
 
       expect(page).to have_content "Unfeasible project"
 
-      within("#budget_investment_#{feasible_vf_bi.id}") do
+      within("tr", text: "Feasible, VF project") do
-        click_button "Select"
+        within("[data-field=selected]") do
-        expect(page).to have_button "Selected"
+          expect(page).to have_content "No"
+
+          click_button "Select Feasible, VF project"
+
+          expect(page).to have_content "Yes"
+        end
       end
 
       click_link "Advanced filters"
@@ -1424,9 +1429,10 @@ describe "Admin budget investments", :admin do
 
       expect(page).not_to have_content "Unfeasible project"
 
-      within("#budget_investment_#{feasible_vf_bi.id}") do
+      within("tr", text: "Feasible, VF project") do
-        expect(page).not_to have_button "Select"
+        within("[data-field=selected]") do
-        expect(page).to have_button "Selected"
+          expect(page).to have_content "Yes"
+        end
       end
     end
 
@@ -1439,21 +1445,26 @@ describe "Admin budget investments", :admin do
 
       expect(page).to have_content("There are 2 investments")
 
-      within("#budget_investment_#{selected_bi.id}") do
+      within("tr", text: "Selected project") do
-        click_button "Selected"
+        within("[data-field=selected]") do
+          expect(page).to have_content "Yes"
 
-        expect(page).to have_button "Select"
+          click_button "Select Selected project"
+
+          expect(page).to have_content "No"
+        end
       end
 
-      click_button("Filter")
+      click_button "Filter"
-      expect(page).not_to have_content(selected_bi.title)
+      expect(page).not_to have_content "Selected project"
-      expect(page).to have_content("There is 1 investment")
+      expect(page).to have_content "There is 1 investment"
 
       visit admin_budget_budget_investments_path(budget)
 
-      within("#budget_investment_#{selected_bi.id}") do
+      within("tr", text: "Selected project") do
-        expect(page).to have_button "Select"
+        within("[data-field=selected]") do
-        expect(page).not_to have_button "Selected"
+          expect(page).to have_content "No"
+        end
       end
     end
 
@@ -1465,10 +1476,12 @@ describe "Admin budget investments", :admin do
 
         visit admin_budget_budget_investments_path(budget)
 
-        within("#budget_investment_#{selected_bi.id}") do
+        within("tr", text: "Selected project") do
-          click_button "Selected"
+          within("[data-field=selected]") do
+            click_button "Select Selected project"
 
-          expect(page).to have_button "Select"
+            expect(page).to have_content "No"
+          end
         end
 
         click_link("Next")
@@ -1806,11 +1819,16 @@ describe "Admin budget investments", :admin do
       within("#js-columns-selector-wrapper") { uncheck "Title" }
 
       within("#budget_investment_#{investment.id}") do
-        click_button "Selected"
+        within("[data-field=selected]") do
+          expect(page).to have_content "Yes"
 
-        expect(page).to have_button "Select"
+          click_button "Select Don't display me, please!"
-        expect(page).not_to have_content "Don't display me, please!"
+
+          expect(page).to have_content "No"
+        end
       end
+
+      expect(page).not_to have_content "Don't display me, please!"
     end
 
     scenario "When restoring the page from browser history renders columns selectors only once" do