diff --git a/app/assets/stylesheets/framework/new_card.scss b/app/assets/stylesheets/framework/new_card.scss
index ef8f5cc1d1b59019709a34c56b7fcbe374ccd8be..48a834858c65f64b3d481576df7b923e0b30a47f 100644
--- a/app/assets/stylesheets/framework/new_card.scss
+++ b/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;
+ }
+ }
}
diff --git a/app/views/profiles/keys/_key_details.html.haml b/app/views/profiles/keys/_key_details.html.haml
index f1d5a127728f943b2092180e7eb4a682d3aa187f..d5193a424ef3b1e8a5ce9da89ca4f94f137c4a57 100644
--- a/app/views/profiles/keys/_key_details.html.haml
+++ b/app/views/profiles/keys/_key_details.html.haml
@@ -1,45 +1,70 @@
- 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))
diff --git a/app/views/shared/ssh_keys/_key_delete.html.haml b/app/views/shared/ssh_keys/_key_delete.html.haml
index 80cd23989a05f1afa3007a7a0f466d3478e97e65..c969520d7e93a082fd84eef4b870af0722eef8e5 100644
--- a/app/views/shared/ssh_keys/_key_delete.html.haml
+++ b/app/views/shared/ssh_keys/_key_delete.html.haml
@@ -1,5 +1,4 @@
- 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')
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index bf53a3cf1419a31bd5add1e25e691e13a9631caf..6295528c34bb7576a7a709c9cabe262f710d17b0 100644
--- a/locale/gitlab.pot
+++ b/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 ""
diff --git a/spec/features/profiles/keys_spec.rb b/spec/features/profiles/keys_spec.rb
index ae61f1cf492f4a121bb24aae3c68d7703fadea31..b49d16603b249c26db030ade42d47cb1a6562916 100644
--- a/spec/features/profiles/keys_spec.rb
+++ b/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