Ensure selected projects are always visible

When displaying selected / unselected projects in the vsa
project selector, we were checking the `availableProjects`
computed property, this would return the items that match the
current search string, instead we should always use the
`selectedProjects` computed property for selected items.

This ensures that selected items that do not match the
current search term are still visible.

Adds a related spec test

app/assets/javascripts/analytics/shared/components/projects_dropdown_filter.vue

@@ -101,9 +101,7 @@ export default {
       return !loading && !availableProjects.length;
     },
     selectedItems() {
-      return sortByProjectName(
-        this.availableProjects.filter(({ id }) => this.selectedProjectIds.includes(id)),
-      );
+      return sortByProjectName(this.selectedProjects);
     },
     unselectedItems() {
       return this.availableProjects.filter(({ id }) => !this.selectedProjectIds.includes(id));

spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js

@@ -2,6 +2,7 @@ import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import { stubComponent } from 'helpers/stub_component';
 import { TEST_HOST } from 'helpers/test_constants';
+import waitForPromises from 'helpers/wait_for_promises';
 import ProjectsDropdownFilter from '~/analytics/shared/components/projects_dropdown_filter.vue';
 import getProjects from '~/analytics/shared/graphql/projects.query.graphql';
 
@@ -65,7 +66,7 @@ describe('ProjectsDropdownFilter component', () => {
 
   const createWithMockDropdown = (props) => {
     createComponent(props, { GlDropdown: MockGlDropdown });
-    return wrapper.vm.$nextTick();
+    return waitForPromises();
   };
 
   afterEach(() => {
@@ -73,6 +74,7 @@ describe('ProjectsDropdownFilter component', () => {
   });
 
   const findHighlightedItems = () => wrapper.findByTestId('vsa-highlighted-items');
+  const findUnhighlightedItems = () => wrapper.findByTestId('vsa-default-items');
   const findHighlightedItemsTitle = () => wrapper.findByText('Selected');
   const findClearAllButton = () => wrapper.findByText('Clear all');
 
@@ -197,6 +199,24 @@ describe('ProjectsDropdownFilter component', () => {
     });
   });
 
+  describe('with a selected project and search term', () => {
+    beforeEach(async () => {
+      await createWithMockDropdown({ multiSelect: true });
+
+      selectDropdownItemAtIndex(0);
+      wrapper.setData({ searchTerm: 'this is a very long search string' });
+    });
+
+    it('renders the highlighted items', async () => {
+      expect(findUnhighlightedItems().findAll('li').length).toBe(1);
+    });
+
+    it('hides the unhighlighted items that do not match the string', async () => {
+      expect(findUnhighlightedItems().findAll('li').length).toBe(1);
+      expect(findUnhighlightedItems().text()).toContain('No matching results');
+    });
+  });
+
   describe('when passed an array of defaultProject as prop', () => {
     beforeEach(() => {
       createComponent({