Merge branch '217530-bulk-dismissal-easier-selection' into 'master'

Make it easier to click on items for bulk dismissal selection

See merge request gitlab-org/gitlab!43482

ee/app/assets/javascripts/security_dashboard/components/vulnerability_list.vue

@@ -272,8 +272,6 @@ export default {
       }
     },
     toggleVulnerability(vulnerability) {
-      if (!vulnerability) return;
-
       if (this.selectedVulnerabilities[vulnerability.id]) {
         this.$delete(this.selectedVulnerabilities, `${vulnerability.id}`);
       } else {
@@ -336,8 +334,11 @@ export default {
       class="vulnerability-list"
       show-empty
       responsive
+      hover
       primary-key="id"
+      tbody-tr-class="gl-cursor-pointer"
       @sort-changed="handleSortChange"
+      @row-clicked="toggleVulnerability"
     >
       <template #head(checkbox)>
         <gl-form-checkbox
@@ -360,7 +361,7 @@ export default {
 
       <template #cell(checkbox)="{ item }">
         <gl-form-checkbox
-          class="gl-display-inline-block! gl-m-0"
+          class="gl-display-inline-block! gl-m-0 gl-pointer-events-none"
           data-testid="vulnerability-checkbox"
           :checked="isSelected(item)"
           @change="toggleVulnerability(item)"

ee/changelogs/unreleased/217530-bulk-dismissal-easier-selection.yml

+---
+title: Make it easier to click on items for bulk dismissal selection on security dashboard
+merge_request: 43482
+author:
+type: changed

ee/spec/frontend/security_dashboard/components/vulnerability_list_spec.js

@@ -571,4 +571,30 @@ describe('Vulnerability list component', () => {
       expect(findSortableColumn().exists()).toBe(false);
     });
   });
+
+  describe('row click', () => {
+    const findRowCheckbox = index => findRow(index).find('[data-testid="vulnerability-checkbox"]');
+
+    beforeEach(() => {
+      wrapper = createWrapper({ props: { vulnerabilities } });
+    });
+
+    it('will select and deselect vulnerabilities', async () => {
+      const rowCount = vulnerabilities.length;
+      const rowsToClick = [0, 1, 2];
+      const clickRows = () => rowsToClick.forEach(row => findRow(row).trigger('click'));
+      const expectRowCheckboxesToBe = condition => {
+        for (let i = 0; i < rowCount; i += 1)
+          expect(findRowCheckbox(i).element.checked).toBe(condition(i));
+      };
+
+      clickRows();
+      await wrapper.vm.$nextTick();
+      expectRowCheckboxesToBe(i => rowsToClick.includes(i));
+
+      clickRows();
+      await wrapper.vm.$nextTick();
+      expectRowCheckboxesToBe(() => false);
+    });
+  });
 });