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

This commit is contained in:
Jen Huang 2020-07-13 12:56:57 -07:00 committed by GitHub
parent b3c6ce9aea
commit 1d23a48f98
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 4 deletions

View file

@ -148,6 +148,7 @@ export const StepSelectConfig: React.FunctionComponent<{
setSelectedConfigId(newAgentConfig.id);
}
}}
ownFocus={true}
/>
</EuiPortal>
) : null}

View file

@ -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>
);
};