From fec44c146cd4eef37b9f713a688f1d8ebe405b41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 20 Aug 2021 02:58:10 +0200 Subject: [PATCH] Use a switch to toggle proposal selection The button to select/deselect a proposal wasn't very intuitive; for example, it wasn't obvious that pressing a button saying "selected" would deselect the proposal. So we're using a switch control, like we do to enable/disable features since commit fabe97e50. --- .../toggle_selection_component.html.erb | 2 +- .../proposals/toggle_selection_component.rb | 24 +++++++------------ config/locales/en/admin.yml | 2 +- config/locales/es/admin.yml | 2 +- .../toggle_selection_component_spec.rb | 21 ++++++++++++++++ .../admin/legislation/proposals_spec.rb | 8 +++---- spec/system/admin/proposals_spec.rb | 24 ++++++++++++------- 7 files changed, 53 insertions(+), 30 deletions(-) create mode 100644 spec/components/admin/proposals/toggle_selection_component_spec.rb diff --git a/app/components/admin/proposals/toggle_selection_component.html.erb b/app/components/admin/proposals/toggle_selection_component.html.erb index e9e6cb5d5..bdb2aaa99 100644 --- a/app/components/admin/proposals/toggle_selection_component.html.erb +++ b/app/components/admin/proposals/toggle_selection_component.html.erb @@ -1 +1 @@ -<%= button_to text, path, options %> +<%= render Admin::ToggleSwitchComponent.new(action, proposal, pressed: selected?, **options) %> diff --git a/app/components/admin/proposals/toggle_selection_component.rb b/app/components/admin/proposals/toggle_selection_component.rb index c046e64db..97a48803b 100644 --- a/app/components/admin/proposals/toggle_selection_component.rb +++ b/app/components/admin/proposals/toggle_selection_component.rb @@ -7,27 +7,21 @@ class Admin::Proposals::ToggleSelectionComponent < ApplicationComponent private - def text - if proposal.selected? - t("admin.proposals.index.selected") - else - t("admin.proposals.index.select") - end + def action + :toggle_selection end - def path - admin_polymorphic_path(proposal, action: :toggle_selection) + def selected? + proposal.selected? end def options - { remote: true, method: :patch, class: html_class } + { + "aria-label": label + } end - def html_class - if proposal.selected? - "button expanded" - else - "button hollow expanded" - end + def label + t("admin.actions.label", action: t("admin.actions.select"), name: proposal.title) end end diff --git a/config/locales/en/admin.yml b/config/locales/en/admin.yml index 3b70a864d..589127371 100644 --- a/config/locales/en/admin.yml +++ b/config/locales/en/admin.yml @@ -16,6 +16,7 @@ en: unmark_featured: Unmark featured edit: Edit configure: Configure + select: Select officing_booth: title: "You are officing the booth located at %{booth}. If this is not correct, do not continue and call the help phone number. Thank you." banners: @@ -1294,7 +1295,6 @@ en: title: Proposals id: ID author: Author - select: Select selected: Selected milestones: Milestones no_proposals: There are no proposals. diff --git a/config/locales/es/admin.yml b/config/locales/es/admin.yml index 513ae0306..510753097 100644 --- a/config/locales/es/admin.yml +++ b/config/locales/es/admin.yml @@ -16,6 +16,7 @@ es: unmark_featured: Quitar destacado edit: Editar configure: Configurar + select: Seleccionar officing_booth: title: "Estás ahora mismo en la mesa ubicada en %{booth}. Si esto no es correcto no sigas adelante y llama al teléfono de incidencias. Gracias." banners: @@ -1295,7 +1296,6 @@ es: id: ID author: Autor milestones: Hitos - select: Seleccionar selected: Seleccionada no_proposals: No hay propuestas. show: diff --git a/spec/components/admin/proposals/toggle_selection_component_spec.rb b/spec/components/admin/proposals/toggle_selection_component_spec.rb new file mode 100644 index 000000000..2350c92f8 --- /dev/null +++ b/spec/components/admin/proposals/toggle_selection_component_spec.rb @@ -0,0 +1,21 @@ +require "rails_helper" + +describe Admin::Proposals::ToggleSelectionComponent, :admin do + describe "aria-pressed attribute" do + it "is true for selected proposals" do + proposal = create(:proposal, :selected) + + render_inline Admin::Proposals::ToggleSelectionComponent.new(proposal) + + expect(page).to have_css "button[aria-pressed='true']" + end + + it "is false for not selected proposals" do + proposal = create(:proposal) + + render_inline Admin::Proposals::ToggleSelectionComponent.new(proposal) + + expect(page).to have_css "button[aria-pressed='false']" + end + end +end diff --git a/spec/system/admin/legislation/proposals_spec.rb b/spec/system/admin/legislation/proposals_spec.rb index 5ad426356..0b2a1d6eb 100644 --- a/spec/system/admin/legislation/proposals_spec.rb +++ b/spec/system/admin/legislation/proposals_spec.rb @@ -11,18 +11,18 @@ describe "Admin collaborative legislation", :admin do expect(page).to have_content(proposal.title) expect(page).to have_content(proposal.id) expect(page).to have_content(proposal.cached_votes_score) - expect(page).to have_content("Select") + expect(page).to have_content("No") end end scenario "Selecting legislation proposals" do - proposal = create(:legislation_proposal, cached_votes_score: 10) + proposal = create(:legislation_proposal, title: "Add more accessibility tests") visit admin_legislation_process_proposals_path(proposal.legislation_process_id) - click_button "Select" + click_button "Select Add more accessibility tests" within "#legislation_proposal_#{proposal.id}" do - expect(page).to have_content("Selected") + expect(page).to have_content "Yes" end end diff --git a/spec/system/admin/proposals_spec.rb b/spec/system/admin/proposals_spec.rb index fe062220f..d0377a70b 100644 --- a/spec/system/admin/proposals_spec.rb +++ b/spec/system/admin/proposals_spec.rb @@ -22,31 +22,39 @@ describe "Admin proposals", :admin do end scenario "Select a proposal" do - proposal = create(:proposal) + proposal = create(:proposal, title: "Forbid door-to-door sales") visit admin_proposals_path - within("#proposal_#{proposal.id}") { click_button "Select" } + within("#proposal_#{proposal.id}") do + expect(page).to have_content "No" - within("#proposal_#{proposal.id}") { expect(page).to have_button "Selected" } + click_button "Select Forbid door-to-door sales" + + expect(page).to have_content "Yes" + end refresh - within("#proposal_#{proposal.id}") { expect(page).to have_button "Selected" } + within("#proposal_#{proposal.id}") { expect(page).to have_content "Yes" } end scenario "Unselect a proposal" do - proposal = create(:proposal, :selected) + proposal = create(:proposal, :selected, title: "Allow door-to-door sales") visit admin_proposals_path - within("#proposal_#{proposal.id}") { click_button "Selected" } + within("#proposal_#{proposal.id}") do + expect(page).to have_content "Yes" - within("#proposal_#{proposal.id}") { expect(page).to have_button "Select" } + click_button "Select Allow door-to-door sales" + + expect(page).to have_content "No" + end refresh - within("#proposal_#{proposal.id}") { expect(page).to have_button "Select" } + within("#proposal_#{proposal.id}") { expect(page).to have_content "No" } end end