Fix create agent config flyout being covered by bottom bar (#71502)
This commit is contained in:
parent
b3c6ce9aea
commit
1d23a48f98
|
@ -148,6 +148,7 @@ export const StepSelectConfig: React.FunctionComponent<{
|
||||||
setSelectedConfigId(newAgentConfig.id);
|
setSelectedConfigId(newAgentConfig.id);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
|
ownFocus={true}
|
||||||
/>
|
/>
|
||||||
</EuiPortal>
|
</EuiPortal>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
|
@ -4,6 +4,7 @@
|
||||||
* you may not use this file except in compliance with the Elastic License.
|
* you may not use this file except in compliance with the Elastic License.
|
||||||
*/
|
*/
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
import { i18n } from '@kbn/i18n';
|
import { i18n } from '@kbn/i18n';
|
||||||
import { FormattedMessage } from '@kbn/i18n/react';
|
import { FormattedMessage } from '@kbn/i18n/react';
|
||||||
import {
|
import {
|
||||||
|
@ -17,16 +18,24 @@ import {
|
||||||
EuiButtonEmpty,
|
EuiButtonEmpty,
|
||||||
EuiButton,
|
EuiButton,
|
||||||
EuiText,
|
EuiText,
|
||||||
|
EuiFlyoutProps,
|
||||||
} from '@elastic/eui';
|
} from '@elastic/eui';
|
||||||
import { NewAgentConfig, AgentConfig } from '../../../../types';
|
import { NewAgentConfig, AgentConfig } from '../../../../types';
|
||||||
import { useCapabilities, useCore, sendCreateAgentConfig } from '../../../../hooks';
|
import { useCapabilities, useCore, sendCreateAgentConfig } from '../../../../hooks';
|
||||||
import { AgentConfigForm, agentConfigFormValidation } from '../../components';
|
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;
|
onClose: (createdAgentConfig?: AgentConfig) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const CreateAgentConfigFlyout: React.FunctionComponent<Props> = ({ onClose }) => {
|
export const CreateAgentConfigFlyout: React.FunctionComponent<Props> = ({
|
||||||
|
onClose,
|
||||||
|
...restOfProps
|
||||||
|
}) => {
|
||||||
const { notifications } = useCore();
|
const { notifications } = useCore();
|
||||||
const hasWriteCapabilites = useCapabilities().write;
|
const hasWriteCapabilites = useCapabilities().write;
|
||||||
const [agentConfig, setAgentConfig] = useState<NewAgentConfig>({
|
const [agentConfig, setAgentConfig] = useState<NewAgentConfig>({
|
||||||
|
@ -147,10 +156,10 @@ export const CreateAgentConfigFlyout: React.FunctionComponent<Props> = ({ onClos
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<EuiFlyout onClose={onClose} size="l" maxWidth={400}>
|
<FlyoutWithHigherZIndex onClose={onClose} size="l" maxWidth={400} {...restOfProps}>
|
||||||
{header}
|
{header}
|
||||||
{body}
|
{body}
|
||||||
{footer}
|
{footer}
|
||||||
</EuiFlyout>
|
</FlyoutWithHigherZIndex>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue