Fetch the Next Page if Bottom of Scroll is Reached

Also test to ensure pages are fetched as the user scrolls.

ee/app/assets/javascripts/environments_dashboard/components/dashboard/dashboard.vue

@@ -70,6 +70,7 @@ export default {
       'searchCount',
       'searchQuery',
       'messages',
+      'pageInfo',
     ]),
     isSearchingProjects() {
       return this.searchCount > 0;
@@ -90,6 +91,7 @@ export default {
       'fetchSearchResults',
       'addProjectsToDashboard',
       'fetchProjects',
+      'fetchNextPage',
       'setProjectEndpoints',
       'clearSearchResults',
       'toggleSelectedProject',
@@ -135,8 +137,10 @@ export default {
         :show-loading-indicator="isSearchingProjects"
         :show-minimum-search-query-message="messages.minimumQuery"
         :show-search-error-message="messages.searchError"
+        :total-results="pageInfo.totalResults"
         @searched="searched"
         @projectClicked="projectClicked"
+        @bottomReached="fetchNextPage"
       />
     </gl-modal>
     <div class="page-title-holder flex-fill d-flex align-items-center">

ee/changelogs/unreleased/add-infinite-scroll.yml

+---
+title: Fix Infinite Scrolling on Environments Dashboard Project Selector
+merge_request: 20408
+author:
+type: fixed

ee/spec/frontend/environments_dashboard/components/dashboard_spec.js

@@ -29,6 +29,7 @@ describe('dashboard', () => {
       removeProject: jest.fn(),
       toggleSelectedProject: jest.fn(),
       fetchNextPage: jest.fn(),
+      fetchProjects: jest.fn(),
     };
     propsData = {
       addPath: 'mock-addPath',
@@ -42,7 +43,6 @@ describe('dashboard', () => {
       localVue,
       store,
       methods: {
-        fetchProjects: () => {},
         ...actionSpies,
       },
     });
@@ -135,6 +135,16 @@ describe('dashboard', () => {
         wrapper.find(ProjectSelector).vm.$emit('projectClicked', { name: 'test', id: 1 });
         expect(actionSpies.toggleSelectedProject).toHaveBeenCalledWith({ name: 'test', id: 1 });
       });
+
+      it('should fetch the next page when bottom is reached', () => {
+        wrapper.find(ProjectSelector).vm.$emit('bottomReached');
+        expect(actionSpies.fetchNextPage).toHaveBeenCalled();
+      });
+
+      it('should get the page info from the state', () => {
+        store.state.pageInfo = { totalResults: 100 };
+        expect(wrapper.find(ProjectSelector).props('totalResults')).toBe(100);
+      });
     });
   });
 });