Adds copy button to package metadata

Add showCopy prop to information
Display copy button for metadata
Updated tests

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="__('Copy')"
+              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);
+    });
+  });
 });