Merge branch '35618-add-clipboard-button-to-package-registry-information' into 'master'

Add copy button to package registry metadata

Closes #35618

See merge request gitlab-org/gitlab!19881

changelogs/unreleased/35618-add-clipboard-button-to-package-registry-information.yml

+---
+title: Adds a copy button next to package metadata on the details page
+merge_request: 19881
+author:
+type: added

ee/app/assets/javascripts/packages/details/components/app.vue

@@ -209,6 +209,7 @@ export default {
         v-if="packageMetadata"
         :heading="packageMetadataTitle"
         :information="packageMetadata"
+        :show-copy="true"
       />
       <package-installation
         v-else

ee/app/assets/javascripts/packages/details/components/information.vue

 <script>
 import { s__ } from '~/locale';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
 export default {
   name: 'PackageInformation',
+  components: {
+    ClipboardButton,
+  },
   props: {
     heading: {
       type: String,
@@ -14,6 +18,11 @@ export default {
       default: () => [],
       required: true,
     },
+    showCopy: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 };
 </script>
@@ -28,7 +37,15 @@ export default {
       <ul class="content-list">
         <li v-for="(item, index) in information" :key="index">
           <span class="text-secondary">{{ item.label }}</span>
-          <span class="pull-right">{{ item.value }}</span>
+          <div class="pull-right">
+            <span>{{ item.value }}</span>
+            <clipboard-button
+              v-if="showCopy"
+              :text="item.value"
+              :title="sprintf(__('Copy %{field}'), { field: item.label })"
+              css-class="border-0 text-secondary py-0"
+            />
+          </div>
         </li>
       </ul>
     </div>

ee/spec/frontend/packages/details/components/information_spec.js

 import { shallowMount } from '@vue/test-utils';
 import PackageInformation from 'ee/packages/details/components/information.vue';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
 describe('PackageInformation', () => {
   let wrapper;
@@ -33,6 +34,7 @@ describe('PackageInformation', () => {
   }
 
   const headingSelector = () => wrapper.find('.card-header > strong');
+  const copyButton = () => wrapper.findAll(ClipboardButton);
   const informationSelector = () => wrapper.findAll('ul.content-list li');
   const informationRowText = index =>
     informationSelector()
@@ -69,4 +71,21 @@ describe('PackageInformation', () => {
     expect(informationRowText(1)).toContain('two');
     expect(informationRowText(2)).toContain('three');
   });
+
+  describe('copy button', () => {
+    it('does not render by default', () => {
+      createComponent();
+
+      expect(copyButton().exists()).toBe(false);
+    });
+
+    it('does render when the prop is set and has correct text set', () => {
+      createComponent({ showCopy: true });
+
+      expect(copyButton().length).toBe(3);
+      expect(copyButton().at(0).vm.text).toBe(defaultProps.information[0].value);
+      expect(copyButton().at(1).vm.text).toBe(defaultProps.information[1].value);
+      expect(copyButton().at(2).vm.text).toBe(defaultProps.information[2].value);
+    });
+  });
 });

locale/gitlab.pot

@@ -4682,6 +4682,9 @@ msgstr ""
 msgid "Copy"
 msgstr ""
 
+msgid "Copy %{field}"
+msgstr ""
+
 msgid "Copy %{http_label} clone URL"
 msgstr ""