Fix policy list drawer height

- use content wrapper to retrive top height
- add tests

Changelog: added

ee/app/assets/javascripts/threat_monitoring/components/alerts/alert_drawer.vue

@@ -6,6 +6,7 @@ import { visitUrl } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
 import createIssueMutation from '~/vue_shared/alert_details/graphql/mutations/alert_issue_create.mutation.graphql';
 import getAlertDetailsQuery from '~/vue_shared/alert_details/graphql/queries/alert_details.query.graphql';
+import { getContentWrapperHeight } from '../../utils';
 import { ALERT_DETAILS_LOADING_ROWS, DRAWER_ERRORS, HIDDEN_VALUES } from './constants';
 
 export default {
@@ -112,13 +113,7 @@ export default {
       }
     },
     getDrawerHeaderHeight() {
-      const wrapperEl = document.querySelector('.js-threat-monitoring-container-wrapper');
-
-      if (wrapperEl) {
-        return `${wrapperEl.offsetTop}px`;
-      }
-
-      return '';
+      return getContentWrapperHeight('.js-threat-monitoring-container-wrapper');
     },
     handleAlertError({ type, error }) {
       this.errorMessage = this.$options.i18n.ERRORS[type];

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

@@ -13,6 +13,7 @@ import { mapState, mapActions, mapGetters } from 'vuex';
 import { getTimeago } from '~/lib/utils/datetime_utility';
 import { setUrlFragment, mergeUrlParams } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
+import { getContentWrapperHeight } from '../utils';
 import EnvironmentPicker from './environment_picker.vue';
 import { CiliumNetworkPolicyKind } from './policy_editor/constants';
 import PolicyDrawer from './policy_editor/policy_drawer.vue';
@@ -132,6 +133,9 @@ export default {
   },
   methods: {
     ...mapActions('networkPolicies', ['fetchPolicies', 'createPolicy', 'updatePolicy']),
+    getDrawerHeaderHeight() {
+      return getContentWrapperHeight('.js-threat-monitoring-container-wrapper');
+    },
     getTimeAgoString(creationTimestamp) {
       if (!creationTimestamp) return '';
       return getTimeago().format(creationTimestamp);
@@ -172,7 +176,6 @@ export default {
   autodevopsNoticeDescription: s__(
     `NetworkPolicies|If you are using Auto DevOps, your %{monospacedStart}auto-deploy-values.yaml%{monospacedEnd} file will not be updated if you change a policy in this section. Auto DevOps users should make changes by following the %{linkStart}Container Network Policy documentation%{linkEnd}.`,
   ),
-  headerHeight: process.env.NODE_ENV === 'development' ? '75px' : '40px',
 };
 </script>
 
@@ -251,7 +254,7 @@ export default {
       ref="editorDrawer"
       :z-index="252"
       :open="hasSelectedPolicy"
-      :header-height="$options.headerHeight"
+      :header-height="getDrawerHeaderHeight()"
       @close="deselectPolicy"
     >
       <template #header>

ee/app/assets/javascripts/threat_monitoring/utils.js

+/**
+ * Get the height of the wrapper page element
+ * This height can be used to determine where the highest element goes in a page
+ * Useful for gl-drawer's header-height prop
+ * @param {String} class the content wrapper class
+ * @returns {String} height in px
+ */
+export const getContentWrapperHeight = (contentWrapperClass) => {
+  const wrapperEl = document.querySelector(contentWrapperClass);
+  return wrapperEl ? `${wrapperEl.offsetTop}px` : '';
+};

ee/changelogs/unreleased/fix-policy-list-drawer-height.yml

+---
+title: Fix policy list drawer height
+merge_request: 61738
+author:
+type: fixed

ee/spec/frontend/threat_monitoring/utils_spec.js

+import { getContentWrapperHeight } from 'ee/threat_monitoring/utils';
+import { setHTMLFixture } from 'helpers/fixtures';
+
+describe('Threat Monitoring Utils', () => {
+  describe('getContentWrapperHeight', () => {
+    const fixture = `
+      <div>
+        <div class="content-wrapper">
+          <div class="content"></div>
+        </div>
+      </div>
+    `;
+
+    beforeEach(() => {
+      setHTMLFixture(fixture);
+    });
+
+    it('returns the height of an element that exists', () => {
+      expect(getContentWrapperHeight('.content-wrapper')).toBe('0px');
+    });
+
+    it('returns an empty string for a class that does not exist', () => {
+      expect(getContentWrapperHeight('.does-not-exist')).toBe('');
+    });
+  });
+});