import React from 'react' ; import { useValues } from 'kea' ; import { EuiFlyoutHeader , EuiTitle } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { FLYOUT_ARIA_LABEL_ID } from '../constants' ; import { CredentialsLogic } from '../credentials_logic' ; export const CredentialsFlyoutHeader = ( ) => { const { activeApiToken } = useValues ( CredentialsLogic ) ; return ( < EuiFlyoutHeader hasBorder > < EuiTitle size = "m" > < h2 id = { FLYOUT_ARIA_LABEL_ID } > { activeApiToken . id ? i18n . translate ( 'xpack.enterpriseSearch.appSearch.credentials.flyout.updateTitle' , { defaultMessage : 'Update {tokenName}' , values : { tokenName : activeApiToken . name } , } ) : i18n . translate ( 'xpack.enterpriseSearch.appSearch.credentials.flyout.createTitle' , { defaultMessage : 'Create a new key' , } ) } < /h2> < /EuiTitle> < /EuiFlyoutHeader>); } ;