Remove "Showing 0 projects" from project selector on initial load

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

@@ -48,10 +48,14 @@ export default {
   data() {
     return {
       searchQuery: '',
+      hasSearched: false,
     };
   },
   computed: {
     legendText() {
+      if (!this.hasSearched) {
+        return '';
+      }
       const count = this.projectSearchResults.length;
       const total = this.totalResults;
 
@@ -75,6 +79,9 @@ export default {
       return this.selectedProjects.some(({ id }) => project.id === id);
     },
     onInput: debounce(function debouncedOnInput() {
+      if (!this.hasSearched) {
+        this.hasSearched = true;
+      }
       this.$emit('searched', this.searchQuery);
     }, SEARCH_INPUT_TIMEOUT_MS),
   },
@@ -115,7 +122,7 @@ export default {
         </template>
 
         <template #default>
-          {{ legendText }}
+          <span data-testid="legend-text">{{ legendText }}</span>
         </template>
       </gl-infinite-scroll>
       <div v-if="showNoResultsMessage" class="text-muted ml-2 js-no-results-message">

ee/changelogs/unreleased/Remove--Show-0-projects--from-project-selector-on-initial-load.yml

+---
+title: Remove "Showing 0 projects" from project selector on initial load
+merge_request: 51136
+author: Kev @KevSlashNull
+type: changed

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

@@ -18,6 +18,13 @@ describe('ProjectSelector component', () => {
   selected = selected.concat(allProjects.slice(0, 3)).concat(allProjects.slice(5, 8));
 
   const findSearchInput = () => wrapper.find(GlSearchBoxByType).find('input');
+  const findLegendText = () => wrapper.find('[data-testid="legend-text"]').text();
+  const search = (query) => {
+    const searchInput = findSearchInput();
+
+    searchInput.setValue(query);
+    searchInput.trigger('input');
+  };
 
   beforeEach(() => {
     wrapper = mount(Vue.extend(ProjectSelector), {
@@ -48,10 +55,7 @@ describe('ProjectSelector component', () => {
   it(`triggers a search when the search input value changes`, () => {
     jest.spyOn(vm, '$emit').mockImplementation(() => {});
     const query = 'my test query!';
-    const searchInput = findSearchInput();
-
-    searchInput.setValue(query);
-    searchInput.trigger('input');
+    search(query);
 
     expect(vm.$emit).toHaveBeenCalledWith('searched', query);
   });
@@ -121,15 +125,21 @@ describe('ProjectSelector component', () => {
     `(
       'is "$expected" given $count results are showing out of $total',
       ({ count, total, expected }) => {
+        search('gitlab ui');
+
         wrapper.setProps({
           projectSearchResults: searchResults.slice(0, count),
           totalResults: total,
         });
 
         return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.text()).toContain(expected);
+          expect(findLegendText()).toBe(expected);
         });
       },
     );
+
+    it('is not rendered without searching', () => {
+      expect(findLegendText()).toBe('');
+    });
   });
 });