Fix compliance report drawer closing incorrectly

The compliance report drawer now stays open when a new violation
is selected with the same merge request.

ee/app/assets/javascripts/compliance_dashboard/components/report.vue

@@ -60,7 +60,7 @@ export default {
         list: [],
         pageInfo: {},
       },
-      showDrawer: false,
+      drawerId: null,
       drawerMergeRequest: {},
       drawerProject: {},
       sortBy,
@@ -108,6 +108,9 @@ export default {
       const { hasPreviousPage, hasNextPage } = this.violations.pageInfo || {};
       return hasPreviousPage || hasNextPage;
     },
+    showDrawer() {
+      return this.drawerId !== null;
+    },
   },
   methods: {
     handleSortChanged(sortState) {
@@ -115,24 +118,21 @@ export default {
       this.updateUrlQuery({ ...this.urlQuery, sort: this.sortParam });
     },
     toggleDrawer(rows) {
-      const { mergeRequest } = rows[0] || {};
+      const { id, mergeRequest } = rows[0] || {};
 
-      if (!mergeRequest || this.isCurrentDrawer(mergeRequest)) {
+      if (!mergeRequest || this.drawerId === id) {
         this.closeDrawer();
       } else {
-        this.openDrawer(mergeRequest);
+        this.openDrawer(id, mergeRequest);
       }
     },
-    isCurrentDrawer(mergeRequest) {
-      return this.showDrawer && mergeRequest.id === this.drawerMergeRequest.id;
-    },
-    openDrawer(mergeRequest) {
-      this.showDrawer = true;
+    openDrawer(id, mergeRequest) {
+      this.drawerId = id;
       this.drawerMergeRequest = mergeRequest;
       this.drawerProject = mergeRequest.project;
     },
     closeDrawer() {
-      this.showDrawer = false;
+      this.drawerId = null;
       // Refs are required by BTable to manipulate the selection
       // issue: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1531
       this.$refs.table.$children[0].clearSelected();

ee/spec/frontend/compliance_dashboard/components/report_spec.js

@@ -237,7 +237,7 @@ describe('ComplianceReport component', () => {
       expect(rowTexts).toEqual([
         'High',
         'Approved by committer',
-        `Merge request ${idx}`,
+        violations[idx].mergeRequest.title,
         'in 1 year',
         'View details',
       ]);
@@ -306,7 +306,7 @@ describe('ComplianceReport component', () => {
           expect(findMergeRequestDrawer().props('project')).toStrictEqual({});
         });
 
-        it(`swaps the drawer when another ${eventDescription}`, async () => {
+        it(`keeps the drawer open when another violation's ${eventDescription}`, async () => {
           const drawerData = mapViolations(violations)[1];
 
           await rowAction(0);

ee/spec/frontend/compliance_dashboard/mock_data.js

@@ -107,8 +107,8 @@ export const createComplianceViolation = (id) => ({
     __typename: 'UserCore',
   },
   mergeRequest: {
-    id: `gid://gitlab/MergeRequest/${id}`,
-    title: `Merge request ${id}`,
+    id: `gid://gitlab/MergeRequest/1`,
+    title: `Merge request 1`,
     mergedAt: '2022-03-06T16:39:12Z',
     webUrl: 'http://gdk.test:3000/gitlab-org/gitlab-shell/-/merge_requests/56',
     author: {