From 7353aaa5bbaeb250f2c3889b892d14a8acc68e95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patryk=20Kopycin=CC=81ski?= <contact@patrykkopycinski.com>
Date: Sat, 11 Jan 2020 14:22:07 +0100
Subject: [PATCH] fix accordion overflow

---
 .../rules/components/query_bar/index.tsx      |  2 +-
 .../components/step_define_rule/index.tsx     |  4 +--
 .../detection_engine/rules/create/index.tsx   | 31 ++++++-------------
 3 files changed, 12 insertions(+), 25 deletions(-)

diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/query_bar/index.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/query_bar/index.tsx
index 3e39beb6e61b..46a7a13ec03f 100644
--- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/query_bar/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/query_bar/index.tsx
@@ -51,7 +51,7 @@ interface QueryBarDefineRuleProps {
 
 const StyledEuiFormRow = styled(EuiFormRow)`
   .kbnTypeahead__items {
-    max-height: 14vh !important;
+    max-height: 45vh !important;
   }
   .globalQueryBar {
     padding: 4px 0px 0px 0px;
diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/step_define_rule/index.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/step_define_rule/index.tsx
index baf9bd702e6c..3b929fc2005b 100644
--- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/step_define_rule/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/step_define_rule/index.tsx
@@ -59,13 +59,12 @@ const getStepDefaultValue = (
   }
 };
 
-export const StepDefineRuleComponent: FC<StepDefineRuleProps> = ({
+const StepDefineRuleComponent: FC<StepDefineRuleProps> = ({
   defaultValues,
   descriptionDirection = 'row',
   isReadOnlyView,
   isLoading,
   isUpdateView = false,
-  resizeParentContainer,
   setForm,
   setStepData,
 }) => {
@@ -192,7 +191,6 @@ export const StepDefineRuleComponent: FC<StepDefineRuleProps> = ({
             dataTestSubj: 'detectionEngineStepDefineRuleQueryBar',
             openTimelineSearch,
             onCloseTimelineSearch: handleCloseTimelineSearch,
-            resizeParentContainer,
           }}
         />
         <FormDataProvider pathsToWatch="index">
diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/create/index.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/create/index.tsx
index a07384e52bdb..682e43d5d4e0 100644
--- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/create/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/create/index.tsx
@@ -27,26 +27,17 @@ import * as i18n from './translations';
 
 const stepsRuleOrder = [RuleStep.defineRule, RuleStep.aboutRule, RuleStep.scheduleRule];
 
-const ResizeEuiPanel = styled(EuiPanel)<{
-  height?: number;
+const MyEuiPanel = styled(EuiPanel)<{
+  zIndex?: number;
 }>`
+  position: relative;
+  z-index: ${props => props.zIndex}; /* ugly fix to allow searchBar to overflow the EuiPanel */
+
   .euiAccordion__iconWrapper {
     display: none;
   }
   .euiAccordion__childWrapper {
-    height: ${props => (props.height !== -1 ? `${props.height}px !important` : 'auto')};
-  }
-  .euiAccordion__button {
-    cursor: default !important;
-    &:hover {
-      text-decoration: none !important;
-    }
-  }
-`;
-
-const MyEuiPanel = styled(EuiPanel)`
-  .euiAccordion__iconWrapper {
-    display: none;
+    overflow: visible;
   }
   .euiAccordion__button {
     cursor: default !important;
@@ -57,7 +48,6 @@ const MyEuiPanel = styled(EuiPanel)`
 `;
 
 export const CreateRuleComponent = React.memo(() => {
-  const [heightAccordion, setHeightAccordion] = useState(-1);
   const [openAccordionId, setOpenAccordionId] = useState<RuleStep>(RuleStep.defineRule);
   const defineRuleRef = useRef<EuiAccordion | null>(null);
   const aboutRuleRef = useRef<EuiAccordion | null>(null);
@@ -220,7 +210,7 @@ export const CreateRuleComponent = React.memo(() => {
           isLoading={isLoading}
           title={i18n.PAGE_TITLE}
         />
-        <ResizeEuiPanel height={heightAccordion}>
+        <MyEuiPanel zIndex={3}>
           <EuiAccordion
             initialIsOpen={true}
             id={RuleStep.defineRule}
@@ -247,14 +237,13 @@ export const CreateRuleComponent = React.memo(() => {
                 isLoading={isLoading}
                 setForm={setStepsForm}
                 setStepData={setStepData}
-                resizeParentContainer={height => setHeightAccordion(height)}
                 descriptionDirection={'column'}
               />
             </StepContentWrapper>
           </EuiAccordion>
-        </ResizeEuiPanel>
+        </MyEuiPanel>
         <EuiSpacer size="s" />
-        <MyEuiPanel>
+        <MyEuiPanel zIndex={2}>
           <EuiAccordion
             initialIsOpen={false}
             id={RuleStep.aboutRule}
@@ -287,7 +276,7 @@ export const CreateRuleComponent = React.memo(() => {
           </EuiAccordion>
         </MyEuiPanel>
         <EuiSpacer size="s" />
-        <MyEuiPanel>
+        <MyEuiPanel zIndex={1}>
           <EuiAccordion
             initialIsOpen={false}
             id={RuleStep.scheduleRule}