Add copy to clipboard button for application id and secret

app/assets/stylesheets/pages/commits.scss

@@ -223,6 +223,7 @@
   }
 }
 
+.clipboard-group,
 .commit-sha-group {
   display: inline-flex;
 

app/views/admin/applications/show.html.haml

 - page_title @application.name, "Applications"
+
 %h3.page-title
   Application: #{@application.name}
 
@@ -6,23 +7,29 @@
   %table.table
     %tr
       %td
-        Application Id
+        = _('Application ID')
       %td
-        %code#application_id= @application.uid
+        .clipboard-group
+          .input-group
+            %input.label.label-monospace{ id: "application_id", type: "text", autocomplete: 'off', value: @application.uid, readonly: true }
+            .input-group-append
+              = clipboard_button(target: '#application_id', title: _("Copy ID to clipboard"), class: "btn btn btn-default")
     %tr
       %td
-        Secret:
+        = _('Secret')
       %td
-        %code#secret= @application.secret
-
+        .clipboard-group
+          .input-group
+            %input.label.label-monospace{ id: "secret", type: "text", autocomplete: 'off', value: @application.secret, readonly: true }
+            .input-group-append
+              = clipboard_button(target: '#application_id', title: _("Copy secret to clipboard"), class: "btn btn btn-default")
     %tr
       %td
-        Callback url
+        = _('Callback URL')
       %td
         - @application.redirect_uri.split.each do |uri|
           %div
             %span.monospace= uri
-
     %tr
       %td
         Trusted

app/views/doorkeeper/applications/show.html.haml

@@ -10,18 +10,25 @@
   %table.table
     %tr
       %td
-        = _('Application Id')
+        = _('Application ID')
       %td
-        %code#application_id= @application.uid
+        .clipboard-group
+          .input-group
+            %input.label.label-monospace{ id: "application_id", type: "text", autocomplete: 'off', value: @application.uid, readonly: true }
+            .input-group-append
+              = clipboard_button(target: '#application_id', title: _("Copy ID to clipboard"), class: "btn btn btn-default")
     %tr
       %td
-        = _('Secret:')
+        = _('Secret')
       %td
-        %code#secret= @application.secret
-
+        .clipboard-group
+          .input-group
+            %input.label.label-monospace{ id: "secret", type: "text", autocomplete: 'off', value: @application.secret, readonly: true }
+            .input-group-append
+              = clipboard_button(target: '#application_id', title: _("Copy secret to clipboard"), class: "btn btn btn-default")
     %tr
       %td
-        = _('Callback url')
+        = _('Callback URL')
       %td
         - @application.redirect_uri.split.each do |uri|
           %div

changelogs/unreleased/add-clipboard-button-to-application-id-and-secret.yml

+---
+title: Add copy to clipboard button for application id and secret
+merge_request: 21978
+author: George Tsiolis
+type: other

locale/gitlab.pot

@@ -598,7 +598,7 @@ msgstr ""
 msgid "Application"
 msgstr ""
 
-msgid "Application Id"
+msgid "Application ID"
 msgstr ""
 
 msgid "Application: %{name}"
@@ -1101,9 +1101,6 @@ msgstr ""
 msgid "Callback URL"
 msgstr ""
 
-msgid "Callback url"
-msgstr ""
-
 msgid "Can't find HEAD commit for this branch"
 msgstr ""
 
@@ -1930,6 +1927,9 @@ msgstr ""
 msgid "Copy HTTPS clone URL"
 msgstr ""
 
+msgid "Copy ID to clipboard"
+msgstr ""
+
 msgid "Copy SSH clone URL"
 msgstr ""
 
@@ -1951,6 +1951,9 @@ msgstr ""
 msgid "Copy reference to clipboard"
 msgstr ""
 
+msgid "Copy secret to clipboard"
+msgstr ""
+
 msgid "Copy to clipboard"
 msgstr ""
 
@@ -5318,7 +5321,7 @@ msgstr ""
 msgid "Seconds to wait for a storage access attempt"
 msgstr ""
 
-msgid "Secret:"
+msgid "Secret"
 msgstr ""
 
 msgid "Select"

spec/features/admin/admin_manage_applications_spec.rb

@@ -16,7 +16,7 @@ RSpec.describe 'admin manage applications' do
     check :doorkeeper_application_trusted
     click_on 'Submit'
     expect(page).to have_content('Application: test')
-    expect(page).to have_content('Application Id')
+    expect(page).to have_content('Application ID')
     expect(page).to have_content('Secret')
     expect(page).to have_content('Trusted Y')
 
@@ -28,7 +28,7 @@ RSpec.describe 'admin manage applications' do
 
     click_on 'Submit'
     expect(page).to have_content('test_changed')
-    expect(page).to have_content('Application Id')
+    expect(page).to have_content('Application ID')
     expect(page).to have_content('Secret')
     expect(page).to have_content('Trusted N')
 

spec/features/profiles/user_manages_applications_spec.rb

@@ -16,7 +16,7 @@ describe 'User manages applications' do
     click_on 'Save application'
 
     expect(page).to have_content 'Application: test'
-    expect(page).to have_content 'Application Id'
+    expect(page).to have_content 'Application ID'
     expect(page).to have_content 'Secret'
 
     click_on 'Edit'
@@ -26,7 +26,7 @@ describe 'User manages applications' do
     click_on 'Save application'
 
     expect(page).to have_content 'test_changed'
-    expect(page).to have_content 'Application Id'
+    expect(page).to have_content 'Application ID'
     expect(page).to have_content 'Secret'
 
     visit applications_profile_path