Update admin deploy keys table to comply with Pajamas design system

Will be refactored to Vue in a later MR

Changelog: changed

app/assets/stylesheets/pages/deploy_keys.scss

-.deploy-keys-list {
-  width: 100%;
-  overflow: auto;
-
-  table {
-    border: 1px solid $table-border-color;
-  }
-}
-
 .deploy-keys-title {
   padding-bottom: 2px;
   line-height: 2;

app/views/admin/deploy_keys/index.html.haml

@@ -7,31 +7,38 @@
     %h3.page-title.deploy-keys-title
       = _('Public deploy keys (%{deploy_keys_count})') % { deploy_keys_count: @deploy_keys.load.size }
       = link_to _('New deploy key'), new_admin_deploy_key_path, class: 'float-right btn gl-button btn-confirm btn-md gl-button'
-    .table-holder.deploy-keys-list
-      %table.table
-        %thead
+    %table.table.b-table.gl-table.b-table-stacked-lg{ data: { testid: 'deploy-keys-list' } }
+      %thead
+        %tr
+          %th= _('Title')
+          %th= _('Fingerprint')
+          %th= _('Projects with write access')
+          %th= _('Created')
+          %th.gl-lg-w-1px.gl-white-space-nowrap
+            %span.gl-sr-only
+              = _('Actions')
+      %tbody
+        - @deploy_keys.each do |deploy_key|
           %tr
-            %th.col-sm-2= _('Title')
-            %th.col-sm-4= _('Fingerprint')
-            %th.col-sm-2= _('Projects with write access')
-            %th.col-sm-2= _('Added at')
-            %th.col-sm-2
-        %tbody
-          - @deploy_keys.each do |deploy_key|
-            %tr
-              %td
-                %strong= deploy_key.title
-              %td
-                %code.key-fingerprint= deploy_key.fingerprint
-              %td
+            %td{ data: { label: _('Title') } }
+              %div
+                = deploy_key.title
+            %td{ data: { label: _('Fingerprint') } }
+              %div
+                %code= deploy_key.fingerprint
+            %td{ data: { label: _('Projects with write access') } }
+              %div
                 - deploy_key.projects_with_write_access.each do |project|
-                  = link_to project.full_name, admin_project_path(project), class: 'label deploy-project-label'
-              %td
-                %span.cgray
-                  = _('added %{created_at_timeago}').html_safe % { created_at_timeago: time_ago_with_tooltip(deploy_key.created_at) }
-              %td
-                .float-right
-                  = link_to _('Edit'), edit_admin_deploy_key_path(deploy_key), class: 'btn gl-button btn-sm'
-                  = link_to _('Remove'), admin_deploy_key_path(deploy_key), data: { confirm: _('Are you sure?') }, method: :delete, class: 'gl-button btn btn-sm btn-danger delete-key'
+                  = link_to project.full_name, admin_project_path(project), class: 'gl-display-block'
+            %td{ data: { label: _('Created') } }
+              %div
+                = time_ago_with_tooltip(deploy_key.created_at)
+            %td.gl-lg-w-1px.gl-white-space-nowrap{ data: { label: _('Actions') } }
+              %div
+                = link_to edit_admin_deploy_key_path(deploy_key), class: 'btn btn-default btn-md gl-button btn-icon gl-mr-3', aria: { label: _('Edit deploy key') } do
+                  = sprite_icon('pencil', css_class: 'gl-button-icon')
+                = link_to admin_deploy_key_path(deploy_key), data: { confirm: _('Are you sure?') }, method: :delete, class: 'btn btn-danger btn-md gl-button btn-icon', aria: { label: _('Remove deploy key') } do
+                  = sprite_icon('remove', css_class: 'gl-button-icon')
+
   - else
     = render 'shared/empty_states/deploy_keys'

locale/gitlab.pot

@@ -2163,9 +2163,6 @@ msgstr ""
 msgid "Added an issue to an epic."
 msgstr ""
 
-msgid "Added at"
-msgstr ""
-
 msgid "Added for this merge request"
 msgstr ""
 
@@ -12456,6 +12453,9 @@ msgstr ""
 msgid "Edit deploy freeze"
 msgstr ""
 
+msgid "Edit deploy key"
+msgstr ""
+
 msgid "Edit description"
 msgstr ""
 
@@ -40161,9 +40161,6 @@ msgstr ""
 msgid "added"
 msgstr ""
 
-msgid "added %{created_at_timeago}"
-msgstr ""
-
 msgid "added %{emails}"
 msgstr ""
 

spec/features/admin/admin_deploy_keys_spec.rb

@@ -17,7 +17,7 @@ RSpec.describe 'admin deploy keys' do
   it 'show all public deploy keys' do
     visit admin_deploy_keys_path
 
-    page.within(find('.deploy-keys-list', match: :first)) do
+    page.within(find('[data-testid="deploy-keys-list"]', match: :first)) do
       expect(page).to have_content(deploy_key.title)
       expect(page).to have_content(another_deploy_key.title)
     end
@@ -28,7 +28,7 @@ RSpec.describe 'admin deploy keys' do
 
     visit admin_deploy_keys_path
 
-    page.within(find('.deploy-keys-list', match: :first)) do
+    page.within(find('[data-testid="deploy-keys-list"]', match: :first)) do
       expect(page).to have_content(write_key.project.full_name)
     end
   end
@@ -48,7 +48,7 @@ RSpec.describe 'admin deploy keys' do
 
       expect(current_path).to eq admin_deploy_keys_path
 
-      page.within(find('.deploy-keys-list', match: :first)) do
+      page.within(find('[data-testid="deploy-keys-list"]', match: :first)) do
         expect(page).to have_content('laptop')
       end
     end
@@ -66,7 +66,7 @@ RSpec.describe 'admin deploy keys' do
 
       expect(current_path).to eq admin_deploy_keys_path
 
-      page.within(find('.deploy-keys-list', match: :first)) do
+      page.within(find('[data-testid="deploy-keys-list"]', match: :first)) do
         expect(page).to have_content('new-title')
       end
     end
@@ -81,7 +81,7 @@ RSpec.describe 'admin deploy keys' do
       find('tr', text: deploy_key.title).click_link('Remove')
 
       expect(current_path).to eq admin_deploy_keys_path
-      page.within(find('.deploy-keys-list', match: :first)) do
+      page.within(find('[data-testid="deploy-keys-list"]', match: :first)) do
         expect(page).not_to have_content(deploy_key.title)
       end
     end