Commit a9a54b29 authored by Rémy Coutable's avatar Rémy Coutable

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

Add pipeline project to package title

See merge request gitlab-org/gitlab!30275
parents 366a3f9e 63eeb140
<script> <script>
import { mapState, mapGetters } from 'vuex'; 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 PackageTags from '../../shared/components/package_tags.vue';
import { numberToHumanSize } from '~/lib/utils/number_utils'; import { numberToHumanSize } from '~/lib/utils/number_utils';
import timeagoMixin from '~/vue_shared/mixins/timeago'; import timeagoMixin from '~/vue_shared/mixins/timeago';
...@@ -9,6 +9,7 @@ export default { ...@@ -9,6 +9,7 @@ export default {
name: 'PackageTitle', name: 'PackageTitle',
components: { components: {
GlIcon, GlIcon,
GlLink,
GlSprintf, GlSprintf,
PackageTags, PackageTags,
}, },
...@@ -35,8 +36,8 @@ export default { ...@@ -35,8 +36,8 @@ export default {
{{ packageEntity.name }} {{ packageEntity.name }}
</h1> </h1>
<div class="d-flex align-items-center text-secondary"> <div class="gl-display-flex gl-align-items-center text-secondary">
<gl-icon name="eye" class="append-right-8" /> <gl-icon name="eye" class="gl-mr-3" />
<gl-sprintf message="v%{version} published %{timeAgo}"> <gl-sprintf message="v%{version} published %{timeAgo}">
<template #version> <template #version>
{{ packageEntity.version }} {{ packageEntity.version }}
...@@ -50,22 +51,33 @@ export default { ...@@ -50,22 +51,33 @@ export default {
</gl-sprintf> </gl-sprintf>
</div> </div>
<div class="d-flex flex-wrap align-items-center append-bottom-8"> <div class="gl-display-flex flex-wrap gl-align-items-center append-bottom-8">
<div v-if="packageTypeDisplay" class="d-flex align-items-center append-right-default"> <div v-if="packageTypeDisplay" class="gl-display-flex align-items-center gl-mr-5">
<gl-icon name="package" class="text-secondary append-right-8" /> <gl-icon name="package" class="text-secondary gl-mr-3" />
<span ref="package-type" class="font-weight-bold">{{ packageTypeDisplay }}</span> <span ref="package-type" class="font-weight-bold">{{ packageTypeDisplay }}</span>
</div> </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" /> <package-tags :tag-display-limit="1" :tags="packageEntity.tags" />
</div> </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 <div
v-if="packagePipeline" v-if="packagePipeline"
ref="package-ref" 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 <span
v-gl-tooltip v-gl-tooltip
class="font-weight-bold text-truncate mw-xs" class="font-weight-bold text-truncate mw-xs"
...@@ -74,8 +86,8 @@ export default { ...@@ -74,8 +86,8 @@ export default {
> >
</div> </div>
<div class="d-flex align-items-center append-right-default"> <div class="gl-display-flex gl-align-items-center gl-mr-5">
<gl-icon name="disk" class="text-secondary append-right-8" /> <gl-icon name="disk" class="text-secondary gl-mr-3" />
<span ref="package-size" class="font-weight-bold">{{ totalSize }}</span> <span ref="package-size" class="font-weight-bold">{{ totalSize }}</span>
</div> </div>
</div> </div>
......
...@@ -41,7 +41,11 @@ module Packages ...@@ -41,7 +41,11 @@ module Packages
sha: pipeline_info.sha, sha: pipeline_info.sha,
ref: pipeline_info.ref, ref: pipeline_info.ref,
git_commit_message: pipeline_info.git_commit_message, 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 end
......
---
title: Adds pipeline project name and link to package title
merge_request: 30275
author:
type: added
...@@ -13,10 +13,10 @@ exports[`PackageTitle renders with tags 1`] = ` ...@@ -13,10 +13,10 @@ exports[`PackageTitle renders with tags 1`] = `
</h1> </h1>
<div <div
class="d-flex align-items-center text-secondary" class="gl-display-flex gl-align-items-center text-secondary"
> >
<gl-icon-stub <gl-icon-stub
class="append-right-8" class="gl-mr-3"
name="eye" name="eye"
size="16" size="16"
/> />
...@@ -27,13 +27,13 @@ exports[`PackageTitle renders with tags 1`] = ` ...@@ -27,13 +27,13 @@ exports[`PackageTitle renders with tags 1`] = `
</div> </div>
<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 <div
class="d-flex align-items-center append-right-default" class="gl-display-flex align-items-center gl-mr-5"
> >
<gl-icon-stub <gl-icon-stub
class="text-secondary append-right-8" class="text-secondary gl-mr-3"
name="package" name="package"
size="16" size="16"
/> />
...@@ -46,7 +46,7 @@ exports[`PackageTitle renders with tags 1`] = ` ...@@ -46,7 +46,7 @@ exports[`PackageTitle renders with tags 1`] = `
</div> </div>
<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 <package-tags-stub
tagdisplaylimit="1" tagdisplaylimit="1"
...@@ -56,11 +56,13 @@ exports[`PackageTitle renders with tags 1`] = ` ...@@ -56,11 +56,13 @@ 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"
> >
<gl-icon-stub <gl-icon-stub
class="text-secondary append-right-8" class="text-secondary gl-mr-3"
name="disk" name="disk"
size="16" size="16"
/> />
...@@ -88,10 +90,10 @@ exports[`PackageTitle renders without tags 1`] = ` ...@@ -88,10 +90,10 @@ exports[`PackageTitle renders without tags 1`] = `
</h1> </h1>
<div <div
class="d-flex align-items-center text-secondary" class="gl-display-flex gl-align-items-center text-secondary"
> >
<gl-icon-stub <gl-icon-stub
class="append-right-8" class="gl-mr-3"
name="eye" name="eye"
size="16" size="16"
/> />
...@@ -102,13 +104,13 @@ exports[`PackageTitle renders without tags 1`] = ` ...@@ -102,13 +104,13 @@ exports[`PackageTitle renders without tags 1`] = `
</div> </div>
<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 <div
class="d-flex align-items-center append-right-default" class="gl-display-flex align-items-center gl-mr-5"
> >
<gl-icon-stub <gl-icon-stub
class="text-secondary append-right-8" class="text-secondary gl-mr-3"
name="package" name="package"
size="16" size="16"
/> />
...@@ -124,11 +126,13 @@ exports[`PackageTitle renders without tags 1`] = ` ...@@ -124,11 +126,13 @@ exports[`PackageTitle renders without tags 1`] = `
<!----> <!---->
<!---->
<div <div
class="d-flex align-items-center append-right-default" class="gl-display-flex gl-align-items-center gl-mr-5"
> >
<gl-icon-stub <gl-icon-stub
class="text-secondary append-right-8" class="text-secondary gl-mr-3"
name="disk" name="disk"
size="16" size="16"
/> />
......
...@@ -39,6 +39,7 @@ describe('PackageTitle', () => { ...@@ -39,6 +39,7 @@ describe('PackageTitle', () => {
const packageType = () => wrapper.find({ ref: 'package-type' }); const packageType = () => wrapper.find({ ref: 'package-type' });
const packageSize = () => wrapper.find({ ref: 'package-size' }); const packageSize = () => wrapper.find({ ref: 'package-size' });
const pipelineProject = () => wrapper.find({ ref: 'pipeline-project' });
const packageRef = () => wrapper.find({ ref: 'package-ref' }); const packageRef = () => wrapper.find({ ref: 'package-ref' });
const packageTags = () => wrapper.find(PackageTags); const packageTags = () => wrapper.find(PackageTags);
...@@ -119,4 +120,19 @@ describe('PackageTitle', () => { ...@@ -119,4 +120,19 @@ describe('PackageTitle', () => {
expect(packageRef().text()).toBe(npmPackage.pipeline.ref); 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);
});
});
}); });
...@@ -10,6 +10,10 @@ export const mockPipelineInfo = { ...@@ -10,6 +10,10 @@ export const mockPipelineInfo = {
user: { user: {
name: 'foo', name: 'foo',
}, },
project: {
name: 'foo-project',
web_url: 'foo-project-link',
},
}; };
export const mavenPackage = { export const mavenPackage = {
......
...@@ -26,7 +26,11 @@ describe ::Packages::Detail::PackagePresenter do ...@@ -26,7 +26,11 @@ describe ::Packages::Detail::PackagePresenter do
sha: pipeline.sha, sha: pipeline.sha,
ref: pipeline.ref, ref: pipeline.ref,
git_commit_message: pipeline.git_commit_message, 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 end
let!(:expected_package_details) do let!(:expected_package_details) do
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment