Improve registrar area bulk change UI

#662

app/api/repp/domain_contacts_v1.rb

@@ -22,7 +22,8 @@ module Repp
 
           if predecessor == successor
             error!({ error: { type: 'invalid_request_error',
-                              message: 'Successor contact must be different from predecessor' } },
+                              message: 'New contact ID must be different from current' \
+                                ' contact ID' } },
                    :bad_request)
           end
 

app/assets/javascripts/popover.js

@@ -0,0 +1,9 @@
+(function() {
+    function initPopover() {
+        $(function () {
+            $('[data-toggle="popover"]').popover();
+        })
+    }
+
+    initPopover();
+})();

app/assets/javascripts/registrar-manifest.coffee

@@ -7,6 +7,7 @@
 #= require select2
 #= require datepicker
 #= require spell_check
+#= require popover
 #= require shared/general
 #= require registrar/autocomplete
 #= require registrar/application

app/controllers/registrar/domain_transfers_controller.rb

@@ -1,5 +1,5 @@
 class Registrar
-  class DomainTransfersController < DeppController
+  class DomainTransfersController < BulkChangeController
     before_action do
       authorize! :transfer, Depp::Domain
     end
@@ -58,7 +58,7 @@ class Registrar
           redirect_to registrar_domains_url
         else
           @api_errors = parsed_response[:errors]
-          render :new
+          render file: 'registrar/bulk_change/new', locals: { active_tab: :bulk_transfer }
         end
       else
         params[:request] = true # EPP domain:transfer "op" attribute

app/views/registrar/bulk_change/_bulk_transfer_form.html.erb

@@ -0,0 +1,35 @@
+<%= form_tag registrar_domain_transfers_path, multipart: true, class: 'form-horizontal' do %>
+    <%= render 'registrar/domain_transfers/form/api_errors' %>
+
+    <div class="form-group">
+        <div class="col-md-2 control-label">
+            <%= label_tag :batch_file %>
+        </div>
+        <div class="col-md-4">
+            <%= file_field_tag :batch_file, required: true %>
+            <span class="help-block"><%= t '.file_field_hint' %></span>
+        </div>
+    </div>
+
+    <div class="form-group">
+        <div class="col-md-4 col-md-offset-2 text-right">
+            <button class="btn btn-warning">
+                <%= t '.submit_btn' %>
+            </button>
+        </div>
+    </div>
+
+    <div class="form-group">
+        <div class="col-md-6">
+            <a class="btn btn-default btn-xs" role="button" data-toggle="collapse"
+               href="#bulk_change_bulk_transfer_help" aria-expanded="false"
+               aria-controls="collapseExample"><%= t '.help_btn' %>
+            </a>
+            <div class="collapse" id="bulk_change_bulk_transfer_help">
+                <div class="well">
+                    <%= t '.help' %>
+                </div>
+            </div>
+        </div>
+    </div>
+<% end %>

app/views/registrar/bulk_change/_nameserver_form.html.erb

@@ -6,7 +6,7 @@
             <%= label_tag :old_hostname %>
         </div>
 
-        <div class="col-md-5">
+        <div class="col-md-4">
             <%= text_field_tag :old_hostname, params[:old_hostname], required: true,
                                class: 'form-control' %>
         </div>
@@ -17,7 +17,7 @@
             <%= label_tag :new_hostname %>
         </div>
 
-        <div class="col-md-5">
+        <div class="col-md-4">
             <%= text_field_tag :new_hostname, params[:new_hostname], required: true,
                                class: 'form-control' %>
         </div>
@@ -28,7 +28,7 @@
             <%= label_tag :ipv4 %>
         </div>
 
-        <div class="col-md-3">
+        <div class="col-md-4">
             <%= text_area_tag :ipv4, params[:ipv4], class: 'form-control' %>
         </div>
     </div>
@@ -38,17 +38,31 @@
             <%= label_tag :ipv6 %>
         </div>
 
