Make arrow on generic report section clickable

This commit makes the arrow on the header of the generic report
section clickable so it will toggle the collapsed/expanded state.

Changelog: fixed
EE: true

ee/app/assets/javascripts/vulnerabilities/components/generic_report/report_section.vue

@@ -48,9 +48,12 @@ export default {
 </script>
 <template>
   <section v-if="hasDetails">
-    <header class="gl-display-flex gl-align-items-center">
+    <header
+      class="gl-display-inline-flex gl-align-items-center gl-font-size-h3 gl-cursor-pointer"
+      @click="toggleShowSection"
+    >
       <gl-icon name="angle-right" class="gl-mr-2" :class="{ 'gl-rotate-90': showSection }" />
-      <h3 class="gl-display-inline gl-my-0! gl-cursor-pointer" @click="toggleShowSection">
+      <h3 class="gl-my-0! gl-font-lg">
         {{ $options.i18n.heading }}
       </h3>
     </header>

ee/app/assets/stylesheets/components/generic_vulnerability_report.scss

@@ -24,8 +24,14 @@
   }
 }
 
+// Note: the report list is using a non-utility approach because it needs to support two cases:
+// 1. If it is only one level deep it should have no list style (and margins)
+// 2. If it is more than one level deep it needs to have bullet points
+// A utility-only approach would require additional logic within component, so it was decided to go with a
+// custom class.
 .generic-report-list {
   margin-bottom: 0 !important;
+  @include gl-pl-0;
 
   li {
     @include gl-ml-0;

ee/spec/frontend/vulnerabilities/generic_report/report_section_spec.js

-import { within, fireEvent } from '@testing-library/dom';
+import { within } from '@testing-library/dom';
 import { mount } from '@vue/test-utils';
-import { nextTick } from 'vue';
 import ReportSection from 'ee/vulnerabilities/components/generic_report/report_section.vue';
 import { REPORT_TYPES } from 'ee/vulnerabilities/components/generic_report/types/constants';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
@@ -40,6 +39,7 @@ describe('ee/vulnerabilities/components/generic_report/report_section.vue', () =
     );
 
   const withinWrapper = () => within(wrapper.element);
+  const findHeader = () => wrapper.find('header');
   const findHeading = () =>
     withinWrapper().getByRole('heading', {
       name: /evidence/i,
@@ -60,11 +60,10 @@ describe('ee/vulnerabilities/components/generic_report/report_section.vue', () =
         expect(findHeading()).toBeInstanceOf(HTMLElement);
       });
 
-      it('collapses when the heading is clicked', async () => {
+      it('collapses when the header is clicked', async () => {
         expect(findReportsSection().isVisible()).toBe(true);
 
-        fireEvent.click(findHeading());
-        await nextTick();
+        await findHeader().trigger('click');
 
         expect(findReportsSection().isVisible()).toBe(false);
       });