Adds pipeline project to package title

Update package presenter to include project info
Added icon, name and link to package title
Updated frontend tests
Updated backend tests

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

 <script>
 import { mapState, mapGetters } from 'vuex';
-import { GlIcon, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
+import { GlIcon, GlLink, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
 import PackageTags from '../../shared/components/package_tags.vue';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
@@ -9,6 +9,7 @@ export default {
   name: 'PackageTitle',
   components: {
     GlIcon,
+    GlLink,
     GlSprintf,
     PackageTags,
   },
@@ -60,6 +61,17 @@ 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="review-list" class="text-secondary append-right-8" />
+        <gl-link
+          ref="pipeline-project"
+          :href="packagePipeline.project.web_url"
+          class="text-primary font-weight-bold text-truncate"
+        >
+          {{ packagePipeline.project.name }}
+        </gl-link>
+      </div>
+
       <div
         v-if="packagePipeline"
         ref="package-ref"

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

@@ -41,7 +41,11 @@ module Packages
           sha: pipeline_info.sha,
           ref: pipeline_info.ref,
           git_commit_message: pipeline_info.git_commit_message,
-          user: build_user_info(pipeline_info.user)
+          user: build_user_info(pipeline_info.user),
+          project: {
+            name: pipeline_info.project.name,
+            web_url: pipeline_info.project.web_url
+          }
         }
       end
 

ee/changelogs/unreleased/210551-add-pipeline-project-to-package-title.yml

+---
+title: Adds pipeline project name and link to package title
+merge_request: 30275
+author:
+type: added

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

@@ -56,6 +56,8 @@ exports[`PackageTitle renders with tags 1`] = `
      
     <!---->
      
+    <!---->
+     
     <div
       class="d-flex align-items-center append-right-default"
     >
@@ -124,6 +126,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

@@ -39,6 +39,7 @@ describe('PackageTitle', () => {
 
   const packageType = () => wrapper.find({ ref: 'package-type' });
   const packageSize = () => wrapper.find({ ref: 'package-size' });
+  const pipelineProject = () => wrapper.find({ ref: 'pipeline-project' });
   const packageRef = () => wrapper.find({ ref: 'package-ref' });
   const packageTags = () => wrapper.find(PackageTags);
 
@@ -119,4 +120,19 @@ describe('PackageTitle', () => {
       expect(packageRef().text()).toBe(npmPackage.pipeline.ref);
     });
   });
+
+  describe('pipeline project', () => {
+    it('does not display the project if missing', () => {
+      createComponent();
+
+      expect(pipelineProject().exists()).toBe(false);
+    });
+
+    it('correctly shows the pipeline project if there is one', () => {
+      createComponent(npmPackage);
+
+      expect(pipelineProject().text()).toBe(npmPackage.pipeline.project.name);
+      expect(pipelineProject().attributes('href')).toBe(npmPackage.pipeline.project.web_url);
+    });
+  });
 });

ee/spec/frontend/packages/mock_data.js

@@ -10,6 +10,10 @@ export const mockPipelineInfo = {
   user: {
     name: 'foo',
   },
+  project: {
+    name: 'foo-project',
+    web_url: 'foo-project-link',
+  },
 };
 
 export const mavenPackage = {

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

@@ -26,7 +26,11 @@ describe ::Packages::Detail::PackagePresenter do
       sha: pipeline.sha,
       ref: pipeline.ref,
       git_commit_message: pipeline.git_commit_message,
-      user: user_info
+      user: user_info,
+      project: {
+        name: pipeline.project.name,
+        web_url: pipeline.project.web_url
+      }
     }
   end
   let!(:expected_package_details) do