SSH Key detail page improvements

Changelog: changed

app/assets/stylesheets/framework/new_card.scss

@@ -91,4 +91,47 @@
     @include gl-border-gray-100;
     @include gl-rounded-base;
   }
+
+  // Table adjustments
+  @mixin new-card-table-adjustments {
+    tbody > tr {
+      > td[data-label] {
+        @include gl-border-left-0;
+        @include gl-border-l-none;
+        @include gl-border-right-0;
+        @include gl-border-r-none;
+      }
+
+      > th {
+        @include gl-border-t-1;
+        @include gl-border-b-0;
+      }
+
+      &::after {
+        @include gl-bg-white;
+      }
+
+      &:last-child::after {
+        @include gl-display-none;
+      }
+    }
+  }
+
+  table.b-table-stacked-sm,
+  table.b-table-stacked-md {
+    @include gl-mt-n1;
+    @include gl-mb-n2;
+  }
+
+  table.gl-table.b-table.b-table-stacked-sm {
+    @include gl-media-breakpoint-down(sm) {
+      @include new-card-table-adjustments;
+    }
+  }
+
+  table.gl-table.b-table.b-table-stacked-md {
+    @include gl-media-breakpoint-down(md) {
+      @include new-card-table-adjustments;
+    }
+  }
 }

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

 - is_admin = defined?(admin) ? true : false
-.row.gl-mt-3
-  .col-md-4
-    = render Pajamas::CardComponent.new(body_options: { class: 'gl-py-0'}) do |c|
-      - c.with_header do
-        = _('SSH Key')
-      - c.with_body do
-        %ul.content-list
-          %li
-            %span.light= _('Title:')
-            %strong= @key.title
-          %li
-            %span.light= s_('Profiles|Usage type:')
-            %strong= ssh_key_usage_types.invert[@key.usage_type]
-          %li
-            %span.light= _('Created on:')
-            %strong= @key.created_at.to_fs(:medium)
-          %li
-            %span.light= _('Expires:')
-            %strong= @key.expires_at&.to_fs(:medium) || _('Never')
-          %li
-            %span.light= _('Last used on:')
-            %strong= @key.last_used_at&.to_fs(:medium) || _('Never')
 
-  .col-md-8
-    = form_errors(@key, type: 'key') unless @key.valid?
-    %pre.well-pre
-      = @key.key
-    = render Pajamas::CardComponent.new(body_options: { class: 'gl-py-0'}) do |c|
-      - c.with_header do
-        = _('Fingerprints')
-      - c.with_body do
-        %ul.content-list
-          %li
-            %span.light= 'MD5:'
-            %code.key-fingerprint= @key.fingerprint
-          - if @key.fingerprint_sha256.present?
-            %li
-              %span.light= 'SHA256:'
-              %code.key-fingerprint= @key.fingerprint_sha256
+%h1.gl-font-size-h-display
+  = s_('Profiles|SSH Key: %{title}').html_safe % { title: @key.title }
 
-  .col-md-12
-    .float-right
-      - if @key.can_delete?
-        = render 'shared/ssh_keys/key_delete', button_data: ssh_key_delete_modal_data(@key, path_to_key(@key, is_admin))
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, 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
+      .gl-new-card-title
+        = _('Key details')
+  - c.with_body do
+    .table-holder
+      %table.table.b-table.gl-table.b-table-stacked-md.ssh-keys-list
+        %thead
+          %th= s_('Profiles|Usage type')
+          %th= s_('Profiles|Created')
+          %th= s_('Profiles|Last used')
+          %th= s_('Profiles|Expires')
+        %tbody
+          %tr
+            %td{ data: { label: s_('Profiles|Usage type'), testid: 'usage' } }
+              = ssh_key_usage_types.invert[@key.usage_type]
+            %td{ data: { label: s_('Profiles|Created'), testid: 'created' } }
+              = @key.created_at.to_fs(:medium)
+            %td{ data: { label: s_('Profiles|Last used'), testid: 'last-used' } }
+              = @key.last_used_at&.to_fs(:medium) || _('Never')
+            %td{ data: { label: s_('Profiles|Expires'), testid: 'expires' } }
+              - if @key.expired?
+                %span.gl-text-red-500
+                  = s_('Profiles|Expired')
+                  = @key.expires_at&.to_fs(:medium)
+              - elsif @key.expires_at
+                = @key.expires_at&.to_fs(:medium)
+              - else
+                = _('Never')
+
+.gl-mt-5
+  = form_errors(@key, type: 'key') unless @key.valid?
+
+  = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0 gl-overflow-hidden'}) do |c|
+    - c.with_header do
+      .gl-new-card-title-wrapper
+        .gl-new-card-title
+          = _('SSH Key')
+    - c.with_body do
+      .gl-display-flex
+        %pre.well-pre.gl-pl-5.gl-mb-0.gl-border-0
+          = @key.key
+        = clipboard_button(title: s_('Profiles|Copy SSH key'), text: @key.key, class: 'gl-bg-gray-10 gl-px-3! gl-border-none! gl-rounded-top-left-none! gl-rounded-bottom-left-none!')
+
+  = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, 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
+        .gl-new-card-title
+          = _('Fingerprints')
+    - c.with_body do
+      .table-holder
+        %table.table.b-table.gl-table.b-table-stacked-md
+          %tbody
+            %tr
+              %th= _('MD5')
+              %td.gl-font-monospace.key-fingerprint= @key.fingerprint
+            - if @key.fingerprint_sha256.present?
+              %tr
+                %th= _('SHA256')
+                %td.gl-font-monospace.key-fingerprint= @key.fingerprint_sha256
+
+.gl-mt-5.gl-float-right
+  - if @key.can_delete?
+    = render 'shared/ssh_keys/key_delete', button_data: ssh_key_delete_modal_data(@key, path_to_key(@key, is_admin))

