[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](https://github.com/elastic/kibana/assets/82822460/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)

packages/cloud/connection_details/tabs/api_keys_tab/views/missing_permissions_panel.tsx

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