Migrate BatchInvitationPermissionsController#new to design system

This commit migrates the BatchInvitationPermissionsController#new page
to the design system. Hopefully with the preparatory commits this diff
isn't too hard to follow.

I've had to use the "raw" HTML version of the accordian component[1]
rather than the one in the publishing component library[2] since the
latter doesn't support passing a block of arbitrary content into each
section. I think it's a small enough amount of HTML to take this route
rather than try to extend the component.

The breadcrumb trail could be improved - ideally it would link to the
previous "step" in this flow which would involve editing the CSV file
and organisation - but we don't have an edit route for this yet and
I'm concerned already about the size of this change. I think it's one
we could revisit in a subsequent enhancement.

[1] https://design-system.service.gov.uk/components/accordion/
[2] https://components.publishing.service.gov.uk/component-guide/accordion

app/controllers/batch_invitation_permissions_controller.rb

@@ -5,6 +5,8 @@ class BatchInvitationPermissionsController < ApplicationController
   before_action :authorise_to_manage_permissions
   before_action :prevent_updating
 
+  layout "admin_layout"
+
   def new; end
 
   def create

app/views/batch_invitation_permissions/new.html.erb

@@ -1,36 +1,48 @@
 <% content_for :title, "Manage permissions for new users" %>
+<% content_for :breadcrumbs,
+   render("govuk_publishing_components/components/breadcrumbs", {
+     collapse_on_mobile: true,
+     breadcrumbs: [
+       {
+         title: "Home",
+         url: root_path,
+       },
+       {
+         title: "Users",
+         url: users_path,
+       },
+       {
+         title: "Manage permissions for new users",
+       }
+     ]
+   })
+%>
 
-<div class="page-title">
-  <h1>Manage permissions for new users</h1>
-</div>
-
-<div class="well">
-  <%= form_for @batch_invitation, url: :batch_invitation_permissions, method: :post do |f| %>
-    <table id="editable-permissions" class="table table-bordered table-striped table-on-white">
-      <thead>
-        <tr class="table-header">
-          <th>Application</th>
-          <th>Permissions</th>
-        </tr>
-      </thead>
-      <tbody>
-        <% policy_scope(:user_permission_manageable_application).reject(&:retired?).each do |application| %>
-        <tr>
-          <td>
-            <%= application.name %>
-          </td>
-          <td>
-            <% permissions_for(application).each do |permission| %>
-              <%= label_tag "user_application_#{application.id}_supported_permission_#{permission.id}", formatted_permission_name(application.name, permission.name) %>
-              <%= check_box_tag "user[supported_permission_ids][]", permission.id, false,
-                  id: "user_application_#{application.id}_supported_permission_#{permission.id}" %>
-            <% end %>
-          </td>
-        </tr>
-        <% end %>
-      </tbody>
-    </table>
-
-    <%= f.submit "Create users and send emails", :class => 'btn btn-success' %>
+<%= form_for @batch_invitation, url: :batch_invitation_permissions, method: :post do |f| %>
+<div class="govuk-accordion" data-module="govuk-accordion">
+  <% policy_scope(:user_permission_manageable_application).reject(&:retired?).each_with_index do |application, idx| %>
+  <div class="govuk-accordion__section">
+    <div class="govuk-accordion__section-header">
+      <h2 class="govuk-accordion__section-heading">
+        <span class="govuk-accordion__section-button" id="accordion-heading-<%= idx %>">
+          <%= application.name %>
+        </span>
+      </h2>
+    </div>
+    <div class="govuk-accordion__section-content" aria-labelledby="accordion-heading-<%= idx %>">
+      <%= render "govuk_publishing_components/components/checkboxes", {
+          name: "permissions_for_#{application.id}",
+          heading: "Permissions for #{application.name}",
+          items: permissions_for(application).map do |permission|
+            { label: formatted_permission_name(application.name, permission.name),
+              value: permission.id,
+              id: "user_application_#{application.id}_supported_permission_#{permission.id}",
+              name: "user[supported_permission_ids][]" }
+          end
+          } %>
+    </div>
+  </div>
   <% end %>
 </div>
+<%= render "govuk_publishing_components/components/button", { text: "Create users and send emails" } %>
+<% end %>

test/controllers/batch_invitation_permissions_controller_test.rb

@@ -38,10 +38,8 @@ class BatchInvitationPermissionsControllerTest < ActionController::TestCase
     should "allow selection of application permissions to grant to users" do
       get :new, params: { batch_invitation_id: @batch_invitation.id }
 
-      assert_select "table#editable-permissions" do
-        assert_select "label", "Has access to Profound Publisher?"
-        assert_select "label", "reader"
-      end
+      assert_select "label", "Has access to Profound Publisher?"
+      assert_select "label", "reader"
     end
   end