Move invitations new to use GOV.UK Design System

app/controllers/account/permissions_controller.rb

@@ -1,6 +1,4 @@
 class Account::PermissionsController < ApplicationController
-  include PermissionsHelper
-
   layout "admin_layout"
 
   before_action :authenticate_user!
@@ -10,6 +8,8 @@ def index
 
     authorize [:account, @application], :view_permissions?
 
-    @permissions = permissions_for(@application).sort_by { |permission| current_user.has_permission?(permission) ? 0 : 1 }
+    @permissions = @application
+      .sorted_supported_permissions_grantable_from_ui
+      .sort_by { |permission| current_user.has_permission?(permission) ? 0 : 1 }
   end
 end

app/controllers/invitations_controller.rb

@@ -6,7 +6,7 @@ class InvitationsController < Devise::InvitationsController
   before_action :redirect_if_invitee_already_exists, only: :create
   before_action :configure_permitted_parameters, only: :create
 
-  layout "admin_layout", only: %i[edit update]
+  layout "admin_layout", only: %i[new create edit update]
 
   include UserPermissionsControllerMethods
   helper_method :applications_and_permissions

app/helpers/users_helper.rb

@@ -56,4 +56,44 @@ def user_name(user)
     anchor_tag = link_to(user.name, edit_user_path(user), class: "govuk-link")
     user.suspended? ? content_tag(:del, anchor_tag) : anchor_tag
   end
+
+  def options_for_role_select(selected: nil)
+    assignable_user_roles.map do |role|
+      { text: role.humanize, value: role }.tap do |option|
+        option[:selected] = true if option[:value] == selected
+      end
+    end
+  end
+
+  def options_for_organisation_select(selected: nil)
+    [{ text: "None", value: nil }] + policy_scope(Organisation).map do |organisation|
+      { text: organisation.name_with_abbreviation, value: organisation.id }.tap do |option|
+        option[:selected] = true if option[:value] == selected
+      end
+    end
+  end
+
+  def items_for_permission_checkboxes(application:, user: nil)
+    application.sorted_supported_permissions_grantable_from_ui.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
+
+  def formatted_permission_name(application_name, permission_name)
+    if permission_name == SupportedPermission::SIGNIN_NAME
+      "Has access to #{application_name}?"
+    else
+      permission_name
+    end
+  end
 end

app/models/user.rb

@@ -167,15 +167,19 @@ def eager_loaded_permission_for(application)
   end
 
   def permission_ids_for(application)
-    application_permissions.where(application_id: application.id).pluck(:supported_permission_id)
+    application_permissions.select { |ap| ap.application_id == application.id }.map(&:supported_permission_id)
   end
 
   def has_access_to?(application)
     application_permissions.detect { |permission| permission.supported_permission_id == application.signin_permission.id }
   end
 
   def has_permission?(supported_permission)
-    supported_permissions.exists?(supported_permission.id)
+    if persisted?
+      supported_permissions.exists?(supported_permission.id)
+    else
+      supported_permissions.any? { |sp| sp.id == supported_permission.id }
+    end
   end
 
   def permissions_synced!(application)

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

@@ -1,40 +1,110 @@
 <% content_for :title, "Create new user" %>
+<% 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: "Create new user",
+       }
+     ]
+   })
+%>
 
