[Connection Details] Cloud ID info "?" icon with popup (#183388)

## Summary

Cloud ID copy input now has a information "?" icon with a popup and a
link.


![image](36b07f12-bda5-41fd-baac-5cd4791042c0)


![image](3ddb2f81-e69b-47d7-8a32-2c726c114ec1)


![cloud-id-popover](52eed8c4-bf25-4f7b-b631-adc47de3432f)



### 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)


### Release note

Cloud ID copy input now has a information "?" icon with a popup and a
link.


![cloud-id-popover](52eed8c4-bf25-4f7b-b631-adc47de3432f)

packages/cloud/connection_details/connection_details_flyout_content.stories.tsx

@@ -21,7 +21,7 @@ export default {
 
 export const Default = () => {
   return (
-    <EuiFlyout size="l" onClose={() => {}}>
+    <EuiFlyout size="s" onClose={() => {}}>
       <StoriesProvider>
         <ConnectionDetailsFlyoutContent />
       </StoriesProvider>
@@ -31,7 +31,7 @@ export const Default = () => {
 
 export const CreationError = () => {
   return (
-    <EuiFlyout size="l" onClose={() => {}}>
+    <EuiFlyout size="s" onClose={() => {}}>
       <StoriesProviderKeyCreationError>
         <ConnectionDetailsFlyoutContent />
       </StoriesProviderKeyCreationError>
@@ -41,7 +41,7 @@ export const CreationError = () => {
 
 export const MissingPermissions = () => {
   return (
-    <EuiFlyout size="l" onClose={() => {}}>
+    <EuiFlyout size="s" onClose={() => {}}>
       <StoriesProviderNoKeyPermissions>
         <ConnectionDetailsFlyoutContent />
       </StoriesProviderNoKeyPermissions>

packages/cloud/connection_details/kibana/kibana_connection_details_provider.tsx

@@ -35,6 +35,7 @@ const createOpts = async (props: KibanaConnectionDetailsProviderProps) => {
     endpoints: {
       id: start.plugins?.cloud?.cloudId,
       url: start.plugins?.cloud?.elasticsearchUrl,
+      cloudIdLearMoreLink: docLinks?.links?.cloud?.beatsAndLogstashConfiguration,
       ...options?.endpoints,
     },
     apiKeys: {

packages/cloud/connection_details/stories.tsx

@@ -17,6 +17,7 @@ const defaultOpts: ConnectionDetailsOpts = {
   endpoints: {
     url: 'https://f67d6bf1a3cf40888e8863f6cb2cdc4c.us-east-1.aws.staging.foundit.no:443',
     id: 'my-cluster-id:dXMtZWFzdC0xLmF3cy5zdGFnaW5nLmZvdW5kaXQubm8kZjY3ZDZiZjFhM2NmNDA4ODhlODg2M2Y2Y2IyY2RjNGMkOWViYzEzYjRkOTU0NDI2NDljMzcwZTNlZjMyZWYzOGI=',
+    cloudIdLearMoreLink: 'https://www.elastic.co/guide/en/cloud/current/ec-cloud-id.html',
   },
   apiKeys: {
     manageKeysLink: 'https://www.elastic.co/MANAGE_API_KEYS',

packages/cloud/connection_details/tabs/endpoints_tab/rows/cloud_id_row/cloud_id_row.tsx

@@ -9,9 +9,10 @@
 import * as React from 'react';
 import { EuiFormRow, EuiSpacer, EuiSwitch } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { CopyInput } from '../../../components/copy_input';
-import { useConnectionDetailsService } from '../../../context';
-import { useBehaviorSubject } from '../../../hooks/use_behavior_subject';
+import { CopyInput } from '../../../../components/copy_input';
+import { useConnectionDetailsService } from '../../../../context';
+import { useBehaviorSubject } from '../../../../hooks/use_behavior_subject';
+import { Label } from './label';
 
 export interface CloudIdRowProps {
   value: string;
@@ -38,9 +39,7 @@ export const CloudIdRow: React.FC<CloudIdRowProps> = ({ value }) => {
 
       {showCloudId && (
         <EuiFormRow
-          label={i18n.translate('cloud.connectionDetails.tab.endpoints.cloudIdField.label', {
-            defaultMessage: 'Cloud ID',
-          })}
+          label={<Label learnMoreUrl={service.opts.endpoints?.cloudIdLearMoreLink} />}
           helpText={i18n.translate('cloud.connectionDetails.tab.endpoints.cloudIdField.helpText', {
             defaultMessage:
               'Specific client libraries and connectors can use this unique identifier specific to Elastic Cloud.',

packages/cloud/connection_details/tabs/endpoints_tab/rows/cloud_id_row/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './cloud_id_row';

packages/cloud/connection_details/tabs/endpoints_tab/rows/cloud_id_row/label.tsx

@@ -0,0 +1,78 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import * as React from 'react';
+import {
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiPopover,
+  EuiText,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+export const Label: React.FC<{ learnMoreUrl?: string }> = ({ learnMoreUrl }) => {
+  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+
+  const labelText = i18n.translate('cloud.connectionDetails.tab.endpoints.cloudIdField.label', {
+    defaultMessage: 'Cloud ID',
+  });
+
+  if (!learnMoreUrl) {
+    return <>{labelText}</>;
+  }
+
+  return (
+    <EuiFlexGroup css={{ minWidth: 200, height: 16 }} alignItems="center" gutterSize="xs">
+      <EuiFlexItem grow={false}>
+        <EuiText size="xs" css={{ fontWeight: 600 }}>
+          {labelText}
+        </EuiText>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiPopover
+          button={
+            <EuiButtonIcon
+              iconType="questionInCircle"
+              onClick={() => {
+                setIsPopoverOpen((x) => !x);
+              }}
+            />
+          }
+          isOpen={isPopoverOpen}
+          closePopover={() => {
+            setIsPopoverOpen(false);
+          }}
+          anchorPosition="upLeft"
+          hasArrow={false}
+        >
+          <p style={{ width: 270 }}>
+            <FormattedMessage
+              id="cloud.connectionDetails.tab.endpoints.cloudIdField.label.tooltip"
+              defaultMessage="Get started with Elastic Agent or Logstash quickly. The Cloud ID simplifies sending data to Elastic. {link}"
+              values={{
+                link: (
+                  <EuiLink href={learnMoreUrl} external>
+                    {i18n.translate(
+                      'cloud.connectionDetails.tab.endpoints.cloudIdField.learnMore',
+                      {
+                        defaultMessage: 'Learn more',
+                      }
+                    )}
+                  </EuiLink>
+                ),
+              }}
+            />
+          </p>
+        </EuiPopover>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};

packages/cloud/connection_details/types.ts

@@ -22,6 +22,7 @@ export interface ConnectionDetailsOptsLinks {
 export interface ConnectionDetailsOptsEndpoints {
   url?: string;
   id?: string;
+  cloudIdLearMoreLink?: string;
 }
 
 export interface ConnectionDetailsOptsApiKeys {