import React from 'react' ; import { useActions } from 'kea' ; import { EuiPortal , EuiFlyout } from '@elastic/eui' ; import { FLYOUT_ARIA_LABEL_ID } from '../constants' ; import { CredentialsLogic } from '../credentials_logic' ; import { CredentialsFlyoutBody } from './body' ; import { CredentialsFlyoutFooter } from './footer' ; import { CredentialsFlyoutHeader } from './header' ; export const CredentialsFlyout = ( ) => { const { hideCredentialsForm } = useActions ( CredentialsLogic ) ; return ( < EuiPortal > < EuiFlyout onClose = { hideCredentialsForm } hideCloseButton ownFocus aria - labelledby = { FLYOUT_ARIA_LABEL_ID } size = "s" > < CredentialsFlyoutHeader /> < CredentialsFlyoutBody / > < CredentialsFlyoutFooter /> < /EuiFlyout> < /EuiPortal>); } ;