Move invitations new to use GOV.UK Design System

app/helpers/users_helper.rb

@@ -72,4 +72,20 @@ def options_for_organisation_select(selected: nil)
       end
     end
   end
+
+  def items_for_permission_checkboxes(application:, user: nil)
+    permissions_for(application).map do |permission|
+      {
+        id: supported_permission_checkbox_id(application, permission),
+        name: "user[supported_permission_ids][]",
+        label: formatted_permission_name(application.name, permission.name),
+        value: permission.id,
+        checked: user&.has_permission?(permission),
+      }
+    end
+  end
+
+  def supported_permission_checkbox_id(application, permission)
+    "user_application_#{application.id}_supported_permission_#{permission.id}"
+  end
 end

app/views/batch_invitation_permissions/new.html.erb

@@ -19,30 +19,22 @@
 %>
 
 <%= 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" } %>
+  <%= render "govuk_publishing_components/components/accordion", {
+    items: policy_scope(:user_permission_manageable_application).reject(&:retired?).map do |application|
+      {
+        heading: {
+          text: application.name
+        },
+        content: {
+          html: render("govuk_publishing_components/components/checkboxes", {
+            name: "permissions_for_#{application.id}",
+            heading: "Permissions for #{application.name}",
+            items: items_for_permission_checkboxes(application:),
+          })
+        },
+      }
+    end
+  } %>
+
+  <%= render "govuk_publishing_components/components/button", { text: "Create users and send emails" } %>
 <% end %>

app/views/devise/invitations/new.html.erb

@@ -81,32 +81,22 @@
         } %>
       <% end %>
 
-      <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", {
+      <%= render "govuk_publishing_components/components/accordion", {
+        items: policy_scope(:user_permission_manageable_application).reject(&:retired?).map do |application|
+          {
+            heading: {
+              text: application.name
+            },
+            content: {
+              html: 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][]",
-                    checked: f.object.has_permission?(permission) }
-                end
-                } %>
-          </div>
-        </div>
-        <% end %>
-      </div>
+                items: items_for_permission_checkboxes(application:, user: f.object),
+              })
+            },
+          }
+        end
+      } %>
 
       <div class="govuk-button-group">
         <%= render "govuk_publishing_components/components/button", {

test/helpers/users_helper_test.rb

@@ -73,4 +73,46 @@ class UsersHelperTest < ActionView::TestCase
       assert_equal expected_options, options
     end
   end
+
+  include PermissionsHelper
+  include BatchInvitationPermissionsHelper
+
+  context "#items_for_permission_checkboxes" do
+    should "return permission options suitable for checkboxes component" do
+      application = create(:application)
+      signin_permission = application.signin_permission
+      permission1 = create(:supported_permission, application:)
+      permission2 = create(:supported_permission, application:)
+
+      user = create(:user, supported_permissions: [signin_permission, permission1])
+
+      items = items_for_permission_checkboxes(application:, user:)
+
+      expected_items = [
+        {
+          id: supported_permission_checkbox_id(application, signin_permission),
+          name: "user[supported_permission_ids][]",
+          label: "Has access to #{application.name}?",
+          value: signin_permission.id,
+          checked: true,
+        },
+        {
+          id: supported_permission_checkbox_id(application, permission1),
+          name: "user[supported_permission_ids][]",
+          label: permission1.name,
+          value: permission1.id,
+          checked: true,
+        },
+        {
+          id: supported_permission_checkbox_id(application, permission2),
+          name: "user[supported_permission_ids][]",
+          label: permission2.name,
+          value: permission2.id,
+          checked: false,
+        },
+      ]
+
+      assert_equal expected_items, items
+    end
+  end
 end