[Security Solution][Admin][Policy] Fixes bug in policy details form where sticky bottom bar hides the side nav bar (#161492)

## Summary

- [x] Fixes sticky bottom bar to go behind the side nav in policy
details
- [x] Adds functional test to ensure bug does not get reopened
##
BEFORE

![olm-bug-policy-details-bottom-bar](https://user-images.githubusercontent.com/56442535/217864225-77f025be-c158-4d01-96c2-e0c43afb23e4.gif)

AFTER

![image](766f983a-d731-4dba-a0ea-96f384090cda)

![image](1b078b1e-61d7-4227-b543-f92c58d79acd)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Candace Park 2023-07-10 17:36:12 -04:00 committed by GitHub
parent 4439121c32
commit 57fa6ae9f3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 3 deletions

View file

@ -12,7 +12,6 @@ import {
EuiButton,
EuiButtonEmpty,
EuiLoadingSpinner,
EuiBottomBar,
EuiSpacer,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
@ -21,6 +20,7 @@ import { useDispatch } from 'react-redux';
import { useLocation } from 'react-router-dom';
import type { ApplicationStart } from '@kbn/core/public';
import { toMountPoint } from '@kbn/kibana-react-plugin/public';
import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
import { useShowEditableFormFields, usePolicyDetailsSelector } from '../../policy_hooks';
import {
policyDetails,
@ -159,7 +159,7 @@ export const PolicyFormLayout = React.memo(() => {
)}
<PolicyDetailsForm />
<EuiSpacer size="xxl" />
<EuiBottomBar paddingSize="s">
<KibanaPageTemplate.BottomBar paddingSize="s">
<EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButtonEmpty
@ -190,7 +190,7 @@ export const PolicyFormLayout = React.memo(() => {
</EuiFlexItem>
)}
</EuiFlexGroup>
</EuiBottomBar>
</KibanaPageTemplate.BottomBar>
</>
);
});

View file

@ -72,6 +72,14 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
);
});
it('should not hide the side navigation', async () => {
await testSubjects.scrollIntoView('solutionSideNavItemLink-get_started');
// ensure center of button is visible and not hidden by sticky bottom bar
await testSubjects.click('solutionSideNavItemLink-administration', 1000, 15);
// test cleanup: go back to policy details page
await pageObjects.policy.navigateToPolicyDetails(policyInfo.packagePolicy.id);
});
it('and the show advanced settings button is clicked', async () => {
await testSubjects.missingOrFail('advancedPolicyPanel');