[Cloud] ES endpoint discovery (#167122)

.github/CODEOWNERS

@@ -67,6 +67,7 @@ packages/kbn-ci-stats-performance-metrics @elastic/kibana-operations
 packages/kbn-ci-stats-reporter @elastic/kibana-operations
 packages/kbn-ci-stats-shipper-cli @elastic/kibana-operations
 packages/kbn-cli-dev-mode @elastic/kibana-operations
+packages/cloud @elastic/kibana-core
 x-pack/plugins/cloud_integrations/cloud_chat @elastic/kibana-core
 x-pack/plugins/cloud_integrations/cloud_chat_provider @elastic/kibana-core
 x-pack/plugins/cloud_integrations/cloud_data_migration @elastic/platform-onboarding

.i18nrc.json

@@ -15,6 +15,7 @@
     "customIntegrations": "src/plugins/custom_integrations",
     "customIntegrationsPackage": "packages/kbn-custom-integrations",
     "dashboard": "src/plugins/dashboard",
+    "cloud": "packages/cloud",
     "domDragDrop": "packages/kbn-dom-drag-drop",
     "controls": "src/plugins/controls",
     "data": "src/plugins/data",

docs/setup/connect-to-elasticsearch.asciidoc

@@ -54,8 +54,9 @@ Details for each programming language library that Elastic provides are in the
 https://www.elastic.co/guide/en/elasticsearch/client/index.html[{es} Client documentation].
 
 If you are running {kib} on our hosted {es} Service,
-click *View deployment details* on the *Integrations* view
+click *Endpoints* on the *Integrations* view
 to verify your {es} endpoint and Cloud ID, and create API keys for integration.
+Alternatively, the *Endpoints* are also accessible through the top bar help menu.
 
 [float]
 === Add sample data

package.json

@@ -173,6 +173,7 @@
     "@kbn/chart-expressions-common": "link:src/plugins/chart_expressions/common",
     "@kbn/chart-icons": "link:packages/kbn-chart-icons",
     "@kbn/charts-plugin": "link:src/plugins/charts",
+    "@kbn/cloud": "link:packages/cloud",
     "@kbn/cloud-chat-plugin": "link:x-pack/plugins/cloud_integrations/cloud_chat",
     "@kbn/cloud-chat-provider-plugin": "link:x-pack/plugins/cloud_integrations/cloud_chat_provider",
     "@kbn/cloud-data-migration-plugin": "link:x-pack/plugins/cloud_integrations/cloud_data_migration",

packages/cloud/README.md

@@ -0,0 +1,3 @@
+# @kbn/cloud
+
+Empty package generated by @kbn/generate

packages/cloud/deployment_details/deployment_details.tsx

@@ -0,0 +1,81 @@
+/*
+ * 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 React from 'react';
+
+import {
+  EuiForm,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiButtonEmpty,
+  EuiSpacer,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { useDeploymentDetails } from './services';
+import { DeploymentDetailsEsInput } from './deployment_details_es_input';
+import { DeploymentDetailsCloudIdInput } from './deployment_details_cloudid_input';
+
+const hasActiveModifierKey = (event: React.MouseEvent): boolean => {
+  return event.metaKey || event.altKey || event.ctrlKey || event.shiftKey;
+};
+
+export const DeploymentDetails = ({ closeModal }: { closeModal?: () => void }) => {
+  const { cloudId, elasticsearchUrl, managementUrl, learnMoreUrl, navigateToUrl } =
+    useDeploymentDetails();
+  const isInsideModal = !!closeModal;
+
+  if (!cloudId) {
+    return null;
+  }
+
+  return (
+    <EuiForm component="div">
+      {/* Elastic endpoint */}
+      {elasticsearchUrl && <DeploymentDetailsEsInput elasticsearchUrl={elasticsearchUrl} />}
+
+      {/* Cloud ID */}
+      <DeploymentDetailsCloudIdInput cloudId={cloudId} />
+
+      <EuiSpacer size="m" />
+
+      {managementUrl && (
+        <EuiFlexGroup gutterSize="m" justifyContent="spaceBetween" alignItems="center">
+          <EuiFlexItem grow={false}>
+            {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
+            <EuiButtonEmpty
+              href={managementUrl}
+              onClick={(e: React.MouseEvent) => {
+                if (!hasActiveModifierKey(e)) {
+                  e.preventDefault();
+                  navigateToUrl(managementUrl);
+                }
+                if (closeModal) {
+                  closeModal();
+                }
+              }}
+              flush="left"
+            >
+              {i18n.translate('cloud.deploymentDetails.createManageApiKeysButtonLabel', {
+                defaultMessage: 'Create and manage API keys',
+              })}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          {!isInsideModal && (
+            <EuiFlexItem grow={false}>
+              <EuiLink external href={learnMoreUrl} target="_blank">
+                {i18n.translate('cloud.deploymentDetails.learnMoreButtonLabel', {
+                  defaultMessage: 'Learn more',
+                })}
+              </EuiLink>
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+      )}
+    </EuiForm>
+  );
+};

packages/cloud/deployment_details/deployment_details_cloudid_input.tsx

@@ -0,0 +1,46 @@
+/*
+ * 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 React, { type FC } from 'react';
+import {
+  EuiFormRow,
+  EuiFieldText,
+  EuiCopy,
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+export const DeploymentDetailsCloudIdInput: FC<{ cloudId: string }> = ({ cloudId }) => {
+  return (
+    <EuiFormRow
+      label={i18n.translate('cloud.deploymentDetails.cloudIDLabel', {
+        defaultMessage: 'Cloud ID',
+      })}
+      fullWidth
+    >
+      <EuiFlexGroup gutterSize="s">
+        <EuiFlexItem>
+          <EuiFieldText
+            value={cloudId}
+            fullWidth
+            disabled
+            data-test-subj="deploymentDetailsCloudID"
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiCopy textToCopy={cloudId}>
+            {(copy) => (
+              <EuiButtonIcon onClick={copy} iconType="copyClipboard" display="base" size="m" />
+            )}
+          </EuiCopy>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFormRow>
+  );
+};

packages/cloud/deployment_details/deployment_details_es_input.tsx

@@ -0,0 +1,48 @@
+/*
+ * 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 React, { type FC } from 'react';
+import {
+  EuiFormRow,
+  EuiFieldText,
+  EuiCopy,
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+export const DeploymentDetailsEsInput: FC<{ elasticsearchUrl: string }> = ({
+  elasticsearchUrl,
+}) => {
+  return (
+    <EuiFormRow
+      label={i18n.translate('cloud.deploymentDetails.elasticEndpointLabel', {
+        defaultMessage: 'Elastic endpoint',
+      })}
+      fullWidth
+    >
+      <EuiFlexGroup gutterSize="s">
+        <EuiFlexItem>
+          <EuiFieldText
+            value={elasticsearchUrl}
+            fullWidth
+            disabled
+            data-test-subj="deploymentDetailsEsEndpoint"
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiCopy textToCopy={elasticsearchUrl}>
+            {(copy) => (
+              <EuiButtonIcon onClick={copy} iconType="copyClipboard" display="base" size="m" />
+            )}
+          </EuiCopy>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFormRow>
+  );
+};

packages/cloud/deployment_details/deployment_details_modal.tsx

@@ -0,0 +1,69 @@
+/*
+ * 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 React, { type FC } from 'react';
+import { i18n } from '@kbn/i18n';
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+} from '@elastic/eui';
+import { useDeploymentDetails } from './services';
+import { DeploymentDetails } from './deployment_details';
+
+interface Props {
+  closeModal: () => void;
+}
+
+export const DeploymentDetailsModal: FC<Props> = ({ closeModal }) => {
+  const { learnMoreUrl } = useDeploymentDetails();
+
+  return (
+    <EuiModal
+      onClose={() => {
+        closeModal();
+      }}
+      style={{ width: 600 }}
+      data-test-subj="deploymentDetailsModal"
+    >
+      <EuiModalHeader>
+        <EuiModalHeaderTitle>
+          {i18n.translate('cloud.deploymentDetails.helpMenuLinks.endpoints', {
+            defaultMessage: 'Endpoints',
+          })}
+        </EuiModalHeaderTitle>
+      </EuiModalHeader>
+      <EuiModalBody>
+        <DeploymentDetails closeModal={closeModal} />
+      </EuiModalBody>
+      <EuiModalFooter>
+        <EuiFlexGroup alignItems="baseline" justifyContent="flexEnd">
+          <EuiFlexItem grow={false}>
+            <EuiLink external href={learnMoreUrl} target="_blank">
+              {i18n.translate('cloud.deploymentDetails.modal.learnMoreButtonLabel', {
+                defaultMessage: 'Learn more',
+              })}
+            </EuiLink>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton onClick={closeModal} fill>
+              {i18n.translate('cloud.deploymentDetails.modal.closeButtonLabel', {
+                defaultMessage: 'Close',
+              })}
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiModalFooter>
+    </EuiModal>
+  );
+};

packages/cloud/deployment_details/index.ts

@@ -0,0 +1,11 @@
+/*
+ * 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 { DeploymentDetailsKibanaProvider, DeploymentDetailsProvider } from './services';
+export { DeploymentDetails } from './deployment_details';
+export { DeploymentDetailsModal } from './deployment_details_modal';