Add latest changes from gitlab-org/gitlab@13-1-stable-ee

1 files changed, 37 insertions, 21 deletions

diff --git a/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue b/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue
index fd45ac52647..15a5ce85046 100644
--- a/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue
+++ b/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue
@@ -1,6 +1,7 @@
 <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;
@@ -24,28 +25,23 @@ export default {
     },
     showNoResultsMessage: {
       type: Boolean,
-      required: false,
-      default: false,
+      required: true,
     },
     showMinimumSearchQueryMessage: {
       type: Boolean,
-      required: false,
-      default: false,
+      required: true,
     },
     showLoadingIndicator: {
       type: Boolean,
-      required: false,
-      default: false,
+      required: true,
     },
     showSearchErrorMessage: {
       type: Boolean,
-      required: false,
-      default: false,
+      required: true,
     },
     totalResults: {
       type: Number,
-      required: false,
-      default: 0,
+      required: true,
     },
   },
   data() {
@@ -53,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);
@@ -87,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') }}