Skip to content

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

Refactor final package components to use gl-sprintf 

Refactors package details app
Refactos packages_list and packages_list_app
Updated tests
Updated pot file
parent 93107c59
Hide whitespace changes
Inline Side-by-side
Showing with 120 additions and 131 deletions
ee/app/assets/javascripts/packages/details/components/app.vue
View file @ 9c6147af
......@@ -11,8 +11,8 @@ import {
GlTab,
GlTabs,
GlTable,
GlSprintf,
} from '@gitlab/ui';
import { escape } from 'lodash';
import Tracking from '~/tracking';
import PackageActivity from './activity.vue';
import PackageInformation from './information.vue';
......@@ -28,7 +28,7 @@ import DependencyRow from './dependency_row.vue';
import { numberToHumanSize } from '~/lib/utils/number_utils';
import timeagoMixin from '~/vue_shared/mixins/timeago';
import { generatePackageInfo } from '../utils';
import { __, s__, sprintf } from '~/locale';
import { __, s__ } from '~/locale';
import { PackageType, TrackingActions } from '../../shared/constants';
import { packageTypeToTrackCategory } from '../../shared/utils';
import { mapActions, mapState } from 'vuex';
......@@ -45,6 +45,7 @@ export default {
GlTabs,
GlTable,
GlIcon,
GlSprintf,
PackageActivity,
PackageInformation,
PackageTitle,
......@@ -96,20 +97,6 @@ export default {
canDeletePackage() {
return this.canDelete && this.destroyPath;
},
deleteModalDescription() {
return sprintf(
s__(
`PackageRegistry|You are about to delete version %{boldStart}%{version}%{boldEnd} of %{boldStart}%{name}%{boldEnd}. Are you sure?`,
),
{
version: escape(this.packageEntity.version),
name: escape(this.packageEntity.name),
boldStart: '<b>',
boldEnd: '</b>',
},
false,
);
},
packageInformation() {
return generatePackageInfo(this.packageEntity);
},
......@@ -181,6 +168,9 @@ export default {
},
i18n: {
deleteModalTitle: s__(`PackageRegistry|Delete Package Version`),
deleteModalContent: s__(
`PackageRegistry|You are about to delete version %{version} of %{name}. Are you sure?`,
),
},
filesTableHeaderFields: [
{
......@@ -324,7 +314,15 @@ export default {
<gl-modal ref="deleteModal" class="js-delete-modal" modal-id="delete-modal">
<template #modal-title>{{ $options.i18n.deleteModalTitle }}</template>
<p v-html="deleteModalDescription"></p>
<gl-sprintf :message="$options.i18n.deleteModalContent">
<template #version>
<strong>{{ packageEntity.version }}</strong>
</template>
<template #name>
<strong>{{ packageEntity.name }}</strong>
</template>
</gl-sprintf>
<div slot="modal-footer" class="w-100">
<div class="float-right">
......
ee/app/assets/javascripts/packages/list/components/packages_list.vue
View file @ 9c6147af
<script>
import { mapState, mapGetters } from 'vuex';
import { GlPagination, GlModal } from '@gitlab/ui';
import { GlPagination, GlModal, GlSprintf } from '@gitlab/ui';
import Tracking from '~/tracking';
import { s__, sprintf } from '~/locale';
import { s__ } from '~/locale';
import { TrackingActions } from '../../shared/constants';
import { packageTypeToTrackCategory } from '../../shared/utils';
import PackagesListLoader from '../../shared/components/packages_list_loader.vue';
......@@ -12,6 +12,7 @@ export default {
components: {
GlPagination,
GlModal,
GlSprintf,
PackagesListLoader,
PackagesListRow,
},
......@@ -44,17 +45,8 @@ export default {
modalAction() {
return s__('PackageRegistry|Delete package');
},
deletePackageDescription() {
if (!this.itemToBeDeleted) {
return '';
}
return sprintf(
s__(
'PackageRegistry|You are about to delete <b>%{packageName}</b>, this operation is irreversible, are you sure?',
),
{ packageName: `${this.itemToBeDeleted.name}:${this.itemToBeDeleted.version}` },
false,
);
deletePackageName() {
return this.itemToBeDeleted?.name || '';
},
tracking() {
const category = this.itemToBeDeleted
......@@ -81,6 +73,11 @@ export default {
this.itemToBeDeleted = null;
},
},
i18n: {
deleteModalContent: s__(
'PackageRegistry|You are about to delete %{name}, this operation is irreversible, are you sure?',
),
},
};
</script>
......@@ -121,7 +118,11 @@ export default {
>
<template #modal-title>{{ modalAction }}</template>
<template #modal-ok>{{ modalAction }}</template>
<p v-html="deletePackageDescription"></p>
<gl-sprintf :message="$options.i18n.deleteModalContent">
<template #name>
<strong>{{ deletePackageName }}</strong>
</template>
</gl-sprintf>
</gl-modal>
</template>
</div>
......
ee/app/assets/javascripts/packages/list/components/packages_list_app.vue
View file @ 9c6147af
<script>
import { mapActions, mapState } from 'vuex';
import { GlEmptyState, GlTab, GlTabs } from '@gitlab/ui';
import { GlEmptyState, GlTab, GlTabs, GlLink, GlSprintf } from '@gitlab/ui';
import { s__, sprintf } from '~/locale';
import PackageFilter from './packages_filter.vue';
import PackageList from './packages_list.vue';
......@@ -13,6 +13,8 @@ export default {
GlEmptyState,
GlTab,
GlTabs,
GlLink,
GlSprintf,
PackageFilter,
PackageList,
PackageSort,
......@@ -25,22 +27,6 @@ export default {
comingSoon: state => state.config.comingSoon,
filterQuery: state => state.filterQuery,
}),
emptyListText() {
if (this.filterQuery) {
return s__('PackageRegistry|To widen your search, change or remove the filters above.');
}
return sprintf(
s__(
'PackageRegistry|Learn how to %{noPackagesLinkStart}publish and share your packages%{noPackagesLinkEnd} with GitLab.',
),
{
noPackagesLinkStart: `<a href="${this.emptyListHelpUrl}" target="_blank">`,
noPackagesLinkEnd: '</a>',
},
false,
);
},
tabsToRender() {
return PACKAGE_REGISTRY_TABS;
},
......@@ -78,6 +64,12 @@ export default {
return s__('PackageRegistry|There are no packages yet');
},
},
i18n: {
widenFilters: s__('PackageRegistry|To widen your search, change or remove the filters above.'),
noResults: s__(
'PackageRegistry|Learn how to %{noPackagesLinkStart}publish and share your packages%{noPackagesLinkEnd} with GitLab.',
),
},
};
</script>
......@@ -95,7 +87,12 @@ export default {
<template #empty-state>
<gl-empty-state :title="emptyStateTitle(tab)" :svg-path="emptyListIllustration">
<template #description>
<p v-html="emptyListText"></p>
<gl-sprintf v-if="filterQuery" :message="$options.i18n.widenFilters" />
<gl-sprintf v-else :message="$options.i18n.noResults">
<template #noPackagesLink="{content}">
<gl-link :href="emptyListHelpUrl" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</template>
</gl-empty-state>
</template>
......
ee/spec/frontend/packages/list/components/__snapshots__/packages_list_app_spec.js.snap
View file @ 9c6147af
......@@ -49,16 +49,17 @@ exports[`packages_list_app renders 1`] = `
</h1>
<p>
<p>
Learn how to
<a
href="helpUrl"
target="_blank"
>
publish and share your packages
</a>
with GitLab.
</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>
......@@ -109,16 +110,17 @@ exports[`packages_list_app renders 1`] = `
</h1>
<p>
<p>
Learn how to
<a
href="helpUrl"
target="_blank"
>
publish and share your packages
</a>
with GitLab.
</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>
......@@ -169,16 +171,17 @@ exports[`packages_list_app renders 1`] = `
</h1>
<p>
<p>
Learn how to
<a
href="helpUrl"
target="_blank"
>
publish and share your packages
</a>
with GitLab.
</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>
......@@ -229,16 +232,17 @@ exports[`packages_list_app renders 1`] = `
</h1>
<p>
<p>
Learn how to
<a
href="helpUrl"
target="_blank"
>
publish and share your packages
</a>
with GitLab.
</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>
......@@ -289,16 +293,17 @@ exports[`packages_list_app renders 1`] = `
</h1>
<p>
<p>
Learn how to
<a
href="helpUrl"
target="_blank"
>
publish and share your packages
</a>
with GitLab.
</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>
......@@ -349,16 +354,17 @@ exports[`packages_list_app renders 1`] = `
</h1>
<p>
<p>
Learn how to
<a
href="helpUrl"
target="_blank"
>
publish and share your packages
</a>
with GitLab.
</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>
......
ee/spec/frontend/packages/list/components/packages_list_app_spec.js
View file @ 9c6147af
import Vuex from 'vuex';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { GlEmptyState, GlTab, GlTabs } from '@gitlab/ui';
import { GlEmptyState, GlTab, GlTabs, GlSprintf, GlLink } from '@gitlab/ui';
import PackageListApp from 'ee/packages/list/components/packages_list_app.vue';
const localVue = createLocalVue();
......@@ -46,6 +46,8 @@ describe('packages_list_app', () => {
PackageList,
GlTab,
GlTabs,
GlSprintf,
GlLink,
},
});
};
......@@ -66,16 +68,10 @@ describe('packages_list_app', () => {
describe('empty state', () => {
it('generate the correct empty list link', () => {
const link = findListComponent().find('a');
expect(link.element).toMatchInlineSnapshot(`
<a
href="${emptyListHelpUrl}"
target="_blank"
>
publish and share your packages
</a>
`);
const link = findListComponent().find(GlLink);
expect(link.attributes('href')).toBe(emptyListHelpUrl);
expect(link.text()).toBe('publish and share your packages');
});
it('includes the right content on the default tab', () => {
......
ee/spec/frontend/packages/list/components/packages_list_spec.js
View file @ 9c6147af
......@@ -123,15 +123,6 @@ describe('packages_list', () => {
mountComponent();
});
it('shows the correct deletePackageDescription', () => {
expect(wrapper.vm.deletePackageDescription).toEqual('');
wrapper.setData({ itemToBeDeleted: { name: 'foo', version: '1.0.10-beta' } });
expect(wrapper.vm.deletePackageDescription).toMatchInlineSnapshot(
`"You are about to delete <b>foo:1.0.10-beta</b>, this operation is irreversible, are you sure?"`,
);
});
it('setItemToBeDeleted sets itemToBeDeleted and open the modal', () => {
const mockModalShow = jest.spyOn(wrapper.vm.$refs.packageListDeleteModal, 'show');
const item = last(wrapper.vm.list);
......
locale/gitlab.pot
View file @ 9c6147af
......@@ -15537,10 +15537,10 @@ msgstr ""
msgid "PackageRegistry|Upcoming package managers"
msgstr ""
msgid "PackageRegistry|You are about to delete <b>%{packageName}</b>, this operation is irreversible, are you sure?"
msgid "PackageRegistry|You are about to delete %{name}, this operation is irreversible, are you sure?"
msgstr ""
msgid "PackageRegistry|You are about to delete version %{boldStart}%{version}%{boldEnd} of %{boldStart}%{name}%{boldEnd}. Are you sure?"
msgid "PackageRegistry|You are about to delete version %{version} of %{name}. Are you sure?"
msgstr ""
msgid "PackageRegistry|You may also need to setup authentication using an auth token. %{linkStart}See the documentation%{linkEnd} to find out more."
......
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