Commit ff7ccb64 authored by Alexander Turinske's avatar Alexander Turinske

Fix policy list drawer height

- use content wrapper to retrive top height
- add tests

Changelog: added
parent 73f2dfc3
......@@ -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];
......
......@@ -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>
......
/**
* 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` : '';
};
---
title: Fix policy list drawer height
merge_request: 61738
author:
type: fixed
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('');
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment