[Connection Details] Show "Manage api keys" link when no permissions (#183599)

## Summary

This change show the "Manage API keys" link on the Connection Details
flyout "API key" tab when user does not have permissions to edit their
API keys:


![image](89f5e1a4-737e-401c-ba9e-314ded050bd2)


### Checklist

Delete any items that are not applicable to this PR.

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [x]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

### For maintainers

- [x] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
This commit is contained in:
Vadim Kibana 2024-05-17 11:14:49 +02:00 committed by GitHub
parent 4a3b74a167
commit b0f8ee7f5e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -7,25 +7,32 @@
*/
import * as React from 'react';
import { EuiCallOut } from '@elastic/eui';
import { EuiCallOut, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { ManageKeysLink } from '../components/manage_keys_link';
export const MissingPermissionsPanel: React.FC = () => {
return (
<EuiCallOut
color={'warning'}
iconType={'iInCircle'}
title={i18n.translate('cloud.connectionDetails.tabs.apiKeys.missingPermPanel.title', {
defaultMessage: 'Missing permissions',
})}
>
<p>
{i18n.translate('cloud.connectionDetails.tabs.apiKeys.missingPermPanel.description', {
defaultMessage:
'Your assigned role does not have the necessary permissions to create an API key. ' +
'Please contact your administrator.',
<>
<EuiCallOut
color={'warning'}
iconType={'iInCircle'}
title={i18n.translate('cloud.connectionDetails.tabs.apiKeys.missingPermPanel.title', {
defaultMessage: 'Missing permissions',
})}
</p>
</EuiCallOut>
>
<p>
{i18n.translate('cloud.connectionDetails.tabs.apiKeys.missingPermPanel.description', {
defaultMessage:
'Your assigned role does not have the necessary permissions to create an API key. ' +
'Please contact your administrator.',
})}
</p>
</EuiCallOut>
<EuiSpacer size={'m'} />
<ManageKeysLink />
</>
);
};