Merge branch...

Merge branch '334780-follow-up-from-add-the-initial-drawer-to-the-compliance-dashboard' into 'master'

Update compliance report drawer to share code with threat monitoring

See merge request gitlab-org/gitlab!72003

app/assets/javascripts/lib/utils/constants.js

@@ -20,3 +20,7 @@ export const BV_DROPDOWN_HIDE = 'bv::dropdown::hide';
 
 export const DEFAULT_TH_CLASSES =
   'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!';
+
+// We set the drawer's z-index to 252 to clear flash messages that might
+// be displayed in the page and that have a z-index of 251.
+export const DRAWER_Z_INDEX = 252;

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

 <script>
 import { GlDrawer } from '@gitlab/ui';
+import { DRAWER_Z_INDEX } from '~/lib/utils/constants';
+import { COMPLIANCE_DRAWER_CONTAINER_CLASS } from '../constants';
+import { getContentWrapperHeight } from '../../threat_monitoring/utils';
 import BranchPath from './drawer_sections/branch_path.vue';
 import Committers from './drawer_sections/committers.vue';
 import MergedBy from './drawer_sections/merged_by.vue';
@@ -32,28 +35,18 @@ export default {
     hasBranchDetails() {
       return this.mergeRequest.source_branch && this.mergeRequest.target_branch;
     },
-  },
-  methods: {
-    getDrawerHeaderHeight() {
-      const wrapperEl = document.querySelector('.content-wrapper');
-
-      if (wrapperEl) {
-        return `${wrapperEl.offsetTop}px`;
-      }
-
-      return '';
+    drawerHeaderHeight() {
+      return getContentWrapperHeight(COMPLIANCE_DRAWER_CONTAINER_CLASS);
     },
   },
-  // We set the drawer's z-index to 252 to clear flash messages that might be displayed in the page
-  // and that have a z-index of 251.
-  Z_INDEX: 252,
+  DRAWER_Z_INDEX,
 };
 </script>
 <template>
   <gl-drawer
     :open="showDrawer"
-    :header-height="getDrawerHeaderHeight()"
-    :z-index="$options.Z_INDEX"
+    :header-height="drawerHeaderHeight"
+    :z-index="$options.DRAWER_Z_INDEX"
     @close="$emit('close')"
   >
     <template #title>

ee/app/assets/javascripts/compliance_dashboard/constants.js

@@ -9,3 +9,5 @@ export const CUSTODY_REPORT_PARAMETER = 'commit_sha';
 export const DRAWER_AVATAR_SIZE = 24;
 
 export const DRAWER_MAXIMUM_AVATARS = 20;
+
+export const COMPLIANCE_DRAWER_CONTAINER_CLASS = '.content-wrapper';

ee/app/assets/javascripts/threat_monitoring/components/policy_drawer/policy_drawer.vue

 <script>
 import { GlButton, GlDrawer } from '@gitlab/ui';
+import { DRAWER_Z_INDEX } from '~/lib/utils/constants';
 import { getContentWrapperHeight, removeUnnecessaryDashes } from '../../utils';
 import { POLICIES_LIST_CONTAINER_CLASS, POLICY_TYPE_COMPONENT_OPTIONS } from '../constants';
 import CiliumNetworkPolicy from './cilium_network_policy.vue';
@@ -54,9 +55,7 @@ export default {
       return getContentWrapperHeight(this.containerClass);
     },
   },
-  // We set the drawer's z-index to 252 to clear flash messages that might be displayed in the page
-  // and that have a z-index of 251.
-  DRAWER_Z_INDEX: 252,
+  DRAWER_Z_INDEX,
 };
 </script>
 

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

@@ -10,6 +10,10 @@ import { complianceFramework } from 'ee_jest/vue_shared/components/compliance_fr
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { createApprovers, createMergeRequests } from '../mock_data';
 
+jest.mock('ee/threat_monitoring/utils', () => ({
+  getContentWrapperHeight: jest.fn().mockReturnValue('50px'),
+}));
+
 describe('MergeRequestDrawer component', () => {
   let wrapper;
   const mergeRequest = createMergeRequests({
@@ -44,6 +48,19 @@ describe('MergeRequestDrawer component', () => {
     wrapper.destroy();
   });
 
+  describe('default behaviour', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
+    it('configures the drawer with header height and z-index', () => {
+      expect(findDrawer().props()).toMatchObject({
+        headerHeight: '50px',
+        zIndex: 252,
+      });
+    });
+  });
+
   describe('when closed', () => {
     beforeEach(() => {
       wrapper = createComponent({ showDrawer: false });