Merge branch '321051-license-compliance-ui-index-out-of-bounds' into 'master'

Update package list logic for license compliance

See merge request gitlab-org/gitlab!55466

ee/app/assets/javascripts/vue_shared/license_compliance/components/license_issue_body.vue

@@ -14,6 +14,11 @@ export default {
       required: true,
     },
   },
+  computed: {
+    hasPackages() {
+      return Boolean(this.issue.packages.length);
+    },
+  },
   methods: { ...mapActions(LICENSE_MANAGEMENT, ['setLicenseInModal']) },
 };
 </script>
@@ -21,6 +26,6 @@ export default {
 <template>
   <div class="report-block-info license-item">
     <gl-link :href="issue.url" target="_blank">{{ issue.name }}</gl-link>
-    <license-packages :packages="issue.packages" class="text-secondary" />
+    <license-packages v-if="hasPackages" :packages="issue.packages" class="text-secondary" />
   </div>
 </template>

ee/changelogs/unreleased/321051-license-compliance-ui-index-out-of-bounds.yml

+---
+title: Hide package list if license compliance has an entry with 0 packages
+merge_request: 55466
+author:
+type: fixed

ee/spec/frontend/vue_shared/license_compliance/components/license_issue_body_spec.js

@@ -14,7 +14,6 @@ describe('LicenseIssueBody', () => {
 
   beforeEach(() => {
     store = createStore();
-    vm = mountComponentWithStore(Component, { props: { issue }, store });
   });
 
   afterEach(() => {
@@ -22,6 +21,10 @@ describe('LicenseIssueBody', () => {
   });
 
   describe('template', () => {
+    beforeEach(() => {
+      vm = mountComponentWithStore(Component, { props: { issue }, store });
+    });
+
     it('renders component container element with class `license-item`', () => {
       expect(vm.$el.classList.contains('license-item')).toBe(true);
     });
@@ -40,4 +43,20 @@ describe('LicenseIssueBody', () => {
       expect(trimText(packagesEl.innerText)).toBe('Used by pg, puma, foo, and 2 more');
     });
   });
+
+  describe('template without packages', () => {
+    beforeEach(() => {
+      const issueWithoutPackages = licenseReport[0];
+      issueWithoutPackages.packages = [];
+
+      vm = mountComponentWithStore(Component, { props: { issue: issueWithoutPackages }, store });
+    });
+
+    it('does not render packages list', () => {
+      const packagesEl = vm.$el.querySelector('.license-packages');
+
+      expect(packagesEl).toBeNull();
+      vm.$destroy();
+    });
+  });
 });