SSH Keys: Migrate page to use SettingsSection and CRUD

app/views/user_settings/ssh_keys/_key.html.haml

@@ -40,10 +40,10 @@
       = _('Never')
 
   %td{ data: { label: _('Actions'), testid: 'actions' } }
-    %div{ class: 'gl-display-flex! gl-pl-0!' }
+    .gl-flex.gl-items-center.gl-justify-end.gl-gap-3.-gl-m-3
       - if key.can_delete?
         - if key.signing? && !is_admin
-          = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: 'js-confirm-modal-button', 'aria-label' => _('Revoke'), data: ssh_key_revoke_modal_data(key, revoke_user_settings_ssh_key_path(key)) }) do
+          = render Pajamas::ButtonComponent.new(size: :small, category: :secondary, variant: :danger, button_options: { class: 'js-confirm-modal-button', 'aria-label' => _('Revoke'), data: ssh_key_revoke_modal_data(key, revoke_user_settings_ssh_key_path(key)) }) do
             = _('Revoke')
-        .gl-pl-3
-          = render Pajamas::ButtonComponent.new(size: :small, icon: 'remove', button_options: { title: _('Remove'), 'aria-label' => _('Remove'), class: 'js-confirm-modal-button', data: ssh_key_delete_modal_data(key, path_to_key(key, is_admin)) })
+
+        = render Pajamas::ButtonComponent.new(icon: 'remove', category: :tertiary, button_options: { title: _('Remove'), 'aria-label' => _('Remove'), class: 'js-confirm-modal-button', data: ssh_key_delete_modal_data(key, path_to_key(key, is_admin)) })

app/views/user_settings/ssh_keys/_key_table.html.haml

@@ -11,7 +11,7 @@
           %th= s_('Profiles|Created')
           %th= s_('Profiles|Last used')
           %th= s_('Profiles|Expires')
-          %th= _('Actions')
+          %th.gl-text-right= _('Actions')
       = render partial: 'user_settings/ssh_keys/key', collection: @keys, locals: { is_admin: is_admin }
 - else
   - if is_admin

app/views/user_settings/ssh_keys/index.html.haml

 - page_title _('SSH Keys')
 - add_page_specific_style 'page_bundles/profile'
 - @force_desktop_expanded_sidebar = true
-- add_form_class = 'gl-hidden' if !form_errors(@key)
 - hide_class = 'gl-hidden' if form_errors(@key)
 
-.settings-section.js-search-settings-section
-  .settings-sticky-header
-    .settings-sticky-header-inner
-      %h4.gl-my-0
-        = page_title
-  %p.gl-text-secondary
+= render ::Layouts::SettingsSectionComponent.new(page_title) do |c|
+  - c.with_description do
     = _('SSH keys allow you to establish a secure connection between your computer and GitLab.')
     - config_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_instance_configuration_url }
     = html_escape(s_('SSH fingerprints verify that the client is connecting to the correct host. Check the %{config_link_start}current instance configuration%{config_link_end}.')) % { config_link_start: config_link_start, config_link_end: '</a>'.html_safe }
 
-  = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card js-toggle-container' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
-    - c.with_header do
-      .gl-new-card-title-wrapper
-        %h3.gl-new-card-title
-          = _('Your SSH keys')
-        .gl-new-card-count
-          = sprite_icon('key', css_class: 'gl-mr-2')
-          = @keys.count
-      .gl-new-card-actions
-        = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: "js-toggle-button js-toggle-content #{hide_class}" }) do
-          = _('Add new key')
-    - c.with_body do
-      .gl-new-card-add-form.gl-m-3.js-toggle-content{ class: add_form_class }
+  - c.with_body do
+    = render ::Layouts::CrudComponent.new(_('Your SSH keys'),
+      icon: 'key',
+      count: @keys.count,
+      toggle_text: _('Add new key'),
+      toggle_options: { class: hide_class },
+      form_options: { form_errors: form_errors(@key) }) do |c|
+      - c.with_form do
         %h4.gl-mt-0
           = _('Add an SSH key')
         %p
@@ -34,4 +24,5 @@
           = _('Add an SSH key for secure access to GitLab. %{help_link_start}Learn more%{help_link_end}.').html_safe % {help_link_start: help_link_start, help_link_end: '</a>'.html_safe }
         = render 'form'
 
-      = render 'key_table', hide_class: hide_class
+      - c.with_body do
+        = render 'key_table'

spec/features/user_settings/ssh_keys_spec.rb

@@ -90,7 +90,7 @@ def destroy_key(path, action, confirmation_button)
     end
 
     expect(page).to have_content('Your SSH keys')
-    page.within('.gl-new-card-count') do
+    within_testid('crud-count') do
       expect(page).to have_content('0')
     end
   end