Commit 282ffd55 authored by Natalia Tepluhina's avatar Natalia Tepluhina

Merge branch '222469-view-your-composer-dependencies-in-the-package-registry-ui' into 'master'

Add composer tab and package type to package list

See merge request gitlab-org/gitlab!37928
parents 99df09ab 863634d4
......@@ -26,6 +26,7 @@ export default {
emptyListHelpUrl: state => state.config.emptyListHelpUrl,
comingSoon: state => state.config.comingSoon,
filterQuery: state => state.filterQuery,
selectedType: state => state.selectedType,
}),
tabsToRender() {
return PACKAGE_REGISTRY_TABS;
......@@ -42,11 +43,11 @@ export default {
onPackageDeleteRequest(item) {
return this.requestDeletePackage(item);
},
tabChanged(e) {
const selectedType = PACKAGE_REGISTRY_TABS[e];
tabChanged(index) {
const selected = PACKAGE_REGISTRY_TABS[index];
if (selectedType) {
this.setSelectedType(selectedType);
if (selected !== this.selectedType) {
this.setSelectedType(selected);
this.requestPackagesList();
}
},
......
......@@ -73,10 +73,15 @@ export const PACKAGE_REGISTRY_TABS = [
title: __('All'),
type: null,
},
{
title: s__('PackageRegistry|Composer'),
type: PackageType.COMPOSER,
},
{
title: s__('PackageRegistry|Conan'),
type: PackageType.CONAN,
},
{
title: s__('PackageRegistry|Maven'),
type: PackageType.MAVEN,
......
import { PACKAGE_REGISTRY_TABS } from '../constants';
export default () => ({
/**
* Determine if the component is loading data from the API
......@@ -48,4 +50,8 @@ export default () => ({
* The search query that is used to filter packages by name
*/
filterQuery: '',
/**
* The selected TAB of the package types tabs
*/
selectedType: PACKAGE_REGISTRY_TABS[0],
});
......@@ -4,6 +4,7 @@ export const PackageType = {
NPM: 'npm',
NUGET: 'nuget',
PYPI: 'pypi',
COMPOSER: 'composer',
};
export const TrackingActions = {
......
......@@ -19,6 +19,8 @@ export const getPackageTypeLabel = packageType => {
return s__('PackageType|NuGet');
case PackageType.PYPI:
return s__('PackageType|PyPi');
case PackageType.COMPOSER:
return s__('PackageType|Composer');
default:
return null;
......
---
title: Add composer tab and package type to package list
merge_request: 37928
author:
type: changed
......@@ -16753,6 +16753,9 @@ msgstr ""
msgid "PackageRegistry|Add NuGet Source"
msgstr ""
msgid "PackageRegistry|Composer"
msgstr ""
msgid "PackageRegistry|Conan"
msgstr ""
......@@ -16930,6 +16933,9 @@ msgstr ""
msgid "PackageRegistry|yarn"
msgstr ""
msgid "PackageType|Composer"
msgstr ""
msgid "PackageType|Conan"
msgstr ""
......
......@@ -73,6 +73,67 @@ exports[`packages_list_app renders 1`] = `
</div>
</template>
</b-tab-stub>
<b-tab-stub
tag="div"
title="Composer"
titlelinkclass="gl-tab-nav-item"
>
<template>
<div>
<section
class="row empty-state text-center"
>
<div
class="col-12"
>
<div
class="svg-250 svg-content"
>
<img
alt="There are no Composer packages yet"
class="gl-max-w-full"
src="helpSvg"
/>
</div>
</div>
<div
class="col-12"
>
<div
class="text-content gl-mx-auto gl-my-0 gl-p-5"
>
<h1
class="h4"
>
There are no Composer packages yet
</h1>
<p>
Learn how to
<b-link-stub
class="gl-link"
event="click"
href="helpUrl"
routertag="a"
target="_blank"
>
publish and share your packages
</b-link-stub>
with GitLab.
</p>
<div>
<!---->
<!---->
</div>
</div>
</div>
</section>
</div>
</template>
</b-tab-stub>
<b-tab-stub
tag="div"
title="Conan"
......
......@@ -54,7 +54,6 @@ describe('packages_list_app', () => {
beforeEach(() => {
createStore();
mountComponent();
});
afterEach(() => {
......@@ -68,6 +67,8 @@ describe('packages_list_app', () => {
describe('empty state', () => {
it('generate the correct empty list link', () => {
mountComponent();
const link = findListComponent().find(GlLink);
expect(link.attributes('href')).toBe(emptyListHelpUrl);
......@@ -75,6 +76,8 @@ describe('packages_list_app', () => {
});
it('includes the right content on the default tab', () => {
mountComponent();
const heading = findEmptyState().find('h1');
expect(heading.text()).toBe('There are no packages yet');
......@@ -82,31 +85,47 @@ describe('packages_list_app', () => {
});
it('call requestPackagesList on page:changed', () => {
mountComponent();
const list = findListComponent();
list.vm.$emit('page:changed', 1);
expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList', { page: 1 });
});
it('call requestDeletePackage on package:delete', () => {
mountComponent();
const list = findListComponent();
list.vm.$emit('package:delete', 'foo');
expect(store.dispatch).toHaveBeenCalledWith('requestDeletePackage', 'foo');
});
it('calls requestPackagesList on sort:changed', () => {
mountComponent();
const list = findListComponent();
list.vm.$emit('sort:changed');
expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList');
});
it('does not call requestPackagesList two times on render', () => {
mountComponent();
expect(store.dispatch).toHaveBeenCalledTimes(1);
});
describe('tab change', () => {
it('calls requestPackagesList when all tab is clicked', () => {
mountComponent();
findTabComponent().trigger('click');
expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList');
});
it('calls requestPackagesList when a package type tab is clicked', () => {
mountComponent();
findTabComponent(1).trigger('click');
expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList');
......
......@@ -32,13 +32,14 @@ describe('Packages shared utils', () => {
describe('getPackageTypeLabel', () => {
describe.each`
packageType | expectedResult
${'conan'} | ${'Conan'}
${'maven'} | ${'Maven'}
${'npm'} | ${'NPM'}
${'nuget'} | ${'NuGet'}
${'pypi'} | ${'PyPi'}
${'foo'} | ${null}
packageType | expectedResult
${'conan'} | ${'Conan'}
${'maven'} | ${'Maven'}
${'npm'} | ${'NPM'}
${'nuget'} | ${'NuGet'}
${'pypi'} | ${'PyPi'}
${'composer'} | ${'Composer'}
${'foo'} | ${null}
`(`package type`, ({ packageType, expectedResult }) => {
it(`${packageType} should show as ${expectedResult}`, () => {
expect(getPackageTypeLabel(packageType)).toBe(expectedResult);
......
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