Add latest changes from gitlab-org/gitlab@14-5-stable-eev14.5.0-rc42

1 files changed, 38 insertions, 27 deletions

diff --git a/app/views/admin/deploy_keys/index.html.haml b/app/views/admin/deploy_keys/index.html.haml
index eec8f816f04..ba4abdc02e4 100644
--- a/app/views/admin/deploy_keys/index.html.haml
+++ b/app/views/admin/deploy_keys/index.html.haml
@@ -1,33 +1,44 @@
 - page_title _('Deploy Keys')
-- if @deploy_keys.any?
-  %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
+
+- if Feature.enabled?(:admin_deploy_keys_vue, default_enabled: :yaml)
+  #js-admin-deploy-keys-table{ data: admin_deploy_keys_data }
+- else
+  - if @deploy_keys.any?
+    %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.table.b-table.gl-table.b-table-stacked-lg{ data: { testid: 'deploy-keys-list' } }
       %thead
         %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
+          %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
-            %td
-              %strong= deploy_key.title
-            %td
-              %code.key-fingerprint= deploy_key.fingerprint
-            %td
-              - 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'
-- else
-  = render 'shared/empty_states/deploy_keys'
+            %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: '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'