-<h1>Create new user</h1>
-
-<%= form_for resource, :as => resource_name, :url => invitation_path(resource_name), :html => {:method => :post, :class => 'well'} do |f| %>
-  <%= render "devise/shared/error_messages", resource: resource %>
-
-  <p class="form-group">
-    <%= f.label :name %>
-    <%= f.text_field :name, autofocus: true, autocomplete: "off", class: 'form-control input-md-6 ' %>
-  </p>
-
-  <p class="form-group">
-    <%= f.label :email %>
-    <%= f.text_field :email, autocomplete: "off", class: 'form-control input-md-6 add-label-margin' %>
-  </p>
-
-  <% if policy(User).assign_role? %>
-    <p class="form-group">
-      <%= f.label :role %><br />
-      <%= f.select :role, options_for_select(assignable_user_roles.map(&:humanize).zip(assignable_user_roles), f.object.role), {}, class: "chosen-select form-control", 'data-module' => 'chosen' %>
-      <span class="help-block">
-        <strong>Superadmins</strong> can create and edit all user types and edit applications.<br />
-        <strong>Admins</strong> can create and edit normal users.<br />
-        <strong>Super Organisation Admins</strong> can unlock and unsuspend their organisation and related organisation accounts.<br />
-        <strong>Organisation Admins</strong> can unlock and unsuspend their organisation accounts.
-      </span>
-    </p>
-  <% end %>
-
-  <p class="form-group">
-    <%= f.label :organisation_id, "Organisation" %><br />
-    <%= f.select :organisation_id, organisation_options(f), organisation_select_options, { class: "chosen-select form-control", 'data-module' => 'chosen' } %>
-  </p>
-
-  <h2 class="add-vertical-margins">Permissions</h2>
-  <%= render partial: "shared/user_permissions", locals: { user_object: f.object }%>
-
-  <%= f.submit "Create user and send email", :class => 'btn btn-success' %>
-<% end %>
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+    <%= form_for resource, as: resource_name, url: invitation_path(resource_name), html: { method: :post } do |f| %>
+      <% if f.object.errors.any? %>
+        <%= render "govuk_publishing_components/components/error_summary", {
+          id: "error-summary",
+          title: "There was a problem with your new user",
+          items: f.object.errors.map do |error|
+            {
+              text: error.full_message,
+              href: "#user_#{error.attribute}",
+            }
+          end
+        } %>
+      <% end %>
+
+      <%= render "govuk_publishing_components/components/input", {
+        label: { text: "Name" },
+        name: "user[name]",
+        id: "user_name",
+        error_items: f.object.errors.full_messages_for(:name).map { |message| { text: message } },
+        value: f.object.name,
+        autocomplete: "off",
+      } %>
+
+      <%= render "govuk_publishing_components/components/input", {
+        label: { text: "Email" },
+        name: "user[email]",
+        id: "user_email",
+        error_items: f.object.errors.full_messages_for(:email).map { |message| { text: message } },
+        value: f.object.email,
+        autocomplete: "off",
+      } %>
+
+      <%= render "govuk_publishing_components/components/select", {
+        id: "user_organisation_id",
+        name: "user[organisation_id]",
+        label: "Organisation",
+        options: options_for_organisation_select(selected: f.object.organisation_id)
+      } %>
+
+      <% if policy(User).assign_role? %>
+        <% role_hint = capture do %>
+          <%= render "govuk_publishing_components/components/list", {
+            visible_counters: true,
+            items: [
+              "<strong>Superadmins</strong> can create and edit all user types and edit applications.",
+              "<strong>Admins</strong> can create and edit normal users.",
+              "<strong>Super Organisation Admins</strong> can unlock and unsuspend their organisation and related organisation accounts.",
+              "<strong>Organisation Admins</strong> can unlock and unsuspend their organisation accounts.",
+            ]
+          } %>
+        <% end %>
+
+        <%= render "govuk_publishing_components/components/select", {
+          id: "user_role",
+          name: "user[role]",
+          label: "Role",
+          hint: role_hint,
+          options: options_for_role_select(selected: f.object.role),
+        } %>
+      <% end %>
+
+      <%= 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:, user: f.object),
+              })
+            },
+          }
+        end
+      } %>
+
+      <div class="govuk-button-group">
+        <%= render "govuk_publishing_components/components/button", {
+          text: "Create user and send email",
+        } %>
+
+        <%= link_to "Cancel", users_path, class: "govuk-link govuk-link--no-visited-state" %>
+      </div>
+    <% end %>
+  </div>
+</div>