Merge branch '210551-add-pipeline-project-to-package-title' into 'master'

Add pipeline project to package title

See merge request gitlab-org/gitlab!30275

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,
   },
@@ -35,8 +36,8 @@ export default {
       {{ packageEntity.name }}
     </h1>
 
-    <div class="d-flex align-items-center text-secondary">
-      <gl-icon name="eye" class="append-right-8" />
+    <div class="gl-display-flex gl-align-items-center text-secondary">
+      <gl-icon name="eye" class="gl-mr-3" />
       <gl-sprintf message="v%{version} published %{timeAgo}">
         <template #version>
           {{ packageEntity.version }}
@@ -50,22 +51,33 @@ export default {
       </gl-sprintf>
     </div>
 
-    <div class="d-flex flex-wrap align-items-center append-bottom-8">
-      <div v-if="packageTypeDisplay" class="d-flex align-items-center append-right-default">
-        <gl-icon name="package" class="text-secondary append-right-8" />
+    <div class="gl-display-flex flex-wrap gl-align-items-center append-bottom-8">
+      <div v-if="packageTypeDisplay" class="gl-display-flex align-items-center gl-mr-5">
+        <gl-icon name="package" class="text-secondary gl-mr-3" />
         <span ref="package-type" class="font-weight-bold">{{ packageTypeDisplay }}</span>
       </div>
 
-      <div v-if="hasTagsToDisplay" class="d-flex align-items-center append-right-default">
+      <div v-if="hasTagsToDisplay" class="gl-display-flex gl-align-items-center gl-mr-5">
         <package-tags :tag-display-limit="1" :tags="packageEntity.tags" />
       </div>
 
+      <div v-if="packagePipeline" class="gl-display-flex gl-align-items-center gl-mr-5">
+        <gl-icon name="review-list" class="text-secondary gl-mr-3" />
+        <gl-link
+          ref="pipeline-project"
+          :href="packagePipeline.project.web_url"
+          class="font-weight-bold text-truncate"
+        >
+          {{ packagePipeline.project.name }}
+        </gl-link>
+      </div>
+
       <div
         v-if="packagePipeline"
         ref="package-ref"
-        class="d-flex align-items-center append-right-default"
+        class="gl-display-flex gl-align-items-center gl-mr-5"
       >
-        <gl-icon name="branch" class="text-secondary append-right-8" />
+        <gl-icon name="branch" class="text-secondary gl-mr-3" />
         <span
           v-gl-tooltip
           class="font-weight-bold text-truncate mw-xs"
@@ -74,8 +86,8 @@ export default {
         >
       </div>
 
-      <div class="d-flex align-items-center append-right-default">
-        <gl-icon name="disk" class="text-secondary append-right-8" />
+      <div class="gl-display-flex gl-align-items-center gl-mr-5">
+        <gl-icon name="disk" class="text-secondary gl-mr-3" />
         <span ref="package-size" class="font-weight-bold">{{ totalSize }}</span>
       </div>
     </div>

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

@@ -13,10 +13,10 @@ exports[`PackageTitle renders with tags 1`] = `
   </h1>
    
   <div
-    class="d-flex align-items-center text-secondary"
+    class="gl-display-flex gl-align-items-center text-secondary"
   >
     <gl-icon-stub
-      class="append-right-8"
+      class="gl-mr-3"
       name="eye"
       size="16"
     />
@@ -27,13 +27,13 @@ exports[`PackageTitle renders with tags 1`] = `
   </div>
    
   <div
-    class="d-flex flex-wrap align-items-center append-bottom-8"
+    class="gl-display-flex flex-wrap gl-align-items-center append-bottom-8"
   >
     <div
-      class="d-flex align-items-center append-right-default"
+      class="gl-display-flex align-items-center gl-mr-5"
     >
       <gl-icon-stub
-        class="text-secondary append-right-8"
+        class="text-secondary gl-mr-3"
         name="package"
         size="16"
       />
@@ -46,7 +46,7 @@ exports[`PackageTitle renders with tags 1`] = `
     </div>
      
     <div
-      class="d-flex align-items-center append-right-default"
+      class="gl-display-flex gl-align-items-center gl-mr-5"
     >
       <package-tags-stub
         tagdisplaylimit="1"
@@ -56,11 +56,13 @@ exports[`PackageTitle renders with tags 1`] = `
      
     <!---->
      
+    <!---->
+     
     <div
-      class="d-flex align-items-center append-right-default"
+      class="gl-display-flex gl-align-items-center gl-mr-5"
     >
       <gl-icon-stub
-        class="text-secondary append-right-8"
+        class="text-secondary gl-mr-3"
         name="disk"
         size="16"
       />
@@ -88,10 +90,10 @@ exports[`PackageTitle renders without tags 1`] = `
   </h1>
    
   <div
-    class="d-flex align-items-center text-secondary"
+    class="gl-display-flex gl-align-items-center text-secondary"
   >
     <gl-icon-stub
-      class="append-right-8"
+      class="gl-mr-3"
       name="eye"
       size="16"
     />
@@ -102,13 +104,13 @@ exports[`PackageTitle renders without tags 1`] = `
   </div>
    
   <div
-    class="d-flex flex-wrap align-items-center append-bottom-8"
+    class="gl-display-flex flex-wrap gl-align-items-center append-bottom-8"
   >
     <div
-      class="d-flex align-items-center append-right-default"
+      class="gl-display-flex align-items-center gl-mr-5"
     >
       <gl-icon-stub
-        class="text-secondary append-right-8"
+        class="text-secondary gl-mr-3"
         name="package"
         size="16"
       />
@@ -124,11 +126,13 @@ exports[`PackageTitle renders without tags 1`] = `
      
     <!---->
      
+    <!---->
+     
     <div
-      class="d-flex align-items-center append-right-default"
+      class="gl-display-flex gl-align-items-center gl-mr-5"
     >
       <gl-icon-stub
-        class="text-secondary append-right-8"
+        class="text-secondary gl-mr-3"
         name="disk"
         size="16"
       />

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