Merge branch '48934' into 'master'

Fix #48934 - Focus on text input on danger confirmation

Closes #48934

See merge request gitlab-org/gitlab-ce!20435

5 files changed, 29 insertions, 2 deletions

diff --git a/app/assets/javascripts/confirm_danger_modal.js b/app/assets/javascripts/confirm_danger_modal.js
index 1638e09132b..b0c85c2572e 100644
--- a/app/assets/javascripts/confirm_danger_modal.js
+++ b/app/assets/javascripts/confirm_danger_modal.js
@@ -2,13 +2,16 @@ import $ from 'jquery';
 import { rstrip } from './lib/utils/common_utils';
 
 function openConfirmDangerModal($form, text) {
+  const $input = $('.js-confirm-danger-input');
+  $input.val('');
+
   $('.js-confirm-text').text(text || '');
-  $('.js-confirm-danger-input').val('');
   $('#modal-confirm-danger').modal('show');
 
   const confirmTextMatch = $('.js-confirm-danger-match').text();
   const $submit = $('.js-confirm-danger-submit');
   $submit.disable();
+  $input.focus();
 
   $('.js-confirm-danger-input').off('input').on('input', function handleInput() {
     const confirmText = rstrip($(this).val());
diff --git a/changelogs/unreleased/48934.yml b/changelogs/unreleased/48934.yml
new file mode 100644
index 00000000000..8e2e53ed198
--- /dev/null
+++ b/changelogs/unreleased/48934.yml
@@ -0,0 +1,5 @@
+---
+title: Improve danger confirmation modals by focusing input field
+merge_request:
+author: Jamie Schembri
+type: added
diff --git a/spec/features/groups_spec.rb b/spec/features/groups_spec.rb
index 053e3b189c3..e62bd6f8187 100644
--- a/spec/features/groups_spec.rb
+++ b/spec/features/groups_spec.rb
@@ -154,6 +154,12 @@ describe 'Group' do
       end
     end
 
+    it 'focuses confirmation field on remove group' do
+      click_button('Remove group')
+
+      expect(page).to have_selector '#confirm_name_input:focus'
+    end
+
     it 'removes group' do
       expect { remove_with_confirm('Remove group', group.path) }.to change {Group.count}.by(-1)
       expect(group.members.all.count).to be_zero
diff --git a/spec/features/projects/settings/user_transfers_a_project_spec.rb b/spec/features/projects/settings/user_transfers_a_project_spec.rb
index 96b7cf1f93b..2fdbc04fa62 100644
--- a/spec/features/projects/settings/user_transfers_a_project_spec.rb
+++ b/spec/features/projects/settings/user_transfers_a_project_spec.rb
@@ -10,7 +10,7 @@ describe 'Projects > Settings > User transfers a project', :js do
     sign_in(user)
   end
 
-  def transfer_project(project, group)
+  def transfer_project(project, group, confirm: true)
     visit edit_project_path(project)
 
     page.within('.js-project-transfer-form') do
@@ -21,6 +21,8 @@ describe 'Projects > Settings > User transfers a project', :js do
 
     click_button('Transfer project')
 
+    return unless confirm
+
     fill_in 'confirm_name_input', with: project.name
 
     click_button 'Confirm'
@@ -28,6 +30,11 @@ describe 'Projects > Settings > User transfers a project', :js do
     wait_for_requests
   end
 
+  it 'focuses on the confirmation field' do
+    transfer_project(project, group, confirm: false)
+    expect(page).to have_selector '#confirm_name_input:focus'
+  end
+
   it 'allows transferring a project to a group' do
     old_path = project_path(project)
     transfer_project(project, group)
diff --git a/spec/features/projects_spec.rb b/spec/features/projects_spec.rb
index 00946bccd9a..39b47d99040 100644
--- a/spec/features/projects_spec.rb
+++ b/spec/features/projects_spec.rb
@@ -155,6 +155,12 @@ describe 'Project' do
       visit edit_project_path(project)
     end
 
+    it 'focuses on the confirmation field' do
+      click_button 'Remove project'
+
+      expect(page).to have_selector '#confirm_name_input:focus'
+    end
+
     it 'removes a project' do
       expect { remove_with_confirm('Remove project', project.path) }.to change { Project.count }.by(-1)
       expect(page).to have_content "Project '#{project.full_name}' is in the process of being deleted."