Updated Group/Project home panel ID copy-on-click

Updates the Group and Project Home panels with a 'click-to-copy' button
for the group ID. This makes it more visible and easier to spot the
functionality.

Changelog: changed
Signed-off-by: Raimund Hook <raimund.hook@exfo.com>

app/views/groups/_home_panel.html.haml

@@ -9,17 +9,18 @@
         = group_icon(@group, class: 'avatar avatar-tile s64', width: 64, height: 64, itemprop: 'logo')
       .d-flex.flex-column.flex-wrap.align-items-baseline
         .d-inline-flex.align-items-baseline
-          %h1.home-panel-title.gl-mt-3.gl-mb-2.gl-ml-3{ itemprop: 'name' }
+          %h1.home-panel-title.gl-mt-3.gl-mb-2{ itemprop: 'name' }
             = @group.name
             %span.visibility-icon.text-secondary.gl-ml-2.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@group) }
               = visibility_level_icon(@group.visibility_level, options: {class: 'icon'})
-        .home-panel-metadata.text-secondary.gl-font-base.gl-font-weight-normal.gl-line-height-normal
+        .home-panel-metadata.text-secondary.gl-font-base.gl-font-weight-normal.gl-line-height-normal{ data: { qa_selector: 'group_id_content' }, itemprop: 'identifier' }
           - if can?(current_user, :read_group, @group)
-            - button_class = "btn gl-button btn-sm btn-tertiary btn-default-tertiary home-panel-metadata"
-            - button_text = s_('GroupPage|Group ID: %{group_id}') % { group_id: @group.id }
-            = clipboard_button(title: s_('GroupPage|Copy group ID'), text: @group.id, hide_button_icon: true, button_text: button_text, class: button_class, qa_selector: 'group_id_content', itemprop: 'identifier')
+            %span.gl-display-inline-block.gl-vertical-align-middle
+              = s_("GroupPage|Group ID: %{group_id}") % { group_id: @group.id }
+              - button_class = "btn gl-button btn-sm btn-tertiary btn-default-tertiary home-panel-metadata"
+              = clipboard_button(title: s_('GroupPage|Copy group ID'), text: @group.id, class: button_class)
           - if current_user
-            %span.gl-ml-3
+            %span.gl-ml-3.gl-mb-3
               = render 'shared/members/access_request_links', source: @group
 
     .home-panel-buttons.col-md-12.col-lg-6

app/views/projects/_home_panel.html.haml

@@ -10,18 +10,19 @@
         = project_icon(@project, alt: @project.name, class: 'avatar avatar-tile s64', width: 64, height: 64, itemprop: 'image')
       .d-flex.flex-column.flex-wrap.align-items-baseline
         .d-inline-flex.align-items-baseline
-          %h1.home-panel-title.gl-mt-3.gl-mb-2.gl-font-size-h1.gl-line-height-24.gl-font-weight-bold.gl-ml-3{ data: { qa_selector: 'project_name_content' }, itemprop: 'name' }
+          %h1.home-panel-title.gl-mt-3.gl-mb-2.gl-font-size-h1.gl-line-height-24.gl-font-weight-bold{ data: { qa_selector: 'project_name_content' }, itemprop: 'name' }
             = @project.name
             %span.visibility-icon.text-secondary.gl-ml-2.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@project) }
               = visibility_level_icon(@project.visibility_level, options: { class: 'icon' })
             = render_if_exists 'compliance_management/compliance_framework/compliance_framework_badge', project: @project
-        .home-panel-metadata.text-secondary.gl-font-base.gl-font-weight-normal.gl-line-height-normal
+        .home-panel-metadata.text-secondary.gl-font-base.gl-font-weight-normal.gl-line-height-normal{ data: { qa_selector: 'project_id_content' }, itemprop: 'identifier' }
           - if can?(current_user, :read_project, @project)
-            - button_class = "btn gl-button btn-sm btn-tertiary btn-default-tertiary 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')
+            %span.gl-display-inline-block.gl-vertical-align-middle
+              = s_('ProjectPage|Project ID: %{project_id}') % { project_id: @project.id }
+              - button_class = "btn gl-button btn-sm btn-tertiary btn-default-tertiary home-panel-metadata"
+              = clipboard_button(title: s_('ProjectPage|Copy project ID'), text: @project.id, class: button_class)
           - if current_user
-            %span.gl-display-inline-block.gl-vertical-align-middle.gl-ml-3
+            %span.gl-ml-3.gl-mb-3
               = render 'shared/members/access_request_links', source: @project
 
           .gl-mt-3.gl-pl-3.gl-w-full