Merge branch 'dpisek/group-deps-filtering-fix-empty-dropdown' into 'master'

Group Deps: Fix empty license filter dropdown

See merge request !143799



Merged-by: Samantha Ming <sming@gitlab.com>
Approved-by: Samantha Ming <sming@gitlab.com>
Approved-by: Lorenz van Herwaarden <lvanherwaarden@gitlab.com>
Reviewed-by: David Pisek <dpisek@gitlab.com>
Co-authored-by: Dave Pisek <dpisek@gitlab.com>

ee/app/assets/javascripts/dependencies/components/filtered_search/tokens/license_token.vue

@@ -108,7 +108,7 @@ export default {
     </template>
     <template #suggestions>
       <gl-loading-icon v-if="fetchingLicensesInProgress" size="sm" />
-      <div v-else>
+      <div v-else-if="filteredLicenses.length">
         <dynamic-scroller
           :items="filteredLicenses"
           :min-item-size="32"

ee/spec/frontend/dependencies/components/filtered_search/tokens/license_token_spec.js

@@ -99,22 +99,21 @@ describe('ee/dependencies/components/filtered_search/tokens/license_token.vue',
       );
     });
 
-    it('correctly sets up a dynamic-scroller to enhance the render-performance of the licenses list', () => {
-      createComponent();
-
-      expect(findDynamicScroller().attributes()).toMatchObject({
-        'key-field': 'id',
-        'min-item-size': '32',
-        style: 'max-height: 170px;',
-      });
-    });
-
-    it('shows the full list of licenses once the fetch is completed', () => {
-      store.state.allDependencies.licenses = TEST_LICENSES;
-      createComponent();
+    it.each([
+      { licenses: TEST_LICENSES, expectDynamicScroller: true },
+      {
+        licenses: [],
+        expectDynamicScroller: false,
+      },
+    ])(
+      'with $licenses.length licenses it contains a dynamic-scroller is "$expectDynamicScroller"',
+      ({ licenses, expectDynamicScroller }) => {
+        store.state.allDependencies.licenses = licenses;
+        createComponent();
 
-      expect(findDynamicScroller().props('items')).toEqual(TEST_LICENSES);
-    });
+        expect(findDynamicScroller().exists()).toBe(expectDynamicScroller);
+      },
+    );
 
     it.each([
       { active: true, expectedValue: null },
@@ -142,6 +141,18 @@ describe('ee/dependencies/components/filtered_search/tokens/license_token.vue',
       createComponent();
     });
 
+    it('correctly sets up a dynamic-scroller to enhance the render-performance of the licenses list', () => {
+      expect(findDynamicScroller().attributes()).toMatchObject({
+        'key-field': 'id',
+        'min-item-size': '32',
+        style: 'max-height: 170px;',
+      });
+    });
+
+    it('shows the full list of licenses once the fetch is completed', () => {
+      expect(findDynamicScroller().props('items')).toEqual(TEST_LICENSES);
+    });
+
     describe('when a user enters a search term', () => {
       it('shows the filtered list of suggestions', async () => {
         await searchForLicense(TEST_LICENSES[0].name);