-        <div class="col-md-3">
+        <div class="col-md-4">
             <%= text_area_tag :ipv6, params[:ipv6], class: 'form-control' %>
             <span class="help-block"><%= t '.ip_hint' %></span>
         </div>
     </div>
 
     <div class="form-group">
-        <div class="col-md-5 col-md-offset-2 text-right">
+        <div class="col-md-4 col-md-offset-2 text-right">
             <button class="btn btn-warning">
                 <%= t '.replace_btn' %>
             </button>
         </div>
     </div>
+
+    <div class="form-group">
+        <div class="col-md-6">
+            <a class="btn btn-default btn-xs" role="button" data-toggle="collapse"
+               href="#bulk_change_nameserver_help" aria-expanded="false"
+               aria-controls="collapseExample"><%= t '.help_btn' %>
+            </a>
+            <div class="collapse" id="bulk_change_nameserver_help">
+                <div class="well">
+                    <%= t '.help' %>
+                </div>
+            </div>
+        </div>
+    </div>
 <% end %>

app/views/registrar/bulk_change/_tech_contact_form.html.erb

@@ -7,10 +7,10 @@
 
     <div class="form-group">
         <div class="col-md-2 control-label">
-            <%= label_tag :predecessor %>
+            <%= label_tag :predecessor, t('.predecessor') %>
         </div>
 
-        <div class="col-md-5">
+        <div class="col-md-4">
             <%= text_field_tag :predecessor, params[:predecessor],
                                list: :contacts,
                                required: true,
@@ -21,10 +21,10 @@
 
     <div class="form-group">
         <div class="col-md-2 control-label">
-            <%= label_tag :successor %>
+            <%= label_tag :successor, t('.successor') %>
         </div>
 
-        <div class="col-md-5">
+        <div class="col-md-4">
             <%= text_field_tag :successor, params[:successor],
                                list: :contacts,
                                required: true,
@@ -33,12 +33,25 @@
     </div>
 
     <div class="form-group">
-        <div class="col-md-5 col-md-offset-2 text-right">
+        <div class="col-md-4 col-md-offset-2 text-right">
             <button class="btn btn-warning">
                 <%= t '.submit_btn' %>
             </button>
         </div>
     </div>
+
+    <div class="form-group">
+        <div class="col-md-6">
+            <a class="btn btn-default btn-xs" role="button" data-toggle="collapse"
+               href="#bulk_change_tech_contact_help" aria-expanded="false"
+               aria-controls="collapseExample"><%= t '.help_btn' %></a>
+            <div class="collapse" id="bulk_change_tech_contact_help">
+                <div class="well">
+                    <%= t '.help' %>
+                </div>
+            </div>
+        </div>
+    </div>
 <% end %>
 
 <datalist id="contacts">

app/views/registrar/bulk_change/new.html.erb

@@ -6,8 +6,7 @@
     <h1><%= t '.header' %></h1>
 </div>
 
-<div class="row">
-    <div class="col-md-10">
+
         <ul class="nav nav-tabs">
             <li class="<%= 'active' if active_tab == :technical_contact %>">
                 <a href="#technical_contact" data-toggle="tab"><%= t '.technical_contact' %></a>
@@ -16,6 +15,10 @@
             <li class="<%= 'active' if active_tab == :nameserver %>">
                 <a href="#nameserver" data-toggle="tab"><%= t '.nameserver' %></a>
             </li>
+
+            <li class="<%= 'active' if active_tab == :bulk_transfer %>">
+                <a href="#bulk_transfer" data-toggle="tab"><%= t '.bulk_transfer' %></a>
+            </li>
         </ul>
 
         <div class="tab-content">
@@ -27,6 +30,8 @@
             <div class="tab-pane<%= ' active' if active_tab == :nameserver %>" id="nameserver">
                 <%= render 'nameserver_form' %>
             </div>
+
+            <div class="tab-pane<%= ' active' if active_tab == :bulk_transfer %>" id="bulk_transfer">
+                <%= render 'bulk_transfer_form' %>
+            </div>
         </div>
