Merge branch '235945-replace-the-delete-ssh-confirmation-dialog-with-a-pajamas-modal' into 'master'

Replace the delete SSH confirmation dialog with GlModal

See merge request gitlab-org/gitlab!42824

app/assets/javascripts/pages/admin/keys/index.js

+import initConfirmModal from '~/confirm_modal';
+
+document.addEventListener('DOMContentLoaded', () => {
+  initConfirmModal();
+});

app/assets/javascripts/pages/admin/users/keys/index.js

+import initConfirmModal from '~/confirm_modal';
+
+document.addEventListener('DOMContentLoaded', () => {
+  initConfirmModal();
+});

app/assets/javascripts/pages/profiles/keys/index.js

+import initConfirmModal from '~/confirm_modal';
 import AddSshKeyValidation from '~/profile/add_ssh_key_validation';
 
 document.addEventListener('DOMContentLoaded', () => {
+  initConfirmModal();
+
   const input = document.querySelector('.js-add-ssh-key-validation-input');
   if (!input) return;
 

app/helpers/profiles_helper.rb

@@ -29,4 +29,19 @@ module ProfilesHelper
   def user_profile?
     params[:controller] == 'users'
   end
+
+  def ssh_key_delete_modal_data(key, is_admin)
+    {
+        path: path_to_key(key, is_admin),
+        method: 'delete',
+        qa_selector: 'delete_ssh_key_button',
+        modal_attributes: {
+            'data-qa-selector': 'ssh_key_delete_modal',
+            title: _('Are you sure you want to delete this SSH key?'),
+            message: _('This action cannot be undone, and will permanently delete the %{key} SSH key') % { key: key.title },
+            okVariant: 'danger',
+            okTitle: _('Delete')
+        }
+    }
+  end
 end

app/views/profiles/keys/_key.html.haml

@@ -23,9 +23,10 @@
       %span.expires.gl-mr-3
         = s_('Profiles|Expires:')
         = key.expires_at ? key.expires_at.to_date : _('Never')
-      %span.key-created-at
-        = s_('Profiles|Created %{time_ago}'.html_safe) % { time_ago:time_ago_with_tooltip(key.created_at)}
+      %span.key-created-at.gl-display-flex.gl-align-items-center
+        = s_('Profiles|Created%{time_ago}'.html_safe) % { time_ago: time_ago_with_tooltip(key.created_at, html_class: 'gl-ml-2')}
         - if key.can_delete?
-          = link_to path_to_key(key, is_admin), data: { confirm: _('Are you sure?')}, method: :delete, class: "btn btn-transparent gl-ml-3 align-baseline" do
-            %span.sr-only= _('Remove')
+          .gl-ml-3
+            = button_to '#', class: "btn btn-default gl-button btn-default-tertiary js-confirm-modal-button", data: ssh_key_delete_modal_data(key, is_admin) do
+              %span.sr-only= _('Delete')
               = sprite_icon('remove')

app/views/profiles/keys/_key_details.html.haml

@@ -38,4 +38,4 @@
   .col-md-12
     .float-right
       - if @key.can_delete?
-        = link_to _('Remove'), path_to_key(@key, is_admin), data: {confirm: _('Are you sure?')}, method: :delete, class: "btn btn-remove delete-key qa-delete-key-button"
+        = button_to _('Delete'), '#', class: "btn btn-danger gl-button delete-key js-confirm-modal-button", data: ssh_key_delete_modal_data(@key, is_admin)

changelogs/unreleased/235945-replace-the-delete-ssh-confirmation-dialog-with-a-pajamas-modal.yml

+---
+title: Updated the admin and user SSH key delete confirmation to use GlModal
+merge_request: 42824
+author:
+type: changed

ee/spec/features/admin/admin_users_spec.rb

@@ -134,13 +134,13 @@ RSpec.describe "Admin::Users" do
       # SSH key should be the first in the list
       within('ul.content-list li.key-list-item:nth-of-type(1)') do
         expect(page).to have_content(key2.title)
-        expect(page).to have_css('a[data-method=delete]', text: 'Remove')
+        expect(page).to have_button('Delete')
       end
 
       # Next, LDAP key
       within('ul.content-list li.key-list-item:nth-of-type(2)') do
         expect(page).to have_content(key1.title)
-        expect(page).not_to have_css('a[data-method=delete]')
+        expect(page).not_to have_button('Delete')
       end
     end
   end

locale/gitlab.pot

@@ -3345,6 +3345,9 @@ msgstr ""
 msgid "Are you sure you want to delete this %{typeOfComment}?"
 msgstr ""
 
+msgid "Are you sure you want to delete this SSH key?"
+msgstr ""
+
 msgid "Are you sure you want to delete this board?"
 msgstr ""
 
@@ -26024,6 +26027,9 @@ msgstr ""
 msgid "This action can lead to data loss. To prevent accidental actions we ask you to confirm your intention."
 msgstr ""
 
+msgid "This action cannot be undone, and will permanently delete the %{key} SSH key"
+msgstr ""
+
 msgid "This action cannot be undone. You will lose the project's repository and all content: issues, merge requests, etc."
 msgstr ""
 

qa/qa/page/profile/ssh_keys.rb

@@ -11,8 +11,9 @@ module QA
           element :add_key_button
         end
 
-        view 'app/views/profiles/keys/_key_details.html.haml' do
-          element :delete_key_button
+        view 'app/helpers/profiles_helper.rb' do
+          element :delete_ssh_key_button
+          element :ssh_key_delete_modal
         end
 
         view 'app/views/profiles/keys/_key_table.html.haml' do
@@ -38,10 +39,13 @@ module QA
         def remove_key(title)
           click_link(title)
 
+          click_element(:delete_ssh_key_button)
+
           # Retrying due to https://gitlab.com/gitlab-org/gitlab/-/issues/255287
           retry_on_exception do
-            accept_alert do
-              click_element(:delete_key_button)
+            wait_for_animated_element(:ssh_key_delete_modal)
+            within_element(:ssh_key_delete_modal) do
+              click_button('Delete')
             end
           end
         end

spec/features/admin/admin_users_spec.rb

@@ -620,7 +620,7 @@ RSpec.describe "Admin::Users" do
     end
   end
 
-  describe 'show user keys' do
+  describe 'show user keys', :js do
     let!(:key1) do
       create(:key, user: user, title: "ssh-rsa Key1", key: "ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQC4FIEBXGi4bPU8kzxMefudPIJ08/gNprdNTaO9BR/ndy3+58s2HCTw2xCHcsuBmq+TsAqgEidVq4skpqoTMB+Uot5Uzp9z4764rc48dZiI661izoREoKnuRQSsRqUTHg5wrLzwxlQbl1MVfRWQpqiz/5KjBC7yLEb9AbusjnWBk8wvC1bQPQ1uLAauEA7d836tgaIsym9BrLsMVnR4P1boWD3Xp1B1T/ImJwAGHvRmP/ycIqmKdSpMdJXwxcb40efWVj0Ibbe7ii9eeoLdHACqevUZi6fwfbymdow+FeqlkPoHyGg3Cu4vD/D8+8cRc7mE/zGCWcQ15Var83Tczour Key1")
     end
@@ -643,7 +643,11 @@ RSpec.describe "Admin::Users" do
       expect(page).to have_content(key2.title)
       expect(page).to have_content(key2.key)
 
-      click_link 'Remove'
+      click_button 'Delete'
+
+      page.within('.modal') do
+        page.click_button('Delete')
+      end
 
       expect(page).not_to have_content(key2.title)
     end

spec/features/profiles/keys_spec.rb

@@ -71,21 +71,35 @@ RSpec.describe 'Profile > SSH Keys' do
     expect(page).to have_content(key.title)
   end
 
-  it 'User removes a key via the key index' do
-    create(:key, user: user)
-    visit profile_keys_path
-
-    click_link('Remove')
+  describe 'User removes a key', :js do
+    shared_examples 'removes key' do
+      it 'removes key' do
+        visit path
+        click_button('Delete')
+
+        page.within('.modal') do
+          page.click_button('Delete')
+        end
 
         expect(page).to have_content('Your SSH keys (0)')
       end
+    end
 
-  it 'User removes a key via its details page' do
-    key = create(:key, user: user)
-    visit profile_key_path(key)
+    context 'via the key index' do
+      before do
+        create(:key, user: user)
+      end
 
-    click_link('Remove')
+      let(:path) { profile_keys_path }
 
-    expect(page).to have_content('Your SSH keys (0)')
+      it_behaves_like 'removes key'
+    end
+
+    context 'via its details page' do
+      let(:key) { create(:key, user: user) }
+      let(:path) { profile_keys_path(key) }
+
+      it_behaves_like 'removes key'
+    end
   end
 end