Add copy to clipboard button on project ID

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/53224

app/helpers/button_helper.rb

@@ -25,6 +25,7 @@ module ButtonHelper
     button_text = data[:button_text] || ''
     hide_tooltip = data[:hide_tooltip] || false
     hide_button_icon = data[:hide_button_icon] || false
+    item_prop = data[:itemprop] || nil
 
     # This supports code in app/assets/javascripts/copy_to_clipboard.js that
     # works around ClipboardJS limitations to allow the context-specific copy/pasting of plain text or GFM.
@@ -49,7 +50,8 @@ module ButtonHelper
       data: data,
       type: :button,
       title: title,
-      aria: { label: title }
+      aria: { label: title },
+      itemprop: item_prop
     }
 
     content_tag :button, button_attributes do

app/views/projects/_home_panel.html.haml

@@ -17,8 +17,9 @@
             = render_if_exists 'compliance_management/compliance_framework/compliance_framework_badge', project: @project
         .home-panel-metadata.d-flex.flex-wrap.text-secondary.gl-font-base.gl-font-weight-normal.gl-line-height-normal
           - if can?(current_user, :read_project, @project)
-            %span.text-secondary{ itemprop: 'identifier', data: { qa_selector: 'project_id_content' } }
-              = s_('ProjectPage|Project ID: %{project_id}') % { project_id: @project.id }
+            - button_class = "btn-clipboard btn-transparent btn-no-padding gl-font-base gl-font-weight-normal gl-line-height-normal home-panel-metadata"
+            - button_text = s_('ProjectPage|Project ID: %{project_id}') % { project_id: @project.id }
+            = clipboard_button(title: s_('ProjectPage|Copy project ID'), text: @project.id, hide_button_icon: true, button_text: button_text, class: button_class, qa_selector: 'project_id_content', itemprop: 'identifier')
           - if current_user
             %span.access-request-links.gl-ml-3
               = render 'shared/members/access_request_links', source: @project

changelogs/unreleased/255288-add-a-click-to-copy-link-against-the-project-ID.yml

+---
+title: "Add click to copy button over project ID"
+merge_request: 53224
+author: Virgile MATHIEU @vmathieu
+type: added

locale/gitlab.pot

@@ -23827,6 +23827,9 @@ msgstr ""
 msgid "ProjectOverview|You must sign in to star a project"
 msgstr ""
 
+msgid "ProjectPage|Copy project ID"
+msgstr ""
+
 msgid "ProjectPage|Project ID: %{project_id}"
 msgstr ""
 

spec/helpers/button_helper_spec.rb

@@ -171,6 +171,7 @@ RSpec.describe ButtonHelper do
           expect(element.attr('data-placement')).to eq('bottom')
           expect(element.attr('data-container')).to eq('body')
           expect(element.attr('data-clipboard-text')).to eq(nil)
+          expect(element.attr('itemprop')).to eq(nil)
           expect(element.inner_text).to eq("")
 
           expect(element.to_html).to include sprite_icon('copy-to-clipboard')
@@ -209,5 +210,11 @@ RSpec.describe ButtonHelper do
         expect(element(hide_button_icon: true).to_html).not_to include sprite_icon('duplicate')
       end
     end
+
+    context 'with `itemprop` attribute provided' do
+      it 'shows copy to clipboard button with `itemprop` attribute' do
+        expect(element(itemprop: "identifier").attr('itemprop')).to eq("identifier")
+      end
+    end
   end
 end