[Cloud] Fix endpoint label & add tooltip for Cloud ID (#169090)

packages/cloud/deployment_details/deployment_details.tsx

@@ -25,8 +25,14 @@ const hasActiveModifierKey = (event: React.MouseEvent): boolean => {
 };
 
 export const DeploymentDetails = ({ closeModal }: { closeModal?: () => void }) => {
-  const { cloudId, elasticsearchUrl, managementUrl, learnMoreUrl, navigateToUrl } =
-    useDeploymentDetails();
+  const {
+    cloudId,
+    elasticsearchUrl,
+    managementUrl,
+    apiKeysLearnMoreUrl,
+    cloudIdLearnMoreUrl,
+    navigateToUrl,
+  } = useDeploymentDetails();
   const isInsideModal = !!closeModal;
 
   if (!cloudId) {
@@ -39,7 +45,7 @@ export const DeploymentDetails = ({ closeModal }: { closeModal?: () => void }) =
       {elasticsearchUrl && <DeploymentDetailsEsInput elasticsearchUrl={elasticsearchUrl} />}
 
       {/* Cloud ID */}
-      <DeploymentDetailsCloudIdInput cloudId={cloudId} />
+      <DeploymentDetailsCloudIdInput cloudId={cloudId} learnMoreUrl={cloudIdLearnMoreUrl} />
 
       <EuiSpacer size="m" />
 
@@ -67,7 +73,7 @@ export const DeploymentDetails = ({ closeModal }: { closeModal?: () => void }) =
           </EuiFlexItem>
           {!isInsideModal && (
             <EuiFlexItem grow={false}>
-              <EuiLink external href={learnMoreUrl} target="_blank">
+              <EuiLink external href={apiKeysLearnMoreUrl} target="_blank">
                 {i18n.translate('cloud.deploymentDetails.learnMoreButtonLabel', {
                   defaultMessage: 'Learn more',
                 })}

packages/cloud/deployment_details/deployment_details_cloudid_input.tsx

@@ -5,7 +5,7 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React, { type FC } from 'react';
+import React, { useState, type FC } from 'react';
 import {
   EuiFormRow,
   EuiFieldText,
@@ -13,17 +13,68 @@ import {
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiText,
+  EuiLink,
+  EuiPopover,
 } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 
-export const DeploymentDetailsCloudIdInput: FC<{ cloudId: string }> = ({ cloudId }) => {
+const LearnMoreLink: FC<{ learnMoreUrl: string }> = ({ learnMoreUrl }) => (
+  <EuiLink href={learnMoreUrl}>
+    {i18n.translate('cloud.deploymentDetails.cloudIDLabelToolip.learnMoreLink', {
+      defaultMessage: 'Learn more',
+    })}
+  </EuiLink>
+);
+
+const Label: FC<{ learnMoreUrl: string }> = ({ learnMoreUrl }) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
   return (
-    <EuiFormRow
-      label={i18n.translate('cloud.deploymentDetails.cloudIDLabel', {
-        defaultMessage: 'Cloud ID',
-      })}
-      fullWidth
-    >
+    <EuiFlexGroup css={{ minWidth: '200px' }} alignItems="center" gutterSize="xs">
+      <EuiFlexItem grow={false}>
+        <EuiText size="xs" css={{ fontWeight: 600 }}>
+          {i18n.translate('cloud.deploymentDetails.cloudIDLabel', {
+            defaultMessage: 'Cloud ID',
+          })}
+        </EuiText>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiPopover
+          button={
+            <EuiButtonIcon
+              iconType="questionInCircle"
+              onClick={() => {
+                setIsPopoverOpen(true);
+              }}
+            />
+          }
+          isOpen={isPopoverOpen}
+          closePopover={() => {
+            setIsPopoverOpen(false);
+          }}
+          anchorPosition="upCenter"
+        >
+          <p style={{ width: 270 }}>
+            <FormattedMessage
+              id="cloud.deploymentDetails.cloudIDLabelToolip"
+              defaultMessage="Get started with Elastic Agent or Logstash quickly. The Cloud ID simplifies sending data to Elastic. {link}"
+              values={{ link: <LearnMoreLink learnMoreUrl={learnMoreUrl} /> }}
+            />
+          </p>
+        </EuiPopover>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+
+export const DeploymentDetailsCloudIdInput: FC<{ cloudId: string; learnMoreUrl: string }> = ({
+  cloudId,
+  learnMoreUrl,
+}) => {
+  return (
+    <EuiFormRow label={<Label learnMoreUrl={learnMoreUrl} />} fullWidth>
       <EuiFlexGroup gutterSize="s">
         <EuiFlexItem>
           <EuiFieldText

packages/cloud/deployment_details/deployment_details_es_input.tsx

@@ -22,7 +22,7 @@ export const DeploymentDetailsEsInput: FC<{ elasticsearchUrl: string }> = ({
   return (
     <EuiFormRow
       label={i18n.translate('cloud.deploymentDetails.elasticEndpointLabel', {
-        defaultMessage: 'Elastic endpoint',
+        defaultMessage: 'Elasticsearch endpoint',
       })}
       fullWidth
     >

packages/cloud/deployment_details/deployment_details_modal.tsx

@@ -26,7 +26,7 @@ interface Props {
 }
 
 export const DeploymentDetailsModal: FC<Props> = ({ closeModal }) => {
-  const { learnMoreUrl } = useDeploymentDetails();
+  const { apiKeysLearnMoreUrl } = useDeploymentDetails();
 
   return (
     <EuiModal
@@ -49,7 +49,7 @@ export const DeploymentDetailsModal: FC<Props> = ({ closeModal }) => {
       <EuiModalFooter>
         <EuiFlexGroup alignItems="baseline" justifyContent="flexEnd">
           <EuiFlexItem grow={false}>
-            <EuiLink external href={learnMoreUrl} target="_blank">
+            <EuiLink external href={apiKeysLearnMoreUrl} target="_blank">
               {i18n.translate('cloud.deploymentDetails.modal.learnMoreButtonLabel', {
                 defaultMessage: 'Learn more',
               })}

packages/cloud/deployment_details/services.tsx

@@ -12,7 +12,8 @@ export interface DeploymentDetailsContextValue {
   cloudId?: string;
   elasticsearchUrl?: string;
   managementUrl?: string;
-  learnMoreUrl: string;
+  apiKeysLearnMoreUrl: string;
+  cloudIdLearnMoreUrl: string;
   navigateToUrl(url: string): Promise<void>;
 }
 
@@ -64,6 +65,9 @@ export interface DeploymentDetailsKibanaDependencies {
       fleet: {
         apiKeysLearnMore: string;
       };
+      cloud: {
+        beatsAndLogstashConfiguration: string;
+      };
     };
   };
 }
@@ -86,6 +90,7 @@ export const DeploymentDetailsKibanaProvider: FC<DeploymentDetailsKibanaDependen
     docLinks: {
       links: {
         fleet: { apiKeysLearnMore },
+        cloud: { beatsAndLogstashConfiguration },
       },
     },
   } = services;
@@ -99,7 +104,8 @@ export const DeploymentDetailsKibanaProvider: FC<DeploymentDetailsKibanaDependen
       cloudId={isCloudEnabled ? cloudId : undefined}
       elasticsearchUrl={elasticsearchUrl}
       managementUrl={managementUrl}
-      learnMoreUrl={apiKeysLearnMore}
+      apiKeysLearnMoreUrl={apiKeysLearnMore}
+      cloudIdLearnMoreUrl={beatsAndLogstashConfiguration}
       navigateToUrl={navigateToUrl}
     >
       {children}

packages/cloud/tsconfig.json

@@ -17,5 +17,6 @@
   ],
   "kbn_references": [
     "@kbn/i18n",
+    "@kbn/i18n-react",
   ]
 }

packages/kbn-doc-links/src/get_doc_links.ts

@@ -65,6 +65,7 @@ export const getDocLinks = ({ kibanaBranch }: GetDocLinkOptions): DocLinks => {
       guide: `${KIBANA_DOCS}canvas.html`,
     },
     cloud: {
+      beatsAndLogstashConfiguration: `${ELASTIC_WEBSITE_URL}guide/en/cloud/current/ec-cloud-id.html`,
       indexManagement: `${ELASTIC_WEBSITE_URL}guide/en/cloud/current/ec-configure-index-management.html`,
     },
     console: {

packages/kbn-doc-links/src/types.ts

@@ -46,6 +46,7 @@ export interface DocLinks {
     readonly guide: string;
   };
   readonly cloud: {
+    readonly beatsAndLogstashConfiguration: string;
     readonly indexManagement: string;
   };
   readonly console: {