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.

app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue

 <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') }}

changelogs/unreleased/217985-use-glinfinitescroll-s-default-slot-in-the-project-selector-vue-co.yml

+---
+title: Make project selector in various dashboard more translatable
+merge_request: 33771
+author:
+type: other

locale/gitlab.pot

@@ -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 ""
 

spec/frontend/vue_shared/components/project_selector/project_selector_spec.js

@@ -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);
+        });
+      },
+    );
+  });
 });