app/views/shared/ssh_keys/_key_delete.html.haml

 - category = local_assigns[:category] || :primary
 
-.gl-p-2
-  = render Pajamas::ButtonComponent.new(variant: :danger, category: category, button_options: { class: 'js-confirm-modal-button', data: button_data }) do
-    = _('Delete')
+= render Pajamas::ButtonComponent.new(variant: :danger, category: category, button_options: { class: 'js-confirm-modal-button', data: button_data }) do
+  = _('Delete')

locale/gitlab.pot

@@ -18736,9 +18736,6 @@ msgstr ""
 msgid "Expires %{preposition} %{expires_at}"
 msgstr ""
-msgid "Expires:"
-msgstr ""
-
 msgid "Explain why you're reporting the user."
 msgstr ""
@@ -26747,6 +26744,9 @@ msgstr ""
 msgid "Key (PEM)"
 msgstr ""
+msgid "Key details"
+msgstr ""
+
 msgid "Key result"
 msgstr ""
@@ -27051,9 +27051,6 @@ msgstr ""
 msgid "Last used %{last_used_at} ago"
 msgstr ""
-msgid "Last used on:"
-msgstr ""
-
 msgid "Last week"
 msgstr ""
@@ -35424,6 +35421,12 @@ msgstr ""
 msgid "Profiles|Control emails linked to your account"
 msgstr ""
+msgid "Profiles|Copy SSH key"
+msgstr ""
+
+msgid "Profiles|Created"
+msgstr ""
+
 msgid "Profiles|Created%{time_ago}"
 msgstr ""
@@ -35493,9 +35496,15 @@ msgstr ""
 msgid "Profiles|Expiration date"
 msgstr ""
+msgid "Profiles|Expired"
+msgstr ""
+
 msgid "Profiles|Expired:"
 msgstr ""
+msgid "Profiles|Expires"
+msgstr ""
+
 msgid "Profiles|Expires:"
 msgstr ""
@@ -35538,6 +35547,9 @@ msgstr ""
 msgid "Profiles|Key titles are publicly visible."
 msgstr ""
+msgid "Profiles|Last used"
+msgstr ""
+
 msgid "Profiles|Last used:"
 msgstr ""
@@ -35601,6 +35613,9 @@ msgstr ""
 msgid "Profiles|Resend confirmation email"
 msgstr ""
+msgid "Profiles|SSH Key: %{title}"
+msgstr ""
+
 msgid "Profiles|Select a service to sign in with."
 msgstr ""

spec/features/profiles/keys_spec.rb

@@ -27,7 +27,7 @@
       fill_in('Title', with: attrs[:title])
       click_button('Add key')
 
-      expect(page).to have_content("Title: #{attrs[:title]}")
+      expect(page).to have_content(format(s_('Profiles|SSH Key: %{title}'), title: attrs[:title]))
       expect(page).to have_content(attrs[:key])
       expect(find('[data-testid="breadcrumb-current-link"]')).to have_link(attrs[:title])
     end