Commit 2098970c authored by Mark Florian's avatar Mark Florian Committed by Andrew Fontaine

Translate legend in ProjectSelector component

The "legend" text in the ProjectSelector component was previously only
defined in the GlInfiniteScroll component from GitLab UI. There are two
problems with that: strings defined in GitLab UI aren't translatable,
and also the string is generic and referred to "items" rather than
"projects".

This also updates the existing `items` slot to use the Vue 2.6+ sytax.

Addresses https://gitlab.com/gitlab-org/gitlab/-/issues/217985.
parent 42893446
<script>
import { debounce } from 'lodash';
import { GlLoadingIcon, GlSearchBoxByType, GlInfiniteScroll } from '@gitlab/ui';
import { __, n__, sprintf } from '~/locale';
import ProjectListItem from './project_list_item.vue';
const SEARCH_INPUT_TIMEOUT_MS = 500;
......@@ -48,6 +49,20 @@ export default {
searchQuery: '',
};
},
computed: {
legendText() {
const count = this.projectSearchResults.length;
const total = this.totalResults;
if (total > 0) {
return sprintf(__('Showing %{count} of %{total} projects'), { count, total });
}
return sprintf(n__('Showing %{count} project', 'Showing %{count} projects', count), {
count,
});
},
},
methods: {
projectClicked(project) {
this.$emit('projectClicked', project);
......@@ -82,17 +97,23 @@ export default {
:total-items="totalResults"
@bottomReached="bottomReached"
>
<div v-if="!showLoadingIndicator" slot="items" class="d-flex flex-column">
<project-list-item
v-for="project in projectSearchResults"
:key="project.id"
:selected="isSelected(project)"
:project="project"
:matcher="searchQuery"
class="js-project-list-item"
@click="projectClicked(project)"
/>
</div>
<template v-if="!showLoadingIndicator" #items>
<div class="d-flex flex-column">
<project-list-item
v-for="project in projectSearchResults"
:key="project.id"
:selected="isSelected(project)"
:project="project"
:matcher="searchQuery"
class="js-project-list-item"
@click="projectClicked(project)"
/>
</div>
</template>
<template #default>
{{ legendText }}
</template>
</gl-infinite-scroll>
<div v-if="showNoResultsMessage" class="text-muted ml-2 js-no-results-message">
{{ __('Sorry, no projects matched your search') }}
......
---
title: Make project selector in various dashboard more translatable
merge_request: 33771
author:
type: other
......@@ -8,8 +8,6 @@ msgid ""
msgstr ""
"Project-Id-Version: gitlab 1.0.0\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2020-06-01 14:24-0400\n"
"PO-Revision-Date: 2020-06-01 14:24-0400\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <LL@li.org>\n"
"Language: \n"
......@@ -20154,6 +20152,14 @@ msgid_plural "Showing %d events"
msgstr[0] ""
msgstr[1] ""
msgid "Showing %{count} of %{total} projects"
msgstr ""
msgid "Showing %{count} project"
msgid_plural "Showing %{count} projects"
msgstr[0] ""
msgstr[1] ""
msgid "Showing %{limit} of %{total_count} issues. "
msgstr ""
......
......@@ -110,4 +110,26 @@ describe('ProjectSelector component', () => {
);
});
});
describe('the search results legend', () => {
it.each`
count | total | expected
${0} | ${0} | ${'Showing 0 projects'}
${1} | ${0} | ${'Showing 1 project'}
${2} | ${0} | ${'Showing 2 projects'}
${2} | ${3} | ${'Showing 2 of 3 projects'}
`(
'is "$expected" given $count results are showing out of $total',
({ count, total, expected }) => {
wrapper.setProps({
projectSearchResults: searchResults.slice(0, count),
totalResults: total,
});
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.text()).toContain(expected);
});
},
);
});
});
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