From 57fa6ae9f3b90a3f90c187be988b01d4d99f40ac Mon Sep 17 00:00:00 2001
From: Candace Park <56409205+parkiino@users.noreply.github.com>
Date: Mon, 10 Jul 2023 17:36:12 -0400
Subject: [PATCH] [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](https://github.com/elastic/kibana/assets/56409205/766f983a-d731-4dba-a0ea-96f384090cda)

![image](https://github.com/elastic/kibana/assets/56409205/1b078b1e-61d7-4227-b543-f92c58d79acd)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
---
 .../view/policy_forms/components/policy_form_layout.tsx   | 6 +++---
 .../apps/integrations/policy_details.ts                   | 8 ++++++++
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/components/policy_form_layout.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/components/policy_form_layout.tsx
index fcc3f9a421818..34defb5b25ce6 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/components/policy_form_layout.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/components/policy_form_layout.tsx
@@ -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>
     </>
   );
 });
diff --git a/x-pack/test/security_solution_endpoint/apps/integrations/policy_details.ts b/x-pack/test/security_solution_endpoint/apps/integrations/policy_details.ts
index d01f869e285e9..e167315e0a126 100644
--- a/x-pack/test/security_solution_endpoint/apps/integrations/policy_details.ts
+++ b/x-pack/test/security_solution_endpoint/apps/integrations/policy_details.ts
@@ -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');