Adds branch ref to package details title

Updated title component to include ref
Updated package presenter to include ref
Updated tests to test displaying

changelogs/unreleased/197926-add-branch-to-package-title.yml

+---
+title: Adds branch information to the package details title section
+merge_request: 27488
+author:
+type: added

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

@@ -18,7 +18,7 @@ export default {
   mixins: [timeagoMixin],
   computed: {
     ...mapState(['packageEntity', 'packageFiles']),
-    ...mapGetters(['packageTypeDisplay']),
+    ...mapGetters(['packageTypeDisplay', 'packagePipeline']),
     hasTagsToDisplay() {
       return Boolean(this.packageEntity.tags && this.packageEntity.tags.length);
     },
@@ -58,6 +58,11 @@ export default {
         <package-tags :tag-display-limit="1" :tags="packageEntity.tags" />
       </div>
 
+      <div v-if="packagePipeline" class="d-flex align-items-center append-right-default">
+        <gl-icon name="branch" class="text-secondary append-right-8" />
+        <span ref="package-ref" class="font-weight-bold">{{ packagePipeline.ref }}</span>
+      </div>
+
       <div class="d-flex align-items-center append-right-default">
         <gl-icon name="disk" class="text-secondary append-right-8" />
         <span ref="package-size" class="font-weight-bold">{{ totalSize }}</span>

ee/app/presenters/packages/detail/package_presenter.rb

@@ -39,6 +39,7 @@ module Packages
           created_at: pipeline_info.created_at,
           id: pipeline_info.id,
           sha: pipeline_info.sha,
+          ref: pipeline_info.ref,
           git_commit_message: pipeline_info.git_commit_message,
           user: build_user_info(pipeline_info.user)
         }

ee/spec/frontend/packages/details/components/__snapshots__/package_title_spec.js.snap

@@ -52,6 +52,8 @@ exports[`PackageTitle renders with tags 1`] = `
       />
     </div>
      
+    <!---->
+     
     <div
       class="d-flex align-items-center append-right-default"
     >
@@ -116,6 +118,8 @@ exports[`PackageTitle renders without tags 1`] = `
      
     <!---->
      
+    <!---->
+     
     <div
       class="d-flex align-items-center append-right-default"
     >

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

@@ -27,6 +27,7 @@ describe('PackageTitle', () => {
       },
       getters: {
         packageTypeDisplay: ({ packageEntity: { package_type: type } }) => type,
+        packagePipeline: ({ packageEntity: { pipeline = null } }) => pipeline,
       },
     });
 
@@ -38,6 +39,7 @@ describe('PackageTitle', () => {
 
   const packageType = () => wrapper.find({ ref: 'package-type' });
   const packageSize = () => wrapper.find({ ref: 'package-size' });
+  const packageRef = () => wrapper.find({ ref: 'package-ref' });
   const packageTags = () => wrapper.find(PackageTags);
 
   afterEach(() => {
@@ -102,4 +104,18 @@ describe('PackageTitle', () => {
       expect(packageTags().exists()).toBe(false);
     });
   });
+
+  describe('package ref', () => {
+    it('does not display the ref if missing', () => {
+      createComponent();
+
+      expect(packageRef().exists()).toBe(false);
+    });
+
+    it('correctly shows the package ref if there is one', () => {
+      createComponent(npmPackage);
+
+      expect(packageRef().text()).toBe(npmPackage.pipeline.ref);
+    });
+  });
 });

ee/spec/frontend/packages/mock_data.js

@@ -53,10 +53,7 @@ export const npmPackage = {
   updated_at: '2015-12-10',
   version: '',
   _links,
-  build_info: {
-    pipeline_id: 1,
-    pipeline: mockPipelineInfo,
-  },
+  pipeline: mockPipelineInfo,
 };
 
 export const npmFiles = [

ee/spec/presenters/packages/detail/package_presenter_spec.rb

@@ -24,6 +24,7 @@ describe ::Packages::Detail::PackagePresenter do
       created_at: pipeline.created_at,
       id: pipeline.id,
       sha: pipeline.sha,
+      ref: pipeline.ref,
       git_commit_message: pipeline.git_commit_message,
       user: user_info
     }