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> <script>
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { GlLoadingIcon, GlSearchBoxByType, GlInfiniteScroll } from '@gitlab/ui'; import { GlLoadingIcon, GlSearchBoxByType, GlInfiniteScroll } from '@gitlab/ui';
import { __, n__, sprintf } from '~/locale';
import ProjectListItem from './project_list_item.vue'; import ProjectListItem from './project_list_item.vue';
const SEARCH_INPUT_TIMEOUT_MS = 500; const SEARCH_INPUT_TIMEOUT_MS = 500;
...@@ -48,6 +49,20 @@ export default { ...@@ -48,6 +49,20 @@ export default {
searchQuery: '', 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: { methods: {
projectClicked(project) { projectClicked(project) {
this.$emit('projectClicked', project); this.$emit('projectClicked', project);
...@@ -82,17 +97,23 @@ export default { ...@@ -82,17 +97,23 @@ export default {
:total-items="totalResults" :total-items="totalResults"
@bottomReached="bottomReached" @bottomReached="bottomReached"
> >
<div v-if="!showLoadingIndicator" slot="items" class="d-flex flex-column"> <template v-if="!showLoadingIndicator" #items>
<project-list-item <div class="d-flex flex-column">
v-for="project in projectSearchResults" <project-list-item
:key="project.id" v-for="project in projectSearchResults"
:selected="isSelected(project)" :key="project.id"
:project="project" :selected="isSelected(project)"
:matcher="searchQuery" :project="project"
class="js-project-list-item" :matcher="searchQuery"
@click="projectClicked(project)" class="js-project-list-item"
/> @click="projectClicked(project)"
</div> />
</div>
</template>
<template #default>
{{ legendText }}
</template>
</gl-infinite-scroll> </gl-infinite-scroll>
<div v-if="showNoResultsMessage" class="text-muted ml-2 js-no-results-message"> <div v-if="showNoResultsMessage" class="text-muted ml-2 js-no-results-message">
{{ __('Sorry, no projects matched your search') }} {{ __('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 "" ...@@ -8,8 +8,6 @@ msgid ""
msgstr "" msgstr ""
"Project-Id-Version: gitlab 1.0.0\n" "Project-Id-Version: gitlab 1.0.0\n"
"Report-Msgid-Bugs-To: \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" "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <LL@li.org>\n" "Language-Team: LANGUAGE <LL@li.org>\n"
"Language: \n" "Language: \n"
...@@ -20154,6 +20152,14 @@ msgid_plural "Showing %d events" ...@@ -20154,6 +20152,14 @@ msgid_plural "Showing %d events"
msgstr[0] "" msgstr[0] ""
msgstr[1] "" 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. " msgid "Showing %{limit} of %{total_count} issues. "
msgstr "" msgstr ""
......
...@@ -110,4 +110,26 @@ describe('ProjectSelector component', () => { ...@@ -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