Skip to content

G
gitlab-ce
Commit bafb3952 authored by Nick Kipling's avatar Nick Kipling
Browse files
Options

Adds NuGet package icon to package details page 

Updated package-title component to display icon
Created Vuex getter to get the package icon
Updated tests
parent 2610a385
Hide whitespace changes
Inline Side-by-side
Showing with 183 additions and 82 deletions
ee/app/assets/javascripts/packages/details/components/package_title.vue
View file @ bafb3952
<script>
import { mapState, mapGetters } from 'vuex';
import { GlIcon, GlLink, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
import { GlAvatar, 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';
......@@ -8,6 +8,7 @@ import timeagoMixin from '~/vue_shared/mixins/timeago';
export default {
name: 'PackageTitle',
components: {
GlAvatar,
GlIcon,
GlLink,
GlSprintf,
......@@ -19,7 +20,7 @@ export default {
mixins: [timeagoMixin],
computed: {
...mapState(['packageEntity', 'packageFiles']),
...mapGetters(['packageTypeDisplay', 'packagePipeline']),
...mapGetters(['packageTypeDisplay', 'packagePipeline', 'packageIcon']),
hasTagsToDisplay() {
return Boolean(this.packageEntity.tags && this.packageEntity.tags.length);
},
......@@ -31,30 +32,42 @@ export default {
</script>
<template>
<div class="flex-column">
<h1 class="gl-font-size-20-deprecated-no-really-do-not-use-me gl-mt-3 append-bottom-4">
{{ packageEntity.name }}
</h1>
<div class="gl-flex-direction-column">
<div class="gl-display-flex">
<gl-avatar
v-if="packageIcon"
:src="packageIcon"
shape="rect"
class="gl-align-self-center gl-mr-4"
data-testid="package-icon"
/>
<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 }}
</template>
<div class="gl-display-flex gl-flex-direction-column">
<h1 class="gl-font-size-h1 gl-mt-3 gl-mb-2">
{{ packageEntity.name }}
</h1>
<template #timeAgo>
<span v-gl-tooltip :title="tooltipTitle(packageEntity.created_at)">
&nbsp;{{ timeFormatted(packageEntity.created_at) }}
</span>
</template>
</gl-sprintf>
<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 }}
</template>
<template #timeAgo>
<span v-gl-tooltip :title="tooltipTitle(packageEntity.created_at)">
&nbsp;{{ timeFormatted(packageEntity.created_at) }}
</span>
</template>
</gl-sprintf>
</div>
</div>
</div>
<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">
<div class="gl-display-flex gl-flex-wrap gl-align-items-center gl-mb-3">
<div v-if="packageTypeDisplay" class="gl-display-flex gl-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>
<span data-testid="package-type" class="gl-font-weight-bold">{{ packageTypeDisplay }}</span>
</div>
<div v-if="hasTagsToDisplay" class="gl-display-flex gl-align-items-center gl-mr-5">
......@@ -64,9 +77,9 @@ export default {
<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"
data-testid="pipeline-project"
:href="packagePipeline.project.web_url"
class="font-weight-bold text-truncate"
class="gl-font-weight-bold text-truncate"
>
{{ packagePipeline.project.name }}
</gl-link>
......@@ -74,13 +87,13 @@ export default {
<div
v-if="packagePipeline"
ref="package-ref"
data-testid="package-ref"
class="gl-display-flex gl-align-items-center gl-mr-5"
>
<gl-icon name="branch" class="text-secondary gl-mr-3" />
<span
v-gl-tooltip
class="font-weight-bold text-truncate mw-xs"
class="gl-font-weight-bold text-truncate mw-xs"
:title="packagePipeline.ref"
>{{ packagePipeline.ref }}</span
>
......@@ -88,7 +101,7 @@ export default {
<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>
<span data-testid="package-size" class="gl-font-weight-bold">{{ totalSize }}</span>
</div>
</div>
</div>
......
ee/app/assets/javascripts/packages/details/store/getters.js
View file @ bafb3952
import { generateConanRecipe } from '../utils';
import { PackageType } from '../../shared/constants';
import { getPackageTypeLabel } from '../../shared/utils';
import { NpmManager } from '../constants';
......@@ -10,6 +11,14 @@ export const packageTypeDisplay = ({ packageEntity }) => {
return getPackageTypeLabel(packageEntity.package_type);
};
export const packageIcon = ({ packageEntity }) => {
if (packageEntity.package_type === PackageType.NUGET) {
return packageEntity.nuget_metadatum?.icon_url || null;
}
return null;
};
export const conanInstallationCommand = ({ packageEntity }) => {
const recipe = generateConanRecipe(packageEntity);
......
ee/changelogs/unreleased/36422-add-nuget-package-icon-to-package-details.yml 0 → 100644
View file @ bafb3952
---
title: Adds NuGet package icon to package details page
merge_request: 33701
author:
type: added
ee/spec/frontend/packages/details/components/__snapshots__/package_title_spec.js.snap
View file @ bafb3952
......@@ -2,35 +2,45 @@
exports[`PackageTitle renders with tags 1`] = `
<div
class="flex-column"
class="gl-flex-direction-column"
>
<h1
class="gl-font-size-20-deprecated-no-really-do-not-use-me gl-mt-3 append-bottom-4"
>
Test package
</h1>
<div
class="gl-display-flex gl-align-items-center text-secondary"
class="gl-display-flex"
>
<gl-icon-stub
class="gl-mr-3"
name="eye"
size="16"
/>
<!---->
<gl-sprintf-stub
message="v%{version} published %{timeAgo}"
/>
<div
class="gl-display-flex gl-flex-direction-column"
>
<h1
class="gl-font-size-h1 gl-mt-3 gl-mb-2"
>
Test package
</h1>
<div
class="gl-display-flex gl-align-items-center text-secondary"
>
<gl-icon-stub
class="gl-mr-3"
name="eye"
size="16"
/>
<gl-sprintf-stub
message="v%{version} published %{timeAgo}"
/>
</div>
</div>
</div>
<div
class="gl-display-flex flex-wrap gl-align-items-center append-bottom-8"
class="gl-display-flex gl-flex-wrap gl-align-items-center gl-mb-3"
>
<div
class="gl-display-flex align-items-center gl-mr-5"
class="gl-display-flex gl-align-items-center gl-mr-5"
>
<gl-icon-stub
class="text-secondary gl-mr-3"
......@@ -39,7 +49,8 @@ exports[`PackageTitle renders with tags 1`] = `
/>
<span
class="font-weight-bold"
class="gl-font-weight-bold"
data-testid="package-type"
>
maven
</span>
......@@ -68,7 +79,8 @@ exports[`PackageTitle renders with tags 1`] = `
/>
<span
class="font-weight-bold"
class="gl-font-weight-bold"
data-testid="package-size"
>
300 bytes
</span>
......@@ -79,35 +91,45 @@ exports[`PackageTitle renders with tags 1`] = `
exports[`PackageTitle renders without tags 1`] = `
<div
class="flex-column"
class="gl-flex-direction-column"
>
<h1
class="gl-font-size-20-deprecated-no-really-do-not-use-me gl-mt-3 append-bottom-4"
>
Test package
</h1>
<div
class="gl-display-flex gl-align-items-center text-secondary"
class="gl-display-flex"
>
<gl-icon-stub
class="gl-mr-3"
name="eye"
size="16"
/>
<!---->
<gl-sprintf-stub
message="v%{version} published %{timeAgo}"
/>
<div
class="gl-display-flex gl-flex-direction-column"
>
<h1
class="gl-font-size-h1 gl-mt-3 gl-mb-2"
>
Test package
</h1>
<div
class="gl-display-flex gl-align-items-center text-secondary"
>
<gl-icon-stub
class="gl-mr-3"
name="eye"
size="16"
/>
<gl-sprintf-stub
message="v%{version} published %{timeAgo}"
/>
</div>
</div>
</div>
<div
class="gl-display-flex flex-wrap gl-align-items-center append-bottom-8"
class="gl-display-flex gl-flex-wrap gl-align-items-center gl-mb-3"
>
<div
class="gl-display-flex align-items-center gl-mr-5"
class="gl-display-flex gl-align-items-center gl-mr-5"
>
<gl-icon-stub
class="text-secondary gl-mr-3"
......@@ -116,7 +138,8 @@ exports[`PackageTitle renders without tags 1`] = `
/>
<span
class="font-weight-bold"
class="gl-font-weight-bold"
data-testid="package-type"
>
maven
</span>
......@@ -138,7 +161,8 @@ exports[`PackageTitle renders without tags 1`] = `
/>
<span
class="font-weight-bold"
class="gl-font-weight-bold"
data-testid="package-size"
>
300 bytes
</span>
......
ee/spec/frontend/packages/details/components/package_title_spec.js
View file @ bafb3952
......@@ -19,7 +19,11 @@ describe('PackageTitle', () => {
let wrapper;
let store;
function createComponent(packageEntity = mavenPackage, packageFiles = mavenFiles) {
function createComponent({
packageEntity = mavenPackage,
packageFiles = mavenFiles,
icon = null,
} = {}) {
store = new Vuex.Store({
state: {
packageEntity,
......@@ -28,6 +32,7 @@ describe('PackageTitle', () => {
getters: {
packageTypeDisplay: ({ packageEntity: { package_type: type } }) => type,
packagePipeline: ({ packageEntity: { pipeline = null } }) => pipeline,
packageIcon: () => icon,
},
});
......@@ -37,10 +42,11 @@ 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 packageIcon = () => wrapper.find('[data-testid="package-icon"]');
const packageType = () => wrapper.find('[data-testid="package-type"]');
const packageSize = () => wrapper.find('[data-testid="package-size"]');
const pipelineProject = () => wrapper.find('[data-testid="pipeline-project"]');
const packageRef = () => wrapper.find('[data-testid="package-ref"]');
const packageTags = () => wrapper.find(PackageTags);
afterEach(() => {
......@@ -55,12 +61,28 @@ describe('PackageTitle', () => {
});
it('with tags', () => {
createComponent({ ...mavenPackage, tags: mockTags });
createComponent({ packageEntity: { ...mavenPackage, tags: mockTags } });
expect(wrapper.element).toMatchSnapshot();
});
});
describe('package icon', () => {
it('shows an icon when provided one from vuex', () => {
const fakeSrc = 'a-fake-src';
createComponent({ icon: fakeSrc });
expect(packageIcon().exists()).toBe(true);
expect(packageIcon().props('src')).toBe(fakeSrc);
});
it('does not show an icon when not provided one', () => {
createComponent();
expect(packageIcon().exists()).toBe(false);
});
});
describe.each`
packageEntity | expectedResult
${conanPackage} | ${'conan'}
......@@ -68,7 +90,7 @@ describe('PackageTitle', () => {
${npmPackage} | ${'npm'}
${nugetPackage} | ${'nuget'}
`(`package type`, ({ packageEntity, expectedResult }) => {
beforeEach(() => createComponent(packageEntity));
beforeEach(() => createComponent({ packageEntity }));
it(`${packageEntity.package_type} should render from Vuex getters ${expectedResult}`, () => {
expect(packageType().text()).toBe(expectedResult);
......@@ -77,7 +99,7 @@ describe('PackageTitle', () => {
describe('calculates the package size', () => {
it('correctly calulates when there is only 1 file', () => {
createComponent(npmPackage, npmFiles);
createComponent({ packageEntity: npmPackage, packageFiles: npmFiles });
expect(packageSize().text()).toBe('200 bytes');
});
......@@ -92,8 +114,10 @@ describe('PackageTitle', () => {
describe('package tags', () => {
it('displays the package-tags component when the package has tags', () => {
createComponent({
...npmPackage,
tags: mockTags,
packageEntity: {
...npmPackage,
tags: mockTags,
},
});
expect(packageTags().exists()).toBe(true);
......@@ -114,7 +138,7 @@ describe('PackageTitle', () => {
});
it('correctly shows the package ref if there is one', () => {
createComponent(npmPackage);
createComponent({ packageEntity: npmPackage });
expect(packageRef().contains('gl-icon-stub')).toBe(true);
expect(packageRef().text()).toBe(npmPackage.pipeline.ref);
......@@ -129,7 +153,7 @@ describe('PackageTitle', () => {
});
it('correctly shows the pipeline project if there is one', () => {
createComponent(npmPackage);
createComponent({ packageEntity: npmPackage });
expect(pipelineProject().text()).toBe(npmPackage.pipeline.project.name);
expect(pipelineProject().attributes('href')).toBe(npmPackage.pipeline.project.web_url);
......
ee/spec/frontend/packages/details/store/getters_spec.js
View file @ bafb3952
......@@ -3,6 +3,7 @@ import {
conanSetupCommand,
packagePipeline,
packageTypeDisplay,
packageIcon,
mavenInstallationXml,
mavenInstallationCommand,
mavenSetupXml,
......@@ -104,6 +105,28 @@ describe('Getters PackageDetails Store', () => {
});
});
describe('packageIcon', () => {
describe('nuget packages', () => {
it('should return nuget package icon', () => {
setupState({ packageEntity: nugetPackage });
expect(packageIcon(state)).toBe(nugetPackage.nuget_metadatum.icon_url);
});
it('should return null when nuget package does not have an icon', () => {
setupState({ packageEntity: { ...nugetPackage, nuget_metadatum: {} } });
expect(packageIcon(state)).toBe(null);
});
});
it('should not find icons for other package types', () => {
setupState({ packageEntity: npmPackage });
expect(packageIcon(state)).toBe(null);
});
});
describe('conan string getters', () => {
it('gets the correct conanInstallationCommand', () => {
setupState({ packageEntity: conanPackage });
......
ee/spec/frontend/packages/mock_data.js
View file @ bafb3952
......@@ -118,6 +118,9 @@ export const nugetPackage = {
updated_at: '2015-12-10',
version: '1.0.0',
dependency_links: Object.values(dependencyLinks),
nuget_metadatum: {
icon_url: 'fake-icon',
},
};
export const pypiPackage = {
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7