-    </div>
-</div>

app/views/registrar/domain_transfers/_form.html.erb

@@ -1,4 +1,6 @@
 <%= form_tag registrar_domain_transfers_path, multipart: true, class: 'form-horizontal' do %>
+    <%= render 'registrar/domain_transfers/form/api_errors' %>
+
     <div class="form-group">
         <div class="col-md-3 control-label">
             <%= label_tag :domain_name, nil, class: 'required' %>
@@ -30,7 +32,7 @@
     <div class="form-group">
         <div class="col-md-10 text-right">
             <button class="btn btn-warning">
-                <%= t '.transfer_btn' %>
+                <%= t '.submit_btn' %>
             </button>
         </div>
     </div>

app/views/registrar/domain_transfers/form/_batch.html.erb

@@ -1,19 +0,0 @@
-<%= form_tag registrar_domain_transfers_path, multipart: true, class: 'form-horizontal' do %>
-    <div class="form-group">
-        <div class="col-md-3 control-label">
-            <%= label_tag :batch_file %>
-        </div>
-        <div class="col-md-7">
-            <%= file_field_tag :batch_file, required: true %>
-            <span class="help-block"><%= t '.batch_file_help' %></span>
-        </div>
-    </div>
-
-    <div class="form-group">
-        <div class="col-md-10 text-right">
-            <button class="btn btn-warning">
-                <%= t '.transfer_btn' %>
-            </button>
-        </div>
-    </div>
-<% end %>

app/views/registrar/domain_transfers/new.html.erb

@@ -6,24 +6,6 @@
 
 <div class="row">
     <div class="col-md-8">
-        <ul class="nav nav-tabs">
-            <li class="active">
-                <a href="#single" data-toggle="tab"><%= t '.single' %></a>
-            </li>
-
-            <li>
-                <a href="#batch" data-toggle="tab"><%= t '.batch' %></a>
-            </li>
-        </ul>
-
-        <div class="tab-content">
-            <div class="tab-pane active" id="single">
-                <%= render 'registrar/domain_transfers/form/single' %>
-            </div>
-
-            <div class="tab-pane" id="batch">
-                <%= render 'registrar/domain_transfers/form/batch' %>
-            </div>
-        </div>
+        <%= render 'form' %>
     </div>
 </div>

config/locales/registrar/bulk_change.en.yml

@@ -5,10 +5,27 @@ en:
         header: Bulk change
         technical_contact: Technical contact
         nameserver: Nameserver
+        bulk_transfer: Bulk transfer
 
       tech_contact_form:
+        predecessor: Current contact ID
+        successor: New contact ID
         submit_btn: Replace technical contacts
+        help_btn: Toggle help
+        help: >-
+          Replace technical contact specified in "current contact ID" with the one in "new
+          contact ID" on any domain registered under this registrar
 
       nameserver_form:
         ip_hint: One IP per line
         replace_btn: Replace nameserver
+        help_btn: Toggle help
+        help: >-
+          Replace nameserver specified in the "old hostname" with the one in "new hostname" with
+          optional IPv4 and IPv6 addresses on any domain registered under this registrar
+
+      bulk_transfer_form:
+        file_field_hint: CSV file with domain list provided by another registrar
+        submit_btn: Transfer
+        help_btn: Toggle help
+        help: Transfer domains in the csv file with correct transfer code to this registrar

config/locales/registrar/domain_transfers.en.yml

@@ -3,17 +3,10 @@ en:
     domain_transfers:
       new:
         header: Domain transfer
-        single: One by one
-        batch: Batch
 
       create:
         header: Domain transfer
         transferred: "%{count} domains have been successfully transferred"
 
       form:
-        single:
-          transfer_btn: Transfer
-
-        batch:
-          batch_file_help: CSV file with domain list provided by another registrar
-          transfer_btn: Transfer batch
+        submit_btn: Transfer

test/integration/api/domain_contacts_test.rb

@@ -91,7 +91,7 @@ class APIDomainContactsTest < ActionDispatch::IntegrationTest
           { 'HTTP_AUTHORIZATION' => http_auth_key }
     assert_response :bad_request
     assert_equal ({ error: { type: 'invalid_request_error',
-                             message: 'Successor contact must be different from predecessor' } }),
+                             message: 'New contact ID must be different from current contact ID' } }),
                  JSON.parse(response.body, symbolize_names: true)
   end
 

test/integration/registrar/bulk_change/bulk_transfer_test.rb

@@ -1,11 +1,11 @@
 require 'test_helper'
 
-class RegistrarDomainTransfersTest < ActionDispatch::IntegrationTest
+class RegistrarAreaBulkTransferTest < ActionDispatch::IntegrationTest
   setup do
     login_as users(:api_goodnames)
   end
 
-  def test_batch_transfer_succeeds
+  def test_transfer_multiple_domains_in_bulk
     request_body = { data: { domainTransfers: [{ domainName: 'shop.test', transferCode: '65078d5' }] } }
     headers = { 'Content-type' => 'application/json' }
     request_stub = stub_request(:post, /domain_transfers/).with(body: request_body,
@@ -16,28 +16,26 @@ class RegistrarDomainTransfersTest < ActionDispatch::IntegrationTest
                                                }] }.to_json, status: 200)
 
     visit registrar_domains_url
-    click_link 'Transfer'
-
-    click_on 'Batch'
+    click_link 'Bulk change'
+    click_link 'Bulk transfer'
     attach_file 'Batch file', Rails.root.join('test', 'fixtures', 'files', 'valid_domains_for_transfer.csv').to_s
-    click_button 'Transfer batch'
+    click_button 'Transfer'
 
     assert_requested request_stub
     assert_current_path registrar_domains_path
     assert_text '1 domains have been successfully transferred'
   end
 
-  def test_batch_transfer_fails_gracefully
+  def test_fail_gracefully
     body = { errors: [{ title: 'epic fail' }] }.to_json
     headers = { 'Content-type' => 'application/json' }
     stub_request(:post, /domain_transfers/).to_return(status: 400, body: body, headers: headers)
 
     visit registrar_domains_url
-    click_link 'Transfer'
-
-    click_on 'Batch'
+    click_link 'Bulk change'
+    click_link 'Bulk transfer'
     attach_file 'Batch file', Rails.root.join('test', 'fixtures', 'files', 'valid_domains_for_transfer.csv').to_s
-    click_button 'Transfer batch'
+    click_button 'Transfer'
 
     assert_text 'epic fail'
   end

test/integration/registrar/bulk_change/tech_contact_test.rb

@@ -16,8 +16,8 @@ class RegistrarAreaTechContactBulkChangeTest < ActionDispatch::IntegrationTest
     visit registrar_domains_url
     click_link 'Bulk change'
 
-    fill_in 'Predecessor', with: 'william-001'
-    fill_in 'Successor', with: 'john-001'
+    fill_in 'Current contact ID', with: 'william-001'
+    fill_in 'New contact ID', with: 'john-001'
     click_on 'Replace technical contacts'
 
     assert_requested request_stub
@@ -36,12 +36,12 @@ class RegistrarAreaTechContactBulkChangeTest < ActionDispatch::IntegrationTest
     visit registrar_domains_url
     click_link 'Bulk change'
 
-    fill_in 'Predecessor', with: 'william-001'
-    fill_in 'Successor', with: 'john-001'
+    fill_in 'Current contact ID', with: 'william-001'
+    fill_in 'New contact ID', with: 'john-001'
     click_on 'Replace technical contacts'
 
     assert_text 'epic fail'
-    assert_field 'Predecessor', with: 'william-001'
-    assert_field 'Successor', with: 'john-001'
+    assert_field 'Current contact ID', with: 'william-001'
+    assert_field 'New contact ID', with: 'john-001'
   end
 end