Add the GlModal to SSH keys deletion

Updated the admin and user SSH key delete confirmation to use GlModal.
This uses the shared modal feature to trigger the GlModal on click
of the delete buttons and processes the deletion on confirmation.

Also revised the wording of the buttons to "Delete" from "Remove"
to make sure that the wording is consistent across the product.

Updated the specs to work with the new modal as well

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

@@ -3335,6 +3335,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 ""
 
@@ -26011,6 +26014,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