Fix create agent config flyout being covered by bottom bar (#71502)

elastic · Jul 13, 2020 · 1d23a48 · 1d23a48
1 parent b3c6ce9
commit 1d23a48
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/...ns/ingest_manager/sections/agent_config/create_package_config_page/step_select_config.tsx b/...ns/ingest_manager/sections/agent_config/create_package_config_page/step_select_config.tsx
@@ -148,6 +148,7 @@ export const StepSelectConfig: React.FunctionComponent<{
                 setSelectedConfigId(newAgentConfig.id);
               }
             }}
+            ownFocus={true}
           />
         </EuiPortal>
       ) : null}

diff --git a/.../applications/ingest_manager/sections/agent_config/list_page/components/create_config.tsx b/.../applications/ingest_manager/sections/agent_config/list_page/components/create_config.tsx
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React, { useState } from 'react';
+import styled from 'styled-components';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
@@ -17,16 +18,24 @@ import {
   EuiButtonEmpty,
   EuiButton,
   EuiText,
+  EuiFlyoutProps,
 } from '@elastic/eui';
 import { NewAgentConfig, AgentConfig } from '../../../../types';
 import { useCapabilities, useCore, sendCreateAgentConfig } from '../../../../hooks';
 import { AgentConfigForm, agentConfigFormValidation } from '../../components';
 
-interface Props {
+const FlyoutWithHigherZIndex = styled(EuiFlyout)`
+  z-index: ${(props) => props.theme.eui.euiZLevel5};
+`;
+
+interface Props extends EuiFlyoutProps {
   onClose: (createdAgentConfig?: AgentConfig) => void;
 }
 
-export const CreateAgentConfigFlyout: React.FunctionComponent<Props> = ({ onClose }) => {
+export const CreateAgentConfigFlyout: React.FunctionComponent<Props> = ({
+  onClose,
+  ...restOfProps
+}) => {
   const { notifications } = useCore();
   const hasWriteCapabilites = useCapabilities().write;
   const [agentConfig, setAgentConfig] = useState<NewAgentConfig>({
@@ -147,10 +156,10 @@ export const CreateAgentConfigFlyout: React.FunctionComponent<Props> = ({ onClos
   );
 
   return (
-    <EuiFlyout onClose={onClose} size="l" maxWidth={400}>
+    <FlyoutWithHigherZIndex onClose={onClose} size="l" maxWidth={400} {...restOfProps}>
       {header}
       {body}
       {footer}
-    </EuiFlyout>
+    </FlyoutWithHigherZIndex>
   );
 };