Merge pull request #2155 from alphagov/consolidation-move-reorder-sec…

…tions-page-to-design-system

Migrate the reorder sections page to the design system

app/assets/javascripts/application.js

@@ -3,5 +3,6 @@
 //= require govuk_publishing_components/components/button
 //= require govuk_publishing_components/components/details
 //= require govuk_publishing_components/components/layout-header
+//= require govuk_publishing_components/components/reorderable-list
 //= require govuk_publishing_components/components/skip-link
 //= require govuk_publishing_components/components/table

app/assets/stylesheets/application.scss

@@ -17,6 +17,7 @@ $govuk-page-width: 1140px;
 @import "govuk_publishing_components/components/layout-header";
 @import "govuk_publishing_components/components/notice";
 @import "govuk_publishing_components/components/search";
+@import "govuk_publishing_components/components/reorderable-list";
 @import "govuk_publishing_components/components/skip-link";
 @import "govuk_publishing_components/components/success-alert";
 @import "govuk_publishing_components/components/summary-list";

app/controllers/sections_controller.rb

@@ -129,6 +129,7 @@ def reorder
 
     render(
       :reorder,
+      layout: "design_system",
       locals: {
         manual: ManualViewAdapter.new(manual),
         sections:,
@@ -140,7 +141,7 @@ def update_order
     service = Section::ReorderService.new(
       user: current_user,
       manual_id: params.fetch(:manual_id),
-      section_order: params.fetch(:section_order),
+      section_order: update_section_order_params,
     )
     manual, _sections = service.call
 
@@ -198,6 +199,14 @@ def destroy
 
 private
 
+  def update_section_order_params
+    params
+      .permit(section_order: {})[:section_order]
+      .to_h
+      .sort_by { |_key, value| value.to_i }
+      .map { |array| array[0] }
+  end
+
   def section_params
     params
       .require(:section)

app/views/sections/reorder.html.erb

@@ -1,30 +1,48 @@
-<% content_for :page_title, "Reorder sections" %>
+<% content_for :title, "Reorder sections" %>
 
 <% content_for :breadcrumbs do %>
-  <li><%= link_to "Your manuals", manuals_path %></li>
-  <li><%= link_to manual.title, manual_path(manual) %></li>
-  <li class="active">Reorder sections</li>
+  <%= render "govuk_publishing_components/components/breadcrumbs", {
+    collapse_on_mobile: true,
+    breadcrumbs: [
+      {
+        title: "Your manuals",
+        url: manuals_path
+      },
+      {
+        title: manual.title,
+        url: manual_path(manual)
+      },
+      {
+        title: "Reorder sections"
+      },
+    ]
+  } %>
 <% end %>
 
-<h1 class="page-header">
-  Reorder sections
-</h1>
+<%= render "govuk_publishing_components/components/heading", {
+  text: "Reorder sections",
+  heading_level: 1,
+  font_size: "xl",
+  margin_bottom: 8
+} %>
+
 <%= form_tag(update_order_manual_sections_path(manual), method: :post) do %>
-  <div class="row">
-    <div class="col-md-8">
-      <ol class="reorderable-document-list">
-        <% sections.each do |section| %>
-          <li>
-            <input type="hidden" name="section_order[]" value="<%= section.uuid %>">
-            <%= section.title %>
-          </li>
-        <% end %>
-      </ol>
-    </div>
-  </div>
+  <%= render "govuk_publishing_components/components/reorderable_list", {
+    input_name: "section_order",
+    items: manual.sections.map do |section|
+      {
+        id: section.uuid,
+        title: section.title
+      }
+    end
+  } %>
+
+  <div class="govuk-button-group govuk-!-margin-bottom-6">
+    <%= render "govuk_publishing_components/components/button", {
+      text: "Save section order",
+      name: "submit",
+    } %>
 
-  <div class="actions">
-    <button name="submit" class="btn btn-primary">Save section order</button>
-    <%= link_to "Back", manual_path(manual), class: "action-link" %>
+    <%= link_to("Cancel", manual_path(manual), class: "govuk-link govuk-link--no-visited-state") %>
   </div>
 <% end %>

features/step_definitions/manual_steps.rb

@@ -765,7 +765,7 @@
   click_on("Reorder Sections")
   # Using capybara drag_to doesn't work reliably with our jQuery sortable
   # therefore we have to take a manual approach to replicating the drag/drop
-  inputs = page.all(".reorderable-document-list li.ui-sortable-handle input", visible: false)
+  inputs = page.all(".gem-c-reorderable-list__item input", visible: false)
   values = inputs.map(&:value).reverse
   inputs.each_with_index { |input, index| input.execute_script("this.value = '#{values[index]}'") }
 

spec/controllers/sections_controller_spec.rb

@@ -88,6 +88,32 @@
     end
   end
 
+  describe "#update_order" do
+    let(:manual) { Manual.new }
+    let(:service) { double(:service) }
+    let(:params) { { manual_id: "manual-id", section_order: {} } }
+
+    before do
+      login_as_stub_user
+      params[:section_order] = {
+        item_2: "2",
+        item_1: "1",
+        item_11: "11",
+      }
+
+      allow(service).to receive(:call).and_return([manual, manual.sections])
+    end
+
+    it "correctly reorders over ten manuals" do
+      expected_section_order = %w[item_1 item_2 item_11]
+      expect(Section::ReorderService).to receive(:new) { |args|
+        expect(args[:section_order]).to eq(expected_section_order)
+      }.and_return(service)
+
+      post :update_order, params:
+    end
+  end
+
   describe "#withdraw" do
     context "for a user that cannot withdraw" do
       let(:manual_id) { "manual